# \[Solved\] How to convert Airtable columns to extended-listviewer? **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** solved\ **Created:** [April 10, 2020, 5:06pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149 "2020-04-10T17:06:03Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![gigiching42pvu](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@gigiching42pvu](https://community.thunkable.com/u/gigiching42pvu)\ **Post date:** [April 10, 2020, 5:06pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/1 "2020-04-10T17:06:03Z")
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 ![Screenshot 2020-04-11 at 12.49.50 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/6/667b3ce2f151380eba9617f6c2a84904e8d57dbf.png) ![Screenshot 2020-04-11 at 12.41.35 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/e/bef89ac3b0b00be626aae227e1241b056b3212c8.png) ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 10, 2020, 6:04pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/2 "2020-04-10T18:04:53Z")
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)](http://community.thunkable.com/t/changing-properties-of-cloned-components-diy-advanced-listviewer/153213): > > We’re working hard to bring you the [Extended Listviewer](https://docs.thunkable.com/release-notes#coming-soon-to-thunkable) 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? 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… ---
**Author:** ![gigiching42pvu](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@gigiching42pvu](https://community.thunkable.com/u/gigiching42pvu)\ **Post date:** [April 11, 2020, 2:44am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/3 "2020-04-11T02:44:48Z")
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. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 11, 2020, 2:47am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/4 "2020-04-11T02:47:55Z")
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. ---
**Author:** ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)\ **Post date:** [April 11, 2020, 3:08am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/5 "2020-04-11T03:08:54Z")
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)](http://community.thunkable.com/t/changing-properties-of-cloned-components-diy-advanced-listviewer/153213) This idea would surely help you 👍 Good Luck! 🎉 Thanks! 😊 ---
**Author:** ![gigiching42pvu](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@gigiching42pvu](https://community.thunkable.com/u/gigiching42pvu)\ **Post date:** [April 11, 2020, 4:17am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/6 "2020-04-11T04:17:32Z")
> [@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 ![Screenshot 2020-04-11 at 12.41.35 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/e/bef89ac3b0b00be626aae227e1241b056b3212c8.png) ![Screenshot 2020-04-11 at 11.59.16 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/8/182faf60f9c808244ebd44257ee4d3ca7c491137.png) ![Screenshot 2020-04-11 at 11.59.22 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/9/f9d6af56e3bba67d810a4bf09a3b524d211f36c4.png) ![Screenshot 2020-04-11 at 11.59.32 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/9/194f39d9bc2f85367546e3343a92f69ddcfd67b6.png) ---
**Author:** ![gigiching42pvu](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@gigiching42pvu](https://community.thunkable.com/u/gigiching42pvu)\ **Post date:** [April 11, 2020, 4:19am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/7 "2020-04-11T04:19:20Z")
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. ![Screenshot 2020-04-11 at 11.59.16 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/8/182faf60f9c808244ebd44257ee4d3ca7c491137.png) ![Screenshot 2020-04-11 at 11.59.22 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/9/f9d6af56e3bba67d810a4bf09a3b524d211f36c4.png) ![Screenshot 2020-04-11 at 11.59.32 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/9/194f39d9bc2f85367546e3343a92f69ddcfd67b6.png) ![Screenshot 2020-04-11 at 12.41.35 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/e/bef89ac3b0b00be626aae227e1241b056b3212c8.png) ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 11, 2020, 4:40am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/8 "2020-04-11T04:40:56Z")
It’s late, so i may be wrong. but wouldnt the images be indexed 1, 2, 3, 4? why the math here? ![Screen Shot 2020-04-11 at 12.24.54 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/5/25bcf0db56f5e475112b9cfa923d7b00c56e5341.png) 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. ---
**Author:** ![gigiching42pvu](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@gigiching42pvu](https://community.thunkable.com/u/gigiching42pvu)\ **Post date:** [April 11, 2020, 9:20am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/9 "2020-04-11T09:20:36Z")
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. ---
**Author:** ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)\ **Post date:** [April 11, 2020, 11:14am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/10 "2020-04-11T11:14:09Z")
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! 😺 ---
**Author:** ![gigiching42pvu](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@gigiching42pvu](https://community.thunkable.com/u/gigiching42pvu)\ **Post date:** [April 11, 2020, 3:17pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/11 "2020-04-11T15:17:57Z")
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. ![Screenshot 2020-04-11 at 10.52.03 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/9/792eed7c10edc7fa3dfbb4cdcf85c58fb0eb8209.png) ![Screenshot 2020-04-11 at 10.53.32 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/d/ed891ade9e73e759295744951894adcdb27e43fe.png) ---
**Author:** ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)\ **Post date:** [April 11, 2020, 4:26pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/12 "2020-04-11T16:26:53Z")
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) - ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/f/1f456cb467d5be66ce32099f951475bc37b2ddc2.png) Thanks! 😊 ---
**Author:** ![gigiching42pvu](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@gigiching42pvu](https://community.thunkable.com/u/gigiching42pvu)\ **Post date:** [April 12, 2020, 2:23pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/14 "2020-04-12T14:23:16Z")
@kartik14 Thanks!!! Success!!! Thank you so much Sorry for disturbing you and thank you @jared too!!! ---
**Author:** ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)\ **Post date:** [April 12, 2020, 3:58pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/15 "2020-04-12T15:58:35Z")
Glad I helped you solve your problem 😺 Please mark my post as solution ✅ Thanks! 😊 ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 12, 2020, 4:35pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/16 "2020-04-12T16:35:09Z")
@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 ---
**Author:** ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)\ **Post date:** [April 12, 2020, 4:57pm UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/17 "2020-04-12T16:57:58Z")
Oops! missed on that one 😂 ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 11:39am UTC](https://community.thunkable.com/t/solved-how-to-convert-airtable-columns-to-extended-listviewer/563149/18 "2024-11-08T11:39:06Z")