Creating custom toggles using custom states in Bubble.io

Creating Custom Toggles in Bubble.io

Here's a quick Bubble tutorial video demonstrating how to create your own toggles using custom states. 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 sources or 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.

Using Custom States for Temporary Data Storage

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.

Creating Custom States on Page Elements

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. 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.

Setting Up Workflows for Custom Toggles

That then means 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 the this one is the selected one the chosen platform 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 for the sake of this let's make it red.

Testing the Custom Toggle Functionality

So then if I click on it it becomes red and I click on it 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 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 and 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 have 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 so this is if you're clicking on it and it 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.

Conclusion

There you have it a really quick overview of how to make your own custom toggles in Bubble using custom states.