Yesterday I built a custom checkbox component, so today I am going to build on the same principle. Check first the earlier post, before continue here, so you can see the small details.
Step 1. – Create an option set with images
In the data tab of bubble, create a new option set with two attributes: Display and Image.
Step 2 – Create a reusable component
Bubble says reusable elements, but since I am react developer as well, I prefer using the component word, since we built a separate component with its own logic.
The below picture you can see, the reusable component consists of:
- radio button icon
- option set’s image
- option set’s display text
Step 3 – Create the logic/workflow
Create a state for the top, aka parent element which is the reusable element itself. The state name: Radiobutton state – option set: Property Hot Water (this is my option set name). Important to know this is not a list, it is just a value.
I want the radiobutton to be triggered when somebody click either on the image/text/icon so I defined the workflow on the inner group inside the repeating group cell.
The green workflow is about to add an active state to the radio button of the current cell, means the radiobutton will be selected to the current cell. We only run this workflow when current cell IS NOT equal the custom state of the component.
The action is a set state, when we add the current cell to the state. Means the state is equal the current cell’s value.
The red workflow means we remove the current cell value from the state. (yes this is not really a radio button, since the radio button only loose its focus when another is selected)
The final step of the workflow is to remove the state, means delete the states, means give a state a null value, means give nothing to the state.
Step 4 – Finishing by adding a checkbox icon to the UI
Since only the state contains the current cell’s value, but on the frontend the icon is still an empty circle, so we are gonna change that to a filled radio button circle with a conditional statement. The statement says if the component state display is equal the parent group’s (aka cell) option set value’s display, which evaluates to true, in bubble term means evaluates to yes, then we change the icon.
Leave a Reply