# Demo: Checkbox effect for cloned "DVL" components

**URL:** <https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918>\
**Category:** Questions about Thunkable X\
**Tags:** clone, dvl\
**Created:** [November 12, 2022, 5:48am UTC](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918 "2022-11-12T05:48:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**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 12, 2022, 5:48am UTC](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918/1 "2022-11-12T05:48:58Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/3/a3fb1a6d9a9b33b2a53269627c62b284d3188de7.png)

This is a work in progress. I’m building a food journal app that allows people to keep track of what they eat each day. The data is all stored in Firebase. One of the features I wanted is a way for the user to click on an item to select it and then delete it. With a Data Viewer List (DVL), it’s easy to do this with [swipe detection](https://docs.thunkable.com/data-viewer-list#swipe-click). But since I cloned the components in this “DVL”, it doesn’t have that built-in event block. So I had to figure out a way to determine which – in this case, container – component was clicked and then change the background color and add a check mark. I end up looping through all containers to set their background colors to the “non-selected/default” color and then changing the one that was clicked.

It’s not easy because there isn’t a “when container is clicked” event block. [I wish there was](https://github.com/thunkable/thunkable-issues/issues/1180). So I can’t determine when a DVL item (container) is clicked. Instead, I had to rely on the click detection for the checkbox which is actually an image. A bit messy but it does work.

You can see the effect here:

> **[clone DVL checkboxes demo](https://www.youtube.com/shorts/_OFKFuU6BDw)**

(Video contains no sound. The black click circles are from the screen recording software.)

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [November 13, 2022, 10:07pm UTC](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918/2 "2022-11-13T22:07:15Z")

</div>

i hate to be a stickler but the functionality and the buttons are a bit confusing. i’ve been used to the “standard” way of using check boxes to allow multiple choices and radio buttons to enforce single choice only. your demo seems to show that you can only select and delete one item at a time. i like the concept of simulating the “events” with images though - it’s clever.

---

<div class="post-metadata">

**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, 10:28pm UTC](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918/3 "2022-11-13T22:28:05Z")

</div>

That’s a fair point. I actually haven’t decided if the user can delete multiple items at once. I think that could get a little tricky since my Firebase keys are in a list.

It’s easy enough to change this to a radio button.

---

<div class="post-metadata">

**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, 12:43am UTC](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918/4 "2022-11-14T00:43:45Z")

</div>

@manyone:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/5/05f2ed2a46b5a1b27cb5cbf0709f458744f43d29.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [February 12, 2023, 12:44am UTC](https://community.thunkable.com/t/demo-checkbox-effect-for-cloned-dvl-components/2127918/5 "2023-02-12T00:44:08Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
