In today’s tutorial I am gonna build a custom checkbox list in Bubble, that will store the list elements (aka an array). The custom checkbox will have a checkbox icon and image and a text, which in default bubble doesn’t have. So stay with me it will be short.
Today’s article main motivation comes from the following tutorial:
Step 1. – Create an option set with images
You need to store the options in an option set, so later you can edit the options more easily and don’t worry about where in the h… in bubble is hard-coded the different values.
Step 2 – Create a reusable component
This way you separate the ui and logic in one place and don’t become overwhelming in the editor on a page the components list. I usually give an RE – pretext to my components name, mean reusable element.
The text on the top just for demonstrating the list items, later will be removed.
First step creating a repeating group 4×4 grid layout view with the following visual elements:
- checkbox icon
- option set’s image
- option set’s display text
Step 3 – Create the logic/workflow
The goal to store the checkbox list and use later on a page. How to do that? Easy, just create a custom state for the reusable component.
The state name: Checkbox state
The state source of value is the option set we created.
The list is checked, so we know we store multiple values, not just one (store an array, I don’t like this term, but that’s the bubble term, list…)
The next to decide which action aka event will trigger the workflow. Since I grouped all my elements inside the repeating group, I will create a worfklow for this inner container.
Green box means someone click and activated the checkbox when the current cell’s value isn’t inside the array aka in the list.
The event is setting a state, that means we push a string into an array, translated to bubble term, push = :plus item, a string = an item = current cell. The current cell in the database the id of the set item, which we don’t see.
The red box is removing the item from the array, means remove the list item.
The red flow only happens when the current cell item isn’t contained in the state list.
In coding we say we remove a string from the array, in bubble we say :minus item.
Step 4 – Finishing by adding a checkbox icon to the UI
Click on the empty square icon, I use material icons, and go to the conditional. Here we check if the list contains the current cell aka parent’s groups options set. If yes we change the icon and the color.
And we are done, this is the final product:
Leave a Reply