Section 6 (Lesson 3/9): In this lesson, you’ll learn about state lists. We’ll create functionality that allows a candidate to check or uncheck a selection for work preferences and then save the final selection to a database field.

Key aspects include:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Okay, so this is a really cool lesson because we've learned about states, now we're learning about state list functionality. So, the ability to create state lists so that could support the functionality we need around checkmark functionality, giving the user the ability to check and uncheck a list of things to then save to the database. So we'll be doing that for the work preferences. Let's dive in!

So here it is here. Peter is logged in and he can check and uncheck the various work preferences that he is interested in. So for instance, if you're doing job matching, which we won't have time for on this course, but you would probably need to do it in a jobs board at some stage, we could match a person's preferences, such as they are interested in developer roles, with the view on the search page, so that when they are logged in, then we would prioritize developer roles within a certain mile radius or a city or a certain pay, and we'd start talking about job matching at that stage. But that is higher intermediate to fairly advanced, but I have no doubt that in a couple of months that's something you would be able to create.

So back on our candidate dashboard, let's open the Group Container on the Elements Tree, open Group Account, and we've got our personal details. So this says, "Complete these questions to start posting jobs to our pool of talent." Why don't we change this to,
"Complete these questions to start applying to the latest tech jobs." Why not? Having fun with this.

Over on the right-hand side, we can actually go ahead and delete Group Column. I pressed backspace on my Mac. Now I'm going to change "Company details" to "Work preferences." And then in the subtitle, I'm going to write, "Select the types of jobs that you're interested in applying to at Workplace." Just trying to make it a similar length to the personal details. Okay, two lines. That's what I was after. Great.

So we don't need "Location" or "Description" or "Company name." I'm just holding down shift to grab all three and then I'm going to delete. What I'd like you to do next is head over to the demo app. (The link is above.) I want you to go copy the Option Set called Work Preferences. You need to do this in the same browser. Here I am in the Option Sets. I'm going to right-click on Work Preferences, copy. If this doesn't work for you, you can always just do these individually or type them out individually. So again, right-click, copy, head back to your own app, head to the Data tab, Option sets, and then anywhere in here, paste. So we have Work Preferences. Lovely stuff!

Now, let's grab a Repeating Group, please. A Repeating Group. Click once, and I'm just going to draw it inside here. So this is going to be our Work Preferences for type of content and the data source is basically "All Work Preferences". I'm going to see how many rows of data we need here. This is a fixed list: 1, 2, 3, 4, 5, 6, 7, 8. So I'm going to choose 8 rows, 1 column. I'm going to choose a solid separator that's going to be 14 pixels in white, the space between our options. Over on the Layout tab, I don't know the height at the moment. Let's bump this min height up to about 320 px, it's probably more than we need. And remove the min width.

Now I'd like you to grab a Text element. There it is there and make sure you draw it into the cell. If you can't get into the cell, you can always expand your Elements Tree and let's actually try this method. I'm going to delete this Text element and why don't you do the same and just follow along what I'm about to do? I'm going to take this Text element, click once, click and drag into the Repeating Group in the Elements Tree. How cool is that? So in the Appearance tab let's say "Current cell's Work Preference's Display," and let's just add a canvas placeholder, so it helps us design. We can say "No-code developer." Love it!

On the Layout tab, I'm going to remove the min width and the min height. So now that we have some text inside the cell, we can click on RepeatingGroup Work Preferences and actually just delete them min height. Just delete it. And what I actually did here was, our separator of 14 pixels in width, which separates out each cell, I was messing around in my break and trying to get the height of both of these Group forms to be the same. So I was just incrementing that number, which is the separator between these text until the whole cell... sorry, until the whole Group Form was a similar height. Well, the same height, really. So that's how we got to that stage in case you're wondering.

Now, on the RepeatingGroup Work Preferences, please remove the border. I don't want a border. And on the right-hand side, what we need to do is we have to add in an icon. So I'm going to find my Material Icon, and I'm going to actually drag it into the Repeating Group cell. But actually, let's make sure that we have a row layout here in RepeatingGroup Work Preferences. So on the Layout out, it's currently set to column. Let's change it to a row and then let's grab a Material Icon and drag it just beneath the text.

Let's look for a checkbox icon. If I type in "check," third one along is the "uncheck". That's what I'm after, the checkbox. We can change this to our charcoal color. If we choose default, that just removes the roundness. And then on the Layout tab, I'm after 24 px by 24 px. Very nice!

Okay, and if we wanted to add gap spacing, spacing between, we would have to actually group these two elements together. But another way to to achieve this, which I don't use very often, but just so you know, another way to achieve this is on this Text element itself, we can actually add some right margin here. We can just say 12 px on the margin, and that just stops the issue of if it was a really long piece of text, actually touching that icon. We usually would use gap spacing, but that means we have to then group it in a Group, which is fine, but I just wanted to show you another option because every now and again, I'll use margin for a particular purpose. This is a good use case.

Okay, so that's the design work done. Now, what about this checkbox functionality? So what we'll do is this. Click on the Material Icon and "Start/edit workflow". Let's click here to add an action, head down to "Element Actions" and choose "Set state." Where are we going to set the state? Page level. So let's choose "candidate" as the Element. And we can see that we have our Avatar and Logo already set up from when we cloned the page. Let's delete Logo, we don't want that. Let's go ahead and delete that and choose "Create a new custom state..." We're going to call this "Preferences." And what this is going to be is in fact a list of Work Preferences. To make it a list, we need to check the box that says "This state is a list (multiple entries)". Awesome.

