[Solved] How to convert Airtable columns to extended-listviewer?

[gigiching42pvu]

The airtable contains few columns, includes image URL and text.
I want to show the image, item name, shop and price
An example is shown below.
Thanks so much

[jared]

Hey, @gigiching42pvu, thanks for posting and welcome to the community!
me, @darren and @domhnallohanlon all have examples of this on this thread!
See this post!

Changing properties of cloned components (DIY Advanced Listviewer)

We’re working hard to bring you the Extended Listviewer component to make developing your app even faster, but in the meantime here’s a DIY approach. By using the “Any Component” blocks in Thunkable, you are able to clone entire rows or columns of content. But what if you then want to change some of the components within the row or column? [20190723_121430] Design Usually you can leave the precise details of your design until the end, but in this case you need to know what components will be…

[gigiching42pvu]

thanks for your reply.
But I am confused on the example, i would like to show all items while the screen opens and show all what i need.
I am a new learner in thunkable and i really dont know how to do this.

[jared]

what you are asking to do is not a ‘beginner’ task. it will be easier soon, but not yet (waiting on the release of the new data handling components. You can do it with practice and stuyding

basically you make 1 ‘master’ blank layout. row/column (really its a list viewer made up of cards)

then you tell the app to clone that blank layout for each row in airtabel and to fill in the components in that layout with the items from that row.

[kartik14]

Hi, @gigiching42pvu!
Thanks for the screenshot of Airtable, and sample list - it helps to get your query clearly.

What you are trying to achieve, is not that tough. Let’s take a look over the steps -

• First, we would grab a row. Set it’s height to fit contents & width to fill parent. Inside the row, one image (on the left) and one column (on the right).
• In the column inside the row, take 3 labels, one below another.
• Set the font size and customise the labels according to your ideas. Also, define a fixed height and width for the image.

Now in the blocks area -

• Grab a Get AllRows block.
• Now, for each item in all rows, clone the row.
• Now, to change properties of cloned components, refer here - Changing properties of cloned components (DIY Advanced Listviewer)

This idea would surely help you
Good Luck!

Thanks!

[gigiching42pvu]

@kartik14

Changing properties of cloned components (DIY Advanced Listviewer)

Thank you!!!
I can show the item name, price and shop name. However, it is failed to show the image.
I save the image in cloudinary and copied the url in the airtable.
How can I show the image??
Thanks

[gigiching42pvu]

Thanks!!!
and i have a new question.
I can show the item name, shop name and price now but it is failed to show the image.

[jared]

It’s late, so i may be wrong. but wouldnt the images be indexed 1, 2, 3, 4?

why the math here?

like if you think you should only have 3 images, the length of the list of all images in column 1, if it’s 3 that’s hwo you index, but it may not be. it may be differnet.

[gigiching42pvu]

Oh I got it!!! Thanks so much for your advice!!! It success!!!
Now, I am going to deal with other problem. When I click the item, i want to show the next page with that item’s information and image.

[kartik14]

Hi, @gigiching42pvu!
We’re glad that you have half-way solved your problem

To do this, you would need to a button, because we cannot click rows.
Along with the labels and images, clone the button, and set the button’s background picture to your unique key column’s value from Airtable. Again, “background picture” of the button.

Now, you need to transfer a value from this screen to another, when the button is clicked. Let’s look over the steps to do this -

• Disclaimer : Make sure you don’t have any other buttons on this screen, except the one inside the row/column we just added.

• Now, go to any components option in the blocks area (bottom-left part)

• Grab the Any Button click block.

• Code like this -

  

• And then get the value on your next screen. And use it as you like.

Hope this helps you.
Thanks!

[gigiching42pvu]

Thanks!!!
I used your method in the New Item Page, it success! When I clicked the button, it shows the next page. However, only the first item info can be shown in the next page (Product Detail Page).
I know I did something wrong for the Product Detail Page Blocks.

[kartik14]

Hi, @gigiching42pvu!

Sorry, I had re-named Local_Storage component to tiny db in my given code
You need to replace the realtime db with local storage. Again sorry for my mistake
What you did, is not correct as I said - I said to just transfer the unique id field of your data.

Remove the variables, and add this block when you are getting the value (on the other screen) -

Thanks!

[gigiching42pvu]

@kartik14
Thanks!!! Success!!!
Thank you so much
Sorry for disturbing you

and thank you @jared too!!!

[kartik14]

Glad I helped you solve your problem

Please mark my post as solution

Thanks!

[jared]

@kartik14, he already marked on of mine and he’d have to choose which answer he wants to mark there were a couple questions here!

either way, I’m glad users can get their apps made1

[kartik14]

Oops! missed on that one