Creating a Temporary List Using Custom States in Bubble.io

Creating Custom States for Temporary Lists

There can be any number of reasons why you will want to present your user with a list of items that they can toggle on or off without committing that list to your database so that when the user clicks a button, in this case next, that is when you save the final list of just the checked items that the user has checked. To illustrate this, here's my sign-up form and I'm going to use availability. We're going to approach this using custom states so nothing is saved to the database and option sets because I'm going to be using a fixed collection of options.

Setting Up Option Sets and Database Structure

Let's create an option set for availability. This is just going to be three items, mornings, afternoons and evenings. Then I'm going to store this in my user. In order to keep the power of option sets throughout my application, I'm not going to choose text because then I lose the power of an option set really. I'm going to choose availability instead because that way the database is storing an option set value. It's going to be more than one because they might choose mornings and evenings or mornings and afternoons or they might just choose mornings, but I'm wanting to prepare a place for a list.

Creating a Repeating Group for Availability Options

Then I'm going to need a repeating group in order to show my list. This is my availabilities and I want to show all availability and a fixed number of sales because I know that it's just down to three. Let's give the sales a label. I'm going to use icons to create a checkbox. This is preferable in most instances to using the default checkbox that Bubble provides because this one, you could style it with CSS, but it's not stylable in the Bubble editor itself and it also has a text label attached to it. It doesn't offer a huge amount of flexibility.

Styling Checkboxes with Icons

I can use an icon to basically get the same effect, but choose lockbox square. Here we go. I can have much more flexibility with an icon. Let's make this a gray and then hit preview. You can see the repeating group lists my option set. Now, let's work out the workflows for when I click on either the box or the text, the box becomes checked instead.

Creating Custom States for Availability

In order to only create one workflow, I'm going to put both of these in a group, make the group fill up the whole of the space, and then let's start creating a workflow. Ah, but before then, we have to create a custom state. You can create a custom state anywhere on your page. The practice that I take is to create a custom state somewhere that makes sense to me. I have this container called group C and I'm going to just label it group availability. I'm going to create the custom state here. This is to allow me to store the items that are checked without having to commit that to the database. This is going to be called checked availability and it's going to store availability. Again, they could choose more than one, so it's going to be a list.

Building Workflows for Toggling Availability

Let's build a workflow. When the cell is clicked, I'm going to need to set a custom state. The custom state is a little bit confusing because it's automatically named the cell as a group availability, but I know that it's this one, is where I've stored my custom state. When working with custom states, you don't have as many list options as you do when working with lists in the database. You have to use it as a workaround, which is to say when I'm adding an item, I have to refer to where I'm storing it to begin with, which is this one here. Then say I want to add an item to it.

Adding and Removing Items from Custom States

If I was to just put in this custom state, the cell's availability value, first of all, it wouldn't accept it because it's expecting a list. But if it wasn't for that, it would also overwrite what was in this custom state to begin with. I need to refer to the custom state and then plus item, and now I can refer to the current cell as availability. I like to use colors in order to distinguish if I'm adding something, which is green, or if I'm removing something, which is red.

Implementing Conditional Workflows

I now need to do the opposite because I have a workflow. If someone clicks it, it's going to save this cell's availability. But what if a user for some reason clicks it and then clicks it again expecting to remove the availability? I can do that just by copying and pasting, and then this one is going to become red. Instead of plus, it's going to become minus item. This won't work because both of these workflows will fire when the cell is clicked, so I need to add an only when statement.

Finalizing the Toggle Functionality

Going to the custom state that is holding everything, so not that one, this one. Only when this doesn't contain the current ... No, this is my undo, so this is only when it contains. When the custom state contains my availability value and the cell, that bit there, that is clicked. I want it to remove it. I can then copy this, save myself some time, and paste it into here and swap it for it doesn't contain. Because I only want my custom state list to be updated if it doesn't already contain this availability.

Updating the UI Based on Custom States

We're almost there. There's one thing missing, which is I need to tell the icon to change if the availability is indeed in the custom state list. I go to the custom state, which is that one. Checked availability contains this group's availability because that's the row, that's the cell. Then I can go icon and change this to ... I believe Font Awesome call it check. Let's change the color also to green so it really stands out.

Testing the Functionality

Let's test that. Now I'm expecting if I click on this, it's going green. If I click off it, click on it again rather, it unchecks it. Nothing is being written to my database. I don't even need to have created this user at this point in order to make it work.

Saving Data to the Database

How do I save it to the database? I go onto my next button, sign up user. That's from another demonstration. Let's remove those two. I've got my email value and my password value and my name value. Now I need to add my availability value. This is where I add a list. I'm not adding an individual item. I'm adding a list. Set list will overwrite anything that's already stored in there. As I'm signing up a user, nothing is stored in there. Add list will take what is already in that field and add this incoming list into it. It doesn't matter which one of these I choose right now. I just need to remember where I have stored my custom state. That is here.

Final Testing and Conclusion

There we go. Give it a final refresh. Using custom states and using an option set, I've been able to allow my user to toggle on and off a list of options without saving it to the database. Then meaning that my next button is where the data gets saved and indeed where this user is created.