Custom States are temporary variables that allow us to create visual elements in our applications without having to do database changes.
In this second episode of Tips & Tutorials, we will see another use of Custom State: How to change the visual interface. For the demo, we will have 3 different interfaces: Documents, Products and Tasks.
→ Watch the first episode: How to animate a button with a custom state
1️⃣ Step 1: Building the Interfaces & General Design
→ Create a General group (as a Row) that will contain 2 other groups:
2️⃣ Step 2: Create an Option Set
→ Create an Option Set, rename it as ”Interface type“. Give it 3 options:
3️⃣ Step 3: The Repeating Group (RG)
→ Type of content :”Interface type“(the Option Set)
→ Data source : All Interface Type
→ Text inside the RG : Current Cell's Interface Type's Display
4️⃣ Step 4: The Custom State (CS)
→ Create a Custom State at the level of the Right Group. Rename it”Interface“, Type:”Interface type“ (the Option Set).
→ Default value : ”Documents“
5️⃣ Step 5: Give a conditional value to your interface groups
For the example, we are simply going to explain the values to be entered for the interface “Documents”. If you have any doubts, refer to the video (2:51 min).
→ Layouts : Check Visible on page load + Collapse when Hidden
→ Conditional : When Group Right_CS's Interface is not Documents > This element is visible (TO UNCHECK)
In non-technical terms, Bubble is simply asked that when the Custom State of the Right Group is not set to”Documents“, we don't want the Documents interface to be visible.
We could also do it the other way around, but then we would have to uncheck “Visible on page load“in the layouts.
6️⃣ Step 6: Create the Workflow
Last step to make everything work, we now have to create our workflow to give the value we want to our Custom State and thus be able to navigate between our interfaces.
→ Add a Workflow on the text of the RG
→ Set State of an Element : Choose the group on the right (CS)
→ Custom State :”Interface“
→ Value : Current cell's Interface Type
