Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Creating custom toggles using custom states in Bubble.io

In this Bubble tutorial we demonstrates how to create your own custom toggles using Groups, Repeating Groups, Option Sets and Custom States.

A quick Bubble tutorial video demonstrating how to create your own toggles using custom states.

Option Sets

So I have an app set up here with a page. And if I go into data, you can see I have an Option Set called platforms, and then I've got two options, YouTube and Vimeo. Then on my page, I have a repeating group of type content platforms, my Option Set, and then the data source is all platforms. That's how I end up with a repeating group that shows you the two options I've created within my Option Set platforms.

What are Custom States

So what if I want to create these into buttons to allow a user to choose one or the other. So I can use a custom state for that. Now, custom states are a great way of temporarily storing data. Nothing is being written to your database. Nothing can be recalled if the page is refreshed. It's just a way of temporarily storing, whether it's text or any data type or Option Set in your app while the user is on the same page. So they can be created on any element, but it makes sense to just create them somewhere logical. So I'm going to create them on the page itself.

Staying lean with repeating groups

So I will just say chosen platform. And then I'm not going to use text because I want to really make use of the power of Option Sets. So I'm going to choose platforms, and then I want to only give the user the choice of picking one. So I'm not ticking this as a list. That then means that I can create a workflow. Remember, because this is a repeating group, I'm not creating a workflow manually on every button. I just need to do it on one. And so my workflow can be when this is clicked, I set state of my page, chosen platform is current cell's platform. I'm then going to add in a conditional statement for the design to show that this one is the selected one, the chosen platform.

Changing button border based on custom state

So I refer to my page custom state and say chosen platform is current cell's platform. And then the visual feedback I'm going to give is changing the border color. And for the sake of this, let's make it red. So then if I click on it, it becomes red. And I click on it, that one becomes red. Now, that works well for these two buttons here.

But what if I wanted to enable it so that if someone was to click on the chosen one, it unselects it, it deselects it. So I need to add another workflow for that. And I'm going to end up with two different workflows, each with an only when statement.

I like to color code these to make them clear. So if I am doing something positive, if I'm adding in data, I make it green. And so I had a conditional statement here of my pages custom state chosen platform is not current cell's platform. And then I'm going to copy and paste this and change this one to red and say when it is.

Clear a custom state value

So this is if you're clicking on it and that platform is in place, then my custom state, I want to remove the platform that's chosen. So with a custom state that isn't a list, I just leave it blank. Let's test that.

So I can still click YouTube. I can still click Vimeo. But then if I click Vimeo again, it deselects it because it's running my red workflow. So there you have it. A really quick overview of how to make your own custom towels in Bubble using custom states.

Latest videos

lockcrossmenu