There can be any number of reasons why you'll 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 options sets because I'm going to be using a fixed collection of options.
Create an Option Set
So let's create an Option Set for availability and this is just going to be three items mornings, afternoons and evenings. I'm going to store this in my user and in order to keep the power of options sets throughout my application, I'm not going to choose text because then I lose the options sets - the power of an Option Set really.
So I'm going to choose availability instead because that way the database is storing an Option Set value and 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.
Displaying an Option Set in a Repeating Group
Then I'm going to need a repeating group in order to show my list. This is my availability and I want to show all availability and fixed number of sales cause I know that it's just out of three. Let's give the sales a label.
Icons vs Checkboxes
I'm going to use icons to create a checkbox. This is preferable in most instances 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 so it doesn't offer huge amount of flexibility. But I can use an icon to basically get the same effect. But choose not 'box' 'square'. Here we go. I can have much more flexibility with an icon. So let's make this a grey and then hit preview.
You can see the Repeating Group lists, my Option Set. So now let's work out the workflows for when I click on either the box or the text, the box becomes checked instead.
So 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.
Creating a Custom State
But before then we have to create a Custom States and you can create a Custom State anywhere on your page. The practise that I take is to create a custom stay somewhere that makes sense to me. So I have this container called group C and I'm going to just label it Group Availability and 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 (save) that to the database.
This is going to be called checked availability and it's going to store availability and again they could choose more than one.So it's going to be a list.
Workflows
So let's build a workflow. So when the cell is clicked, I'm going to need to set a Custom State and the Custom State is in it gets 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.
Working with Custom State lists
When working with Custom States you don't have as many list options as you do when working with lists in the database. So you have to use a little 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, and then say I want to add an item to it. If I was to just put in this Custom State the cell's availability value first it won'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 States to begin with.
So I need to refer to the Custom States and then 'Plus item' and now I can refer to the current cell's availability.
I like to use colours in order to distinguish if I'm adding something which is green or if I'm removing something which is red.
So 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 again expecting to remove the availability? So I can do that just by copying and pasting and then this one is going to become red and instead of plus, it's going to become 'Minus item''.
Now 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. So referring to the Custom State that is holding everything. So not that one, this one. So only when this doesn't contain the current no, this is my undo. So this is only when it contains so when the Custom State contains my availability value and the cell that bit there that is clicked I want it to remove it and so I can then copy this.
Save myself some time and paste it into here and swap it for doesn't contain because I only want my Custom State list to be updated if it doesn't already contain this availability. We're almost there.
Change icon based on Custom State value
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. So 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 and then I can go icon and change this to the FontAwesome call it Check yup. And let's change the colour also to a green. So it really stands out and let's test that.
So now I'm expecting if I click on this, it's go green, if I click off it click on it again. Rather it unchecks it. So 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 Custom State list to database
How do I save it to the database?
So I've gone to my next button sign up user. That's from another demonstration. So I've got my email value and my password value and my name value. So now I need to add my availability value. And this is where I add a list.
I'm not adding an individual item, I'm adding a list. So 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. So it doesn't matter which one of these I choose.
Right now I just need to remember where I have stored my Custom States and that is here. And there we go. Give it a final refresh.
So 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. And then meaning that my next button is where the data gets saved and indeed where this user is created.