How to show & hide visual elements with Custom States

Simplifying Your App with Custom States

Here's a quick demo of how Custom States can save you time and help simplify your app when it comes to showing and hiding elements. So I have a rough dashboard created here and I've got a sub-menu with a dashboard, contacts and messages. I would like it so that when I click on one of my menu items I only see the group that corresponds to the menu item.

The Traditional Approach

One way you could go about this is to hide each of these on page load and then create a workflow. In fact, if you don't label your items it's a good tip to do so, otherwise this is going to get quite confusing. And last one. Okay, so what I was going to show is one way of doing it that I've seen people do and I think has too many unnecessary steps, which is you can go show dashboard and then you'd have to add in hide for contacts and messages. So you're ending up with a workflow which has got three steps in it.

Simplifying with Custom States

I would say, as your app gets more complicated you're going to want to simplify things where you can simplify them and this is a great example of where you can simplify the process because we're going to use Custom States instead of show and hide. So there's one thing I've got on here, we need to say collapse when hidden in order for them not to take up space when they're hidden. And then Custom States can be stored on any element. I tend to think of where makes the most sense and because this applies to my page I'm just going to set a Custom State at the top of the page.

Setting Up Custom States

This is unrelated, this is from a previous tutorial, I'll get rid of that. So I'm going to call this sub menu and then text. So let's go in here and so this is now going to be element action set state of the page sub menu and if I right click, click on it and click clear or just click on it and type in dashboard, brilliant and then same here for contacts and then for messages. Now I am going to show before the end of this video an even more lean approach to this. So if you're following along I wouldn't necessarily copy at this stage, I'm just demonstrating messages, demonstrating one way, brilliant.

Using Conditional Statements

And then I'm going to add in a conditional statement here when and then we find the page, the custom state is dashboard. Ah right, I want it as a text input but it's auto correcting it to the element here. Put a little space in, there we go. And then if I delete the space. This highlight is one of the issues. If you're going to do is and then enter as a piece of text, that's fine. To save me I'm just going to copy and paste the condition onto here because then I can type in contacts, I have to put the space in otherwise it's not going to take it. It wants to also correct it to my element not as just a string of text. And then messages. Brilliant.

Testing and Fixing

Ok, let's test that out. Nothing's visible. Dashboard, contacts, messages. Ok, let's fix the nothing's visible. So we can easily do that. A cumbersome way to do this would be an on page load set state but recently Bubble added in the ability to add a default value so we can just say dashboard. Then we save ourselves yet another workflow. Let's test that. Ok, so you see dashboard loads in and yet it still toggles between the other options.

Using Option Sets for Improved Accuracy

So there's a disadvantage here which is that your text has to be spot on accurate. For example if in here I have written message it's not going to work because the custom state passes in the value of messages. So here's how to make it evenly as I promised a few minutes ago. I would use option sets because you're using a fixed set of terms that are unlikely to change and I'll demonstrate why option sets are superior to using text and messages. One of the reasons is once you set an option set in your data tab you can't mistype it.

Implementing Option Sets

So let's set this up for option sets instead. So if we go back to here, this is of type text and so I'm going to change it to my sub menu option set and default again dashboard. So in here I can say is dashboard. Bubble might have been quite clever here. It has updated it even though I've changed the field type from text to an option set. And then here, I think Bubble has been really clever though. Because I've used exactly the same terms it's made an educated and 100% correct guess of changing it. So you can see here that this won't take a text value now because this option set here within the page, these are an option set and these are the only values I can enter as defined within my option set.

Using Repeating Groups for Efficiency

Okay, there we go. Now one final trick with showing and hiding elements is you've got three workflows here. If you want to add more items you don't have even more workflows. We can make this even leaner. We're going to use a repeating group and the repeating group is going to be of type sub menu and it's going to show all sub menu items. Just make it a little bit bigger and then I'm going to paste my text into there. Change this to dynamic and it's the sub menu's display which the first will be dashboard and then second, context messages, so on.

Streamlining Workflows

And then if we go back into workflows I'm only going to need to create one workflow which is set state. And then rather than picking one, it's dynamic, it's the current cells. The lines just come in because that's the default styling for the repeating group. But there we go. And so now what this allows me to do without having to think about why does it not work, have I put a typo in there, I can just add a menu item here into the option set.

Adding New Menu Items

So we could have, let's have social media and if I refresh the page, I now get social media. Clicking on it shows nothing because I don't have a social media group. What happened there? I tried to duplicate messages and I think it worked. Oh, it's hidden. There we go. I did duplicate messages but it's hidden by default. So this is social media. And let's select the group. And again, I can't make a typo, it's an option set. There we go.

Conclusion

So that's how to use custom states to show and hide elements. And potentially save yourself lots and lots of workflows. By building an app in a much leaner way, we've incorporated option sets in there. Again, we've stripped back our workflows for this sub menu to how many? To one. Okay? We could have ended up with at least three, four, one for each item. And each of those requiring four steps for the show and hide of each element. But we've replaced all of that with one workflow and one action.