Ask a question
I thought I would take 5-10 minutes to record the video to demonstrate how and when to use Custom States in Bubble and why they can be really helpful.
Custom checkbox design
So the first use case is going to be a checkbox. So imagine I've got here like a registration form and I'm going to put in another field and instead of using the default checkbox input here that bowl provides, because it's tricky to style, I'm going to use an icon instead. I'm going to make this quite big and ugly just so that it illustrates the point. So there I have a checkbox and let's give it a label like on a sign up form, sorry, a sign in form you could have like Remember me. Let's just change this to a row and centre. That not the contents. There we go. And let's preview that. Okay, so Custom States are really good way of storing data that isn't needed in your database. So you can use a Custom States to avoid having to create additional fields leaving your database much more lean and clean.
And also it's for data which it doesn't matter if the data is only stored whilst the user is on the current page because a Custom States loses its data if the page is refreshed or the user visitors another page and then comes back. So Custom States are created like this. They can be created on any elements including the page itself. But for simplicity sake, I'm going to label this form field and we click on the icon and then go add a new Custom State. And I will call this remember me? And Custom States can store any of the existing database types that you have in your Bubble app. But for this I just need it to be yes or no. And the default is going to be no. And so I want to set this up so that when the user clicks on this field, I am going to change the Custom State of form field. There it is. To. Yes. I also need to sort out the reverse of this. Now I like to use colour coding here so that if I'm doing something positive I'll make it green, copy and pasting it and if I'm doing something. Negative I make it red.
So this one is going to be change value to no. But at the moment both of these workflows will run at the same time. So I need to create an only when statement. So only when form field. So this is taking it from yes to no. So it's only when form field is yes. I can copy paste this expression then invert it is no. Take it to yes. Okay, those are the workflows required for a custom field. But nothing's going to show up on. The front end here.
So I need to add a conditional statement to my icon. So when form field remember me is yes, I want to change the icon and I think Font Awesome called it Check. Okay. And I can preview it there makes it checked. Let's refresh our preview so I can click anywhere in this group and you can now see my icon changes and I could do this with any other icon plugin that's available Bubble it just broadens what I can do with a checkbox and it also means that I can make other like clicking on any other group can do the same thing.
Because it's working on a Custom State rather than working on an actual like HTML checkbox element which this is. So that's one use.
Temporary list data
Another use is if you want to create a temporary list for a user to select different items. So let's have a look. I'm going to use an option set I've already created called Availability and I've got three options here mornings, Afternoons and evenings. So let's create a Repeating group that shows my availability options sets and I wanted to show all of them. There's just three of them. Let's place a label in there. So account Sales, Availability, Display so that will allow me to list my mornings, afternoons and evenings. And I'm going to copy and paste the checkbox because I also want to use that. Change the cell to a row. I'm going to group these because same as here, I need to have a group in order to create a on click Workflow to group those into a row. Let's just get rid of heights here. Okay, let's preview that. We've to it in the middle and let's preview it. Okay. So I want the user to be able to click on when they're available, but I only want that data saved to the user when they click Submit.
So this is a perfect use case for Custom States because I can save the selection that the user taken as a Custom State rather than saving it right to the database. I now need to create a new place to store the Custom States. Now I can store on Repeating on the repeating group just like any element on the page, but it can get a little bit confusing. Actually I will do that because it will demonstrate what I'm pointing out is quite confusing. So let's call this Selected Availability and then this is a type Availability and it's a list so that the user can choose more than one morning and afternoon for example. Then let's work out a workflow action. So when this is clicked set state of now my Custom State is stored in my repeating group selected Availability. And one of the differences when working with Custom States compared to when working with Custom State lists, compared to working with database lists is there is no set list ad list option available in this field here in the Bubble editor, but there is a workaround I simply recall.
And this is where it's a little bit confusing. If I choose this top option here this is everything that's in the repeating group, regardless of how the user interacts with it. I need to choose this one because this is my Custom States and then I can go plus item current sales availability. Let's work out the only when statements here. So that would be only when you remember select the Custom State doesn't contain current sales availability. So this is my adding something in action. So I'll make it green and then I can just copy and paste it so that it's just a tiny bit of optimization. I put my only if statement in the step here, but it's probably better to put it up here to stop the whole workflow from running instead. So let's clear that. And then so there's no confusion, I'll just delete that, right? So we have my own statement there, runs this, let's duplicate this. This is what does contain, right? And then invert this as well, minus.
Okay, the last thing I need to do is connect up the conditional statement for the appearance of my check box. So this will be when repeating group availability, select availability. Remember, Custom States, not my full list from the repeating group. Contains account groups, availability.
Change it to a plus. So now when I click, it updates the Custom States. How do I save that to the user? Let's make changes to current user. Let's see if I've already got availability. I do availability. So availability, I can use either set list or add list here, set list overwrites the existing list, whereas add list will add this new list to an existing list if it's present in this field availability. So set list will do.
Then repeating group availability. Remember, if I choose this one, it's going to add all three regardless of the cheque boxes the user has checked. So I go selected availability. So there we have it in slightly more than ten minutes, but still a brief video. Two really helpful use cases for Custom States demonstrating how to use Custom States in Bubble and two really useful cases of using Custom States in Bubble.