How to use Custom States in Bubble including 2 examples

Introduction to Custom States in Bubble

I've noticed in the last week or two we've had a lot of searches through our website planetnocode.com on the topic of custom states so I thought I would take five ten minutes to record the video to demonstrate how and when to use custom states in Bubble and why they can be really helpful.

Using Custom States for Checkboxes

So the first use case is going to be a checkbox. 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 Bubble provides because it's tricky to style I'm going to use an icon instead. I'm going to make this quite big and well 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 and sorry a sign in form you could have like remember me. Let's just change this to a row and center that and not the content the and that's pretty good.

Benefits of Custom States

Okay so the custom states are really good at a really good way of storing data that isn't needed in your database so you can use a custom state 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 state loses its data if the page is refreshed or the user visits another page and then comes back.

Creating Custom States

So custom states are created like this they can be created on any elements including the page itself but for simplicity's sake I'm going to label this form field and we click on the eye 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.

Setting Up Workflows for Custom States

Okay I also need to sort out the reverse this now I like to use color coding here so that if I'm doing something positive I 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 in order to 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 take it to no and I can copy and paste this expression then invert it is no take it to yes okay that's the 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 I think font awesome call it check okay and I can preview it there makes it checked and 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.

Using Custom States for Temporary Lists

Another use is if the if you want to create a temporary list for like 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 option set and I wanted to show all of them there's just three of them let's place a label in there so count cells availability display so that will allow me to list my mornings afternoons and evenings and in fact I'm going to copy and paste the checkbox so I also want to use that change the cell to a row I'm going to group these because I same as here I need to have a group in order to create a on click workflow so group those into a row okay let's preview that let me put it in the middle and let's preview it.

Implementing Custom States for User Selection

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 has taken as a custom state rather than saving it right to the database so I now need to create a new place to store the custom state now I can store on repeating on the repeating group just like any element on the page but they can get a little bit confusing so 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 of 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.

Setting Up Workflows for List Custom States

So when this is clicked set state of now my custom state stored in my repeating group selected availability and one of the differences when working with custom states compared to working with when working with custom state lists compared to working with database lists is there is no set list add 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 state and then I can go plus item current cell's availability let's work the work out the only when statement here so that would be only when can't be spare that you remember select the custom state doesn't contain current cell's availability so this is my adding something in action so I'll make it green and then I can just copy and paste it and thought with that so that I this is 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 that's clear that and then so there's no confusion I'll just delete that right so we have my only when statement there runs this let's duplicate this workflow and so this is what does contain right and then invert this as well minus okay.

Connecting Custom States to User Interface

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 state not my full list from the repeating group contains count groups availability change it to a plus so now I click it updates the custom state how do I save that to the user let's make changes to current user let's see if I've already got an 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 and then repeating group availability remember if I choose this one it's going to add all three regardless of the check boxes the user has checked so I go selected availability so there we have it in slightly more than 10 minutes but still a brief video two really helpful use cases for custom states demonstrating how to use custom states in Bubble and yeah two really useful cases of using custom states in Bubble.