Demo: Checkbox effect for cloned "DVL" components

[tatiang]

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. 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. 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

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

[manyone]

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.

[tatiang]

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.

[tatiang]

@manyone: