Tip: Easy way to use toggles in a repeating group to add or remove items to a list in database. Do YOU have a better way?

[ben7]

After trying for a long time, I came up with a pretty easy way to build the functionality I wanted.

Desired Functionality: Use toggles in a repeating group to allow user to select or deselect multiple elements in a mobile app. Bonus: Ability to use same form for initial setup and subsequent edits.

The setup for this uses conditions to set image based on if the item is already in the list. I made the ON / OFF images as SVG’s in Sketch. This allows for the toggles to always reflect the state of the database.

The data structure is simple. One table is regions, and in the user table, one field is a list of items, type: regions.

Two workflows are created to either add or remove an item to the list. These trigger off the toggle image element. When the item is not in the list, add to the list. When it is in the list, remove it from the list.

Pretty simple to set up and keep organized, and the data is saved live as user makes changes. The only downside is there is a slight delay before the image changes as bubble.is does the work in the background.

Ideally, I would like to have user set Ionic toggles or even a checkbox on or off. Then when user clicks save, the entire list is set to mirror the state of the toggles (If ON, keep in list, if OFF, remove from list). This would eliminate the slight delay.

I could not for the life of me figure out how to do that because while we have :plus item for state changes, we cannot :remove item, nor can we query the state of a toggle for elements that were not changed to replace the entire list.

If anyone has any idea on a better way to do this, please let me know!

-Ben

[fayewatson]

Awesome guide, Ben! I think that’s a great solution for custom toggles - I will definitely use that method in the future! It took me a little while to see that this was an option, but one way to use Ionic Toggles in a repeating group is to set the Preset Status to be dynamic using an expression such as:

Here if the statement is ‘true’ for a Region, the toggle will automatically become checked, and if the statement is ‘false’ for a Region the toggle will automatically become unchecked.

Then for the workflows, two “Do When Condition is True” statements can be created for when the “Ionic Toggle’s Value is Changed”:

The first being, when the Ionic Toggle is Changed and is checked → Add the Region to the Current User’s List of Regions.

And second, when the Ionic Toggle is Changed and isn’t checked → Remove the Region from the Current User’s List of Regions.

Preview: toggle-rg

Editor: faye-demo-app | Bubble Editor

It’s almost exactly the same setup as what you currently have, just a minor change with the toggle preset status!

[ben7]

This is great! I did not put together the ability to trigger a workflow based off an input change with the way to add or remove item from list in database. All other posts were talking about adding items to state lists, then saving that.

The ionic elements include animation for the state change, which looks good, and gives feedback to user, while eliminating the slight delay! I will use this method for my current use case.