Cloning components to create "DVL" style lists

hi

the clones to display a series of cardview it’s ok , for a table where I can identify the cells easily it is ok
what does not work for me are “cardview” that I want to put in a preferential order
it is the use of a button to validate or not then nothing goes

maybe someone has a method to offer me because obviously I miss it

Can you say more about this?

It’s possible to use the List block find first occurrence of with the Any Component blocks to determine the order of the cloned components on the screen.

hi

when I saw your checkbox demo I wondered what is the logic behind this beautiful realization
in my project nothing goes from the moment I want to insert an element in a list and that this list is sorted
I have three buttons on my cardview to erase I think it’s ok
on the other hand, validating and archiving this poses a big problem for me

I use this kind of block to find the buttons and execute my actions

to validate I use these blocks :

it works as long as I don’t insert a new element

I no longer know when to save, delete the clones to create a new display

Before I read your response, I decided to make a demo for you. I hope this is helpful!

It clones a group and when you click on a label, it tells you the label position number.

https://x.thunkable.com/copy/15f507143eea94573442085209550bc8

(See the first screen with your username.)

These are the blocks that detect the click:

hi

nice showcase of what you can do with thunkable
I looked at your solution for clone id detection
your list is predefined my data is stored in firebase
to obtain sorted clones I would be obliged each time to save my data and redraw the clones?
to check a cardview I would have to save the data even if I want to uncheck it?

I’m not sure I understand your question. I use Firebase with my clones in the demo I posted.

I just loop through the Firebase list and set each label’s text to the property from each Firebase item. And then the detection part is the same as above. The blocks don’t really change just because I’m using Firebase. The setup is different but the click detection is the same.

It helps that my Firebase data is structured like this:

So I loop through the items in cloud variable “Journal/10-1-2022” and get the “item” property of each loop item.

I misspoke
your data comes from firebase but you don’t modify it dynamically it seems to me
(deleting or inserting items) what I’m trying to do is closer to your last clone and checkbox creation

I do delete items. That’s what the radio buttons are for. In the video, when I tap on the checkbox, a trash can symbol appears at the bottom-right. If I tap that, the item is deleted from Firebase. And the user can also add new items to Firebase by tapping the plus (+) symbol at the bottom of the screen.

hi

the clones are generated after each modification (so after each backup) ?
it would have been fantastic if you could make a video to see the rendering on the screen

My “When Screen Opens” block does the following:

  1. Delete all containers from the layout (I’m using Layouts that are in beta testing)
  2. Clone the container with the labels, etc. that I want to display. I also populate the labels with data from Firebase.

I also do #1 and #2 when anything is added to Firebase or deleted from Firebase. I don’t use any listeners. I just add those to any blocks that add/remove data from Firebase.

2 Likes

@bibbi Here’s a video of adding and removing an item:

https://watch.screencastify.com/v/bwdbYoNvIU6v7Tyk0PaI

I greatly appreciate your support the video is very telling
during an insertion or deletion, a flash effect can be observed (reading and display of data)
on the other hand, this flash effect I also have it when I select an item and change the background color of the selected item, it’s very frustrating

Yes, the screen updating is not fast enough to avoid the flash.

It would probably be better to clone as many items/rows as needed (in total) and then show or hide items as needed, changing the label values to display updated information. I may try that…

but what is your secret so that this does not happen when you change the color of the selected element
?
because you use groups and DnD UI?

I’m using containers that are part of layouts in DnD.

It turns out it’s slow to populate labels that way. For some reason, a loop through the Firebase list is faster when used with clones but slower when used without them. And hiding/showing clones isn’t great because if I don’t delete clones then I just keep adding more clones.

Edit: Here’s how it looks when I replace the populated values without deleting and re-creating the clones:

ezgif-1-2e20943f0d

should we resign ourselves? :thinking:

Never! :rofl: I think I’m really close to having a system that works well. For my app, I only change screens occasionally. So I might be able to clone the item rows when the screen opens and adding/deleting clones as needed, using the method in the gif above to change the item label text.

I’m hoping that if I don’t delete all of the clones at once, the flash effect will be lessened, especially when the clones I’m adding are at the end of the layout, off-screen.

I tried to use two containers: when I make a modification I create my clones in the second container and when they are created I clone the whole thing in the first but without much success at the flash effect level

I have it working! Because I’m cycling through different days’ data, I need to continually refresh the “DVL” item rows depending on the number of items in my Firebase list. So I check to see if the current day’s item count is less than or greater than the previous day’s. And then I either clone or remove containers based on the count difference (for example, if today’s list has 4 items and the previous day’s list has 2 items, then I remove 2 items because 4-2=2).

But… even though it’s fast, there is still a flash effect. I thought that was being caused by me removing all containers and re-cloning them each time I change days. But now that I’m only removing the last one or two containers that are off-screen, I didn’t expect that flash.

@conroy Any ideas about what might be causing the flash with removing containers from a layout? I suspect it’s a screen re-draw function that for some reason doesn’t occur with cloning.

Here’s what it looks like on my iPhone. I go back two days and there’s a longer list of items (Test 1, Test 2, etc.). Then I go forward one day and there’s a shorter list and you’ll notice the flash when that happens.

1 Like