# Cloning components to create "DVL" style lists **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [November 13, 2022, 12:57pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351 "2022-11-13T12:57:04Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 13, 2022, 12:57pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/1 "2022-11-13T12:57:04Z")
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 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 13, 2022, 6:41pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/2 "2022-11-13T18:41:31Z")
> [@bibbi](#): > > if we can order clones without using a possible data source (I use firebase) simply in relation to their component identifier 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. ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 13, 2022, 6:56pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/3 "2022-11-13T18:56:39Z")
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 ![Capture d’écran 2022-11-13 à 19.54.49](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/3/b3f30e64811c1785f265eaca5aa414c4931a98b7.png) to validate I use these blocks : ![Capture d’écran 2022-11-13 à 20.02.36](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/d/0d720c43a7b37d9ab3e56c9a6b0cb3a700272378.png) 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 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 13, 2022, 7:20pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/4 "2022-11-13T19:20:24Z")
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](https://x.thunkable.com/copy/15f507143eea94573442085209550bc8) (See the first screen with your username.) These are the blocks that detect the click: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/a/baf027cdc7c3f8b42e86ce353b896225c6ac1eaa.png) ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 14, 2022, 3:14am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/5 "2022-11-14T03:14:22Z")
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? ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 14, 2022, 4:34am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/6 "2022-11-14T04:34:30Z")
I’m not sure I understand your question. I use Firebase with my clones in the [demo I posted](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918). 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: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/f/4f15fb01a6cc68c7adb1ca3a26acb63959e31ba6.png) So I loop through the items in cloud variable “Journal/10-1-2022” and get the “item” property of each loop item. ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 14, 2022, 11:49am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/7 "2022-11-14T11:49:26Z")
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 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 14, 2022, 3:37pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/8 "2022-11-14T15:37:37Z")
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. ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 14, 2022, 6:08pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/9 "2022-11-14T18:08:20Z")
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 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 14, 2022, 7:10pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/10 "2022-11-14T19:10:06Z")
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. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 14, 2022, 11:14pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/11 "2022-11-14T23:14:08Z")
@bibbi Here’s a video of adding and removing an item: [https://watch.screencastify.com/v/bwdbYoNvIU6v7Tyk0PaI](https://watch.screencastify.com/v/bwdbYoNvIU6v7Tyk0PaI) ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 15, 2022, 5:21am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/12 "2022-11-15T05:21:46Z")
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 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 15, 2022, 5:35am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/13 "2022-11-15T05:35:33Z")
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… ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 15, 2022, 5:44am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/14 "2022-11-15T05:44:27Z")
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? ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 15, 2022, 6:04am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/15 "2022-11-15T06:04:00Z")
I’m using containers that are part of [layouts](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795) in DnD. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 15, 2022, 6:58am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/16 "2022-11-15T06:58:00Z")
> [@tatiang](#): > > 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… 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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/7/776fb4e5490d4143950fb2817c9d45b92132384b.gif) ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 15, 2022, 6:22pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/18 "2022-11-15T18:22:40Z")
should we resign ourselves? 🤔 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 15, 2022, 7:02pm UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/19 "2022-11-15T19:02:17Z")
> [@bibbi](#): > > should we resign ourselves? 🤔 Never! 🤣 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. ---
**Author:** ![bibbi](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@bibbi](https://community.thunkable.com/u/bibbi)\ **Post date:** [November 16, 2022, 3:58am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/20 "2022-11-16T03:58:25Z")
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 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 16, 2022, 6:50am UTC](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351/21 "2022-11-16T06:50:37Z")
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. @conroy33 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. [![](https://img.youtube.com/vi/baMWcjPxz4U/maxresdefault.jpg "DVL clone demo") ](https://www.youtube.com/watch?v=baMWcjPxz4U) [Next page](https://community.thunkable.com/t/cloning-components-to-create-dvl-style-lists/2129351.md?page=2)