How to insert new item in custom (cloneable) dataviewer in real-time?

Questions about Thunkable
,
1

Hi there!

I’m struggling to figure out custom listview displayed with data from API. I’ve done displaying list of items with picture and title by this way and it works fine:

1603278329161
1603278329161806×396 52.2 KB

1603278422770

Next, I’d like to display the clicked items in another list on the same page (just below). Eventually, it’s gonna be two lists: the second list is empty initially, the first one has a list of items (from API) which you can click and they will be displayed as flagged with the same structure in the second list.
It was easy to display it with a simple List Viewer showing only the titles, but I need to show pictures as well.
1603279637116

I just don’t quite understand that clone-concept with indexes and all (actually I don’t understand all programming concepts at all :sweat_smile: ) I tried to adapt this solution but with no luck…
That’s kind of challenge to create a custom list with data from API and then work with it, or I missed something and there is some solution already? If so then just give me a direction, please.

Thank you!

2

I didn’t read all your post, i’m honest, but i just saw this screenshot and I’ll tell you a mistake you made:

The “all-Row”, “all-button” components, give as a result a list containing the IDs of the items that you ask (buttons, rows in your case), so you have to compare “each j item”-“in list"all-button” ith the “component” block.

Hope I helped you clarify.

If you see that something doesn’t work, disassemble a make one step at a time, cheking what is the result of each block, like make a test label, a test list viewer, etc.

Good luck

3

Hi @maxb thanks for your reply! But it seems like what you’re proposing not helping with my issue… :frowning:
That part of code works fine, as I think because it gives me a list of objects with fields I wanted.

What I want after is displaying the clicked items in another list on the same page via the cloning column-row structure (btw I haven’t noticed but I have these elements for the second list as well, let’s call them FLAGGED_CELL and FLAGGED_GRID).

4

Creating a parent-child relationship between cloned list is not easy in Thunkable, but it can be done. I’ve done a lot of work with clones, and I know it can get pretty ugly pretty fast. You may need to rethink certain UI elements based on what Thunkable CAN do, vs. what you WANT Thunkable to do. Having said that, this would be my approach…

At design time, create 2 “Master containers”, one for the parent list, one for the child list. These can be rows or columns, depending on your UI design. In each of these Containers, create one template “detail container”. Within each detail container, create all of the labels, images, text boxes, etc. to describe the list item. (e.g. Name, Description, Picture). These detail container will be the cloned elements. Set both detailed container visible property to false. Finally, in the design make both of the Master containers invisible. (hint: leave the templates and master containers visible while developing and debugging, then make then invisible when the form is working correctly).

Okay, now for the form open event. First, create a function to loop through the Parent Master Contain and delete all rows or columns not equal to the parent detail template. This will reset the parent list. Call this function during the OPEN event. Create a second function to loop through all of the row or columns components in the child Master Container not equal to the child detail template. Call this function in the OPEN even as well. Now the form is clean.

Create a third function to clone the Parent Detail template and populate it. Now here comes the magic. Create a button with either an icon or some other picture. Set the Text Color = NULL (transparent) and set the text property to some key value that can be used to open the child list (some child key value, possibly mulitple values delimited by some character like |).

Create an Any Button Click event. Check the component object for the image or the text for the image or text format you used in the parent. If it is one of those buttons, the use the information in the component to populate this child list. First, call the function that delete all of the cloned elements from the Child Master Container.

Whew! I know that was kind of vague and very long. Perhaps there is an easier way, but I don’t know it. Again, what you are trying to do is not easy in thunkable, but it can be done…

Good Luck and Happy Thunking!

4 Likes
5

Hey @drted thank you so much for your help!! I’ll definitely give it a try and post the results here. Thanks!

6

Well, I’ve made it work, but I didn’t get points about the magic button and invisible components (I made invisible only Child details)… therefore my decisions look very rough and probably not so elegant. I’d be happy if someone corrects me because further, I need to avoid repeating the flagging of one item and to be able to delete those flagged items by clicking them in the Child list. Besides I’m not sure I can mark it as Solution :sweat_smile:

1603443131338
16034431313381598×729 180 KB

2 Likes
7

It seems you are in an advanced stage that makes my suggestion not very preferable.

If I were you I would store the response of the API call to a local data source or an Airtable which is bound to a data viewer list.

I would be then making use of available components in Thunkable instead of attempting to reproduce a similar effect.

Having said that, I must say I am interested in what your trying to achieve and following up this particular issue :sweat_smile:

8

Actually, this is a good point and I was considering Airtable for a while, but knowing that all data is not secured makes me uncomfortable :slight_smile: And from my POV creating a new row for every item in API call seems too much in terms of the amount of request and capacity.

Meantime, I realized the possibility not to double-flag an item just making it invisible:

1603483789628
1603483789628771×606 73.6 KB

And somehow I could carry out deleting the flagged items:

1603483826727
1603483826727853×298 34.8 KB

The result:

list
list357×611 1.08 MB

But still…would love to see a proper solution from smart thunkers :innocent:

1 Like
9

Hi @flashag how did you get on with storing your API call?
After a lot of questions and searching I realise I have the same issue as you.
I’m able to store data into Airtable or local DB as @muneer had suggested, but like you I’m trying to find a more optimised way to work rather than making calls to the DB after every api call.

I thought I could store the API data in a list and populate the DVL from the list, but no such luck!
I thought I could be smart and make a small local DB that saves a time stamp and id whist looping through the API results and populating the the DVL using the table row block whilst saving the actual data in a list.

This didn’t work either…
For some reason my DVL only works when saving to a table that is bound to the DVL, even though the data is populating it through the set Data_Viewer_List blocks.

I won’t lie I’m becoming seriously disheartened, as my vision seems to be thwarted at every step by the limitations or needing to do a work around that isnt feasible for my app. :weary:

1 Like
10

I made this sample project for another issue but it demonstrates how to manage a cloned list using dynamically changed list.

https://x.thunkable.com/projectPage/60815826ac47a500114175a7

It can serve to show how you can workaround your issue.

1 Like
11

Thanks as always @muneer your always prepared to share help and guidance!

1 Like