# \[Sovled\] Extended Listviewer powered by Airtable

**URL:** <https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456>\
**Category:** Questions about Thunkable X\
**Tags:** solved, airtable, extended-listviewer\
**Created:** [July 21, 2021, 8:05am UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456 "2021-07-21T08:05:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ipsp](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ipsp/32/111292_2.png) [@ipsp](https://community.thunkable.com/u/ipsp)\
**Post date:** [July 21, 2021, 8:05am UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/1 "2021-07-21T08:05:53Z")

</div>

Hello all, I am new to Thunkable and I am trying to create a custom data viewer. I use Airtable with Thunkable.

I made a layout for the data viewer. The screen will also have a filter button named Busy.

 ![Screen Shot 2021-07-21 at 12.59.11 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/e/9e4683fc8958acc6c9a275d83587d0f625dab041.png)

Below are the blocks

 ![Screen Shot 2021-07-21 at 12.58.50 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/a/9a258054ac4048f76b9018672a41117e258dac9f.png)

When I preview it, there is 1 Empty row which is always displayed as the Second item in the list view.

 ![Screen Shot 2021-07-21 at 1.30.54 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/2/925a0f47ed38c57a757bfc93bf06ee138e23b92f.png)

if I add remove or hide for the DATA\_VIEWER\_eqp after clone, it removes the first or the last entry in the list but the empty entry still remains there.

Can anyone help me remove this empty entry?

I tried reading the blogs and all the available information hasn’t covered this issue.

Please help!

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 21, 2021, 10:56am UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/2 "2021-07-21T10:56:00Z")

</div>

You are not using a custom data viewer here. A data viewer is a component in the designer and you can customize it. What you are doing is designing your own viewer using the **cloning** method.

Cloning works best by looping through the rows instead of taking a count of the rows and keep calling it recursively.

You have two ways to solve the issue.

- If you want to keep your function then you need to create another function that runs through all the components of type, for example “image”, and remove the one that has no image attached to it.

- The other way is to use `for each "j" in list` to go through all the rows and create your viewer then you can safely remove the first “template” that you used to create the viewer.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/c/ec8fd632b09fa7f37e88997f0f95bb51e18f7c1d.png)

---

<div class="post-metadata">

**Author:** ![ipsp](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ipsp/32/111292_2.png) [@ipsp](https://community.thunkable.com/u/ipsp)\
**Post date:** [July 22, 2021, 7:09pm UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/3 "2021-07-22T19:09:59Z")

</div>

Thank you for your response.  
I changed it to your recommendation.

 ![Screen Shot 2021-07-23 at 12.31.03 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/a/8abdeca26af3760ed4a663f2bd32fac743def7b4.png)

The empty item is still second in the list.

 ![Screen Shot 2021-07-23 at 12.22.10 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6d6610e814296280712f46cbf6d404c4d87a077b.jpeg)

After I add the remove column(template) removes an item with data and the result is below.

 ![Screen Shot 2021-07-23 at 12.32.29 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/0/808334ec24c444cf34702b9965521ba5ce9ea144.jpeg)

Below is my viewer items,

 ![Screen Shot 2021-07-23 at 12.30.29 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/6/66b6efcf76585474b8754f18c271a010091d2ee7.png)

And also, all my records have images in them. total 8 records.

Please check. I have no idea how to debug these.

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [July 22, 2021, 7:35pm UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/4 "2021-07-22T19:35:10Z")

</div>

You’re setting the values of the ORIGINAL item, not the clone.

Is there a reason not to just use a data viewer list with a custom layout? Cloning is the harder way to do this unless there’s some specific reason to need it.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 22, 2021, 8:01pm UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/5 "2021-07-22T20:01:22Z")

</div>

The result of the screen is the expected. You are filling the original `DATA_VIEWER_eqp` instead of the newly cloned object.

This is what is taking place:

- On your first round, you create an object from the empty `DATA_VIEWER_eqp` and then you start filling the original with data and not the cloned one.
- Second round, you copy the same object (but now it has the values from the previous round) and then you fill the original with the second row.
- Other rounds take the same sequence.
- You will be left with a situation of all records are in the same order of the original table in Airtable with the exception of the last record which is showing as the top of your list.
- You will have the second row in your list as empty row.

You can continue the same way if you think you like it and it works for you but you need to remove the **second** row by using the block  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/9/e95da603c8dd790a2cafcf850dc0e4d4c44a3a30.png)

Another way of doing it is to **first** fill in the values in the `DATA_VIEWER_eqp` then clone it which will give you the list required and then you need to delete the original container.

Of course this is only if you choose to stay with cloning and not use the `Data Viewer List`.

---

<div class="post-metadata">

**Author:** ![ipsp](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ipsp/32/111292_2.png) [@ipsp](https://community.thunkable.com/u/ipsp)\
**Post date:** [July 23, 2021, 10:15am UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/6 "2021-07-23T10:15:56Z")

</div>

Thank you for your response.

One reason I thought of using it is that I couldn’t find another way to filter the list with a picture (on the same screen).

Also, I would like to have a button in the list view from which I could link it to another screen.

Feel free to suggest any other method.

---

<div class="post-metadata">

**Author:** ![ipsp](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ipsp/32/111292_2.png) [@ipsp](https://community.thunkable.com/u/ipsp)\
**Post date:** [July 23, 2021, 10:32am UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/7 "2021-07-23T10:32:08Z")

</div>

Thanks again.

Your suggestion solved the issue.

I also found another way of doing it at

> [@Custom Dataviewer and data sources (extended list viewer)](https://community.thunkable.com/t/custom-dataviewer-and-data-sources-extended-list-viewer/568413):
>
> I wanted to share this with those who want to use a data source not yet set up for the new dataviewer, like an API. this example uses my news API account (feel free to abuse it and get it shut down if you really desire) it imitates the cards created by the new dataviewer.let me know what you think. remix it up and come back to share! [https://thunk.app/w/-P6GK8VPv](https://thunk.app/w/-P6GK8VPv)[https://x.thunkable.com/copy/76e5b05a875febe850f44366434e959d](https://x.thunkable.com/copy/76e5b05a875febe850f44366434e959d) blocks used I just realiz…

Used part of it and made it better, I suppose.

 ![Screen Shot 2021-07-23 at 3.54.12 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/9/a97f88262fb38a37c5489f99eacc45ae4c083d31.png)

Finally,

 ![Screen Shot 2021-07-23 at 4.01.38 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/0/c025b776dc6c7c3c8b34f03ba72b251f5bed2dc1.png)

Big thanks to you all.

---

<div class="post-metadata">

**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:** [July 23, 2021, 1:27pm UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/8 "2021-07-23T13:27:23Z")

</div>

The dvl not reliable enough for me yet but I haven’t played with it in some time

This method I show above is nice though as it doesn’t require you to use any local dB therefore I proving the time to render

It’s also a more flexible approach as you can quickly change the layout without creating an updated dvl block.

Again, and especially when I made that, I didn’t have much practice using the dvl. This method still makes more sense

The idea above is borrowed from javascripts Class construction.

In this case, the Class is a a single large element made of smaller elements. We create 1 example of the class for each item in the data array we feed the constructor.

---

<div class="post-metadata">

**Author:** ![ipsp](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ipsp/32/111292_2.png) [@ipsp](https://community.thunkable.com/u/ipsp)\
**Post date:** [July 24, 2021, 8:50am UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/9 "2021-07-24T08:50:53Z")

</div>

Thanks for your coment, please share any better methods of doing the same.

---

<div class="post-metadata">

**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, 1:19pm UTC](https://community.thunkable.com/t/sovled-extended-listviewer-powered-by-airtable/1406456/10 "2024-11-08T13:19:39Z")

</div>


