[Sovled] Extended Listviewer powered by Airtable

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.

Below are the blocks

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

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!

1 Like

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

2 Likes

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

The empty item is still second in the list.

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

Below is my viewer items,

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

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

1 Like

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.

2 Likes

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

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.

2 Likes

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.

1 Like

Thanks again.

Your suggestion solved the issue.

I also found another way of doing it at

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

Finally,

Big thanks to you all.

3 Likes

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.

4 Likes

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