So stick with me through this next part because there's a particular expression or a particular method when working with state lists. So the first thing we need to do is actually attach this list, or point to the list, I should say. The list hasn't been created, but the state hasn't been populated, but the state does exist. So we have to go find the state first and we know it's at page level. The page is now called "candidate." I'm typing "candidate", and here is the state preferences that we've just created. Okay, that's step 1.

So the next thing I'm going to do is I'm going to click on the "more" icon. It brings up all of these great operators that I'm using every day of the week, and I'm going to type the word "plus." This brings up or filters a ":plus item". And after that, I'm going to say "Current cell's Work Preferences." We could be clicking anywhere in that list. We could be clicking the fourth item first.

So we first reference the state (that's the candidate's preferences that we created, that's a state list), and then to add something to the list, we use the operator ":plus item." And then after that, we have to select which item do we want to add to the state list, and that would be the "Current cell's Work Preferences" because that is in relation to where we are clicking in this Repeating Group, which could be anywhere. Good stuff.

So now when we go back to this icon, let's click on the Conditional tab, please. Define another condition. And what we're basically saying here is if the state list contains one of these rows in the Repeating Group, then change it to a check icon so we know that we have checked it. To do that, we first point to the state. It's at page level. When "candidate's Preferences," and now we're going to choose "contains" and then we're going to choose "Current cell's Work Preferences." So when the state preferences contains the Repeating Group preferences, or one of them, then have a green checkmark. So we're going to change the icon. We're going to change it to a check icon, here it is here. And the color, icon color, let's use green. Success.

Okay, we can't test this yet because we have to first work on the sign up flow in the next lesson, but let's carry on with this functionality, because let's say that Peter has now checked "No-code developer", but then what about enabling him to change his mind? What about unchecking? So that's something we also need to do.

I'm going to go back to the Workflow tab, and I'm going to change the color of this MaterialIcon is clicked workflow to green. Green for go. All right. And let's have a look at this again. When it is clicked, in step 1, we set states to "candidate's Preferences: plus item Current cell's Work Preferences." So what we need to do now is, the user is clicking on the same icon, so click on an icon that is unchecked to check it, and then click on the check to uncheck it. So what we have to do is right-click, copy the workflow, and then right-click, paste.

And then the first thing we're going to do is change the workflow card color from green to orange, because this is the uncheck part of this workflow. And all we're going to do is change the ":plus item" to ":minus item." Look at this, ":minus list" is an option, we can select whole lists and subtract them! But this is a one click, so we're unchecking one Work Preferences here.

Okay, so we have a plus item and then we have a minus item. Now, if we now had to try this, what would happen is both of them would run together in tandem. That's not going to work. So we need a way to distinguish which events to run, the green one or the orange one. And for that, we're going to use conditional statements on each of these events.

Okay, so what we need to say is that we want to check this Work Preferences only if it is currently unchecked. And for that, I'm going to take you back to the green block. In the "Only when," we're going to find "candidate's Preferences," and then choose, "doesn't contain Current cell's Work Preferences." So if the state list does not contain the current Work Preferences - the item in this Repeating Group - if it's empty, then allow that part of the workflow to run.

And now we're going to do the opposite to say that if it is checked, then allow it to run the uncheck part of this workflow. So on the orange block, actually, what we can just do is go back to the green block and click on the green block here and then right-click and say "Copy expression" in the Only when condition because we're only changing one small part here. Now we're going to click on the orange event, right-click "Paste expression." Sorry, jumping around here a little bit. And then instead of "doesn't contain," now we choose "contain", the exact opposite. So if there is a checkmark in there, if it's in that state list, then run this step here which means we're going to minus item from candidate preferences.

Okay, so that is state lists. That's how it works. You'll get used to it, you'll get comfortable with it through your developer journey in the early days.

All right, so it is unchecked by default and it will only be checked if this particular row or this particular cell is contained within the candidate's Preferences state list.

Okay, what about saving now? So let's click on the Save button. Let's edit the workflow and I can see that we need to rename this element first. So this is currently called "Button Save (Company)," We're going to say "Button Save (Work preferences)". Now we're going to edit the workflow and we are going to make changes to a thing, so we'll keep that in there. And it's the Current User that we're making the change to. Just delete all of these fields out, and let's add another field. Okay, now we're going to create a new field. This one will be called "Work preferences", and the field type is going to be the option set Work Preferences, and check the box because it's a list. So we're matching what we're doing with the state so that we can pull the data into the database.

Okay, so now we have these options in the Make changes to User step. So we have "Work preferences add" but it's not "add" because adding is for a single item. It's not remove because that would be removing a single item. The one in fact we're going to use is called "set list." And what "set list" does is it looks at an existing list in the database and it just replaces it with the new list altogether. That's what we want to do because a user will be out of sync when they start changing their mind with the checklist, if there is data in the database, that is. So we just want to clear out what's in the database and replace it with the current selection.

Where is that selection? Well, as the User, Peter, or the candidate, as he is checking, he is adding or removing items to the state list. We can find that at page level "candidate's Preferences." After that, we're going to show the message that it's been successful.

So definitely ramped it up a smidge. I hope that's okay. It's not going to get much more complicated than that. But you learned a major new piece of functionality that you'll be using throughout your app. So I hope you enjoyed it, and I'll see you in the next one.