How to show & hide visual elements with Custom States

In this Bubble.io tutorial video we demonstrate how using custom states to show and hide elements on your page can save your time and keep your app lean. In the second half of the video we take this app leanness a step further by explaining how Option Sets can save you time and from the pain of debugging typos.

Still stuck?

Join an expert Bubble coach on Zoom.
Learn more
Bubble coaching learn no-code

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 submenu with Dashboard, Contacts and Messages, and I would like it so that when click on one of my menu items, I only see the group that corresponds to the menu item.

Do you need a workflow?

So one way you could go about this is to hide each of these on page load and then create a workflow. 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 it 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. And 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 forgotten here.

Collapse when hidden

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. This is unrelated, this is my previous tutorial, I'll get rid of that.

So I'm going to call this submenu and then Text.

Custom states

Let's go in here. And so this is now going to be Element action set state of the page submenu. And if I right 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, even, 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 one way. Brilliant. Okay. 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.

There we go. And then if I delete the space, this highlights 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 auto correct it to my element, not as just a string of text and then messages.

Let's test that out, nothing's visible. Dashboard, contacts, messages. Okay, let's fix the nothing's visible so we can easily do that again. 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. Okay, yeah. So you see dashboard loads in and yet, it still toggles between the other options.

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 a message, it's not going to work because the custom state passes in the value of messages. So here's how to make it even leaner 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. 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 submenu option set and default again, dashboard. Okay.

And so in here I can say is dashboard seems to have had a okay, 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 there, it's 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 needs an option set and these are the only values I can enter as defined within my option set.

Repeating groups

There we go. Now, one final trick with showing and hiding elements is you have got three workflows here. If you want to add more items, you end up with 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 submenu, and it's going to show all submenu 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 submenus display, which the first cell will be dashboard, then second contacts, messages, so on.

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.

So we could have let's have social media. And if I refresh the page, I'll now get social media. Clicking on it shows nothing because I don't have a social media group.

What happened there? Tried to duplicate messages. I don't 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. 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 submenu to how many to one. Okay.

We could have ended up with at least three. Four. One for each item and each of those having requiring four steps for the show and height of each element. But we've replaced all of that with one workflow and one action.

 

camera-videouserscodelinkmenu