Hi, I’m building a mobile app and as such i’m required to only use a single page and show and hide groups instead of different pages. I’ve heard that custom states can be used to show the group I want and hide all the rest without having to do the whole show/hide thing for every single action. Would anyone be able to teach me how to use custom states effectively ? (I’ve tried youtube videos but i’m still not getting it)
Sure thing! As long as you have a bit of knowledge as to how Bubble works, it’s fairly simple.
For this example, let’s say you have three groups inside of a popup. Let the popup be ‘Popup 1’, and each group be ‘Group 1’, ‘Group 2’, and ‘Group 3’. Your goal is to have three buttons (‘Button 1’, ‘Button 2’, and ‘Button 3’) each show a different group and hide whatever other group is showing. Let’s begin.
To start, go into all three groups and disable the “Element is visible on page load” option. Once you’ve done this, the groups won’t be visible after you click off of them. To find them again, go into the element finder on the left hand side of your screen and click the small eye symbol next to the group you want to see. The group will then show in the UI builder.
Once you’ve done that, select Button 1 and create a workflow for it. In the workflow, create a new step and set that step to “Set state of element”. Once you’ve done this, it will ask you what element you’d like to set a state for. In this case, you want to choose an element that is most relevant to all elements/groups that will be affected by the state. Since all three groups in our example are inside of Popup 1, you’ll select Popup 1 for this. Next, when you click on the dropdown that appears, it will ask you to choose an existing state or to create a new one. Since Popup 1 doesn’t have a state yet, you’ll need toperimeters create a new one. You want to name it something simple but intuitive enough so you know what function it serves. For this example, let’s call it “Show Group”. Next, it will ask you to set the type of the state. For ease of use, let’s set this as text. Finally, it will ask you what value you want the state to be once you hit Button 1. Set the value to “Group 1”.
Now, you have to do something similar for the two other buttons. Select Button 2 and create a workflow for it. Create a step in the workflow and change it to “Set state of Element”. Then, set the element as Popup 1. Now, when you select the dropdown, the state which you made will be listed. When the goal is to only have one of the three groups showing at once, you want to use the same state for all of them, so select the “Show Group” state that you already made. This time, since you’re on the workflow for Button 2, you’ll want to set the value to something unique to it, so it’s best to use something like “Group 2”. Repeat this paragraph for Group 3, changing the value to “Group 3”.
Next, open the conditions for Group 1. Create a new condition. Set the condition as “When | Popup 1 |'s Show Group | is | Group 1” The breaks are where there are breaks in the expression. When this condition is true, you’ll want the element to be visible. Make sure to check the box next to “This element is visible”, or else it will hide when the condition is true. Repeat this for Groups 2 and 3, changing the value each time to correspond to each group.
And, just like that, it should be working. When you’ve configured the state in this way, it only holds one string of text, and that text changes each time you click one of the buttons in Popup 1. Each group is only visible when the text is a certain value, and as such, only one group will be showing at a time.
Hopefully this makes sense. I know I didn’t explain this too dynamically, but sometimes fiddling with an example is the easiest way to figure out how something works. Let me know if you need any more assistance!
10 Likes
Thank you so much for taking the time to write such a comprehensive reply. That makes so much more sense now ! Thanks you 
Here’s a brief description with an example. There’s a custom state called “mode” on the page element.