Section 7 (Lesson 5/8): We’re going to be building a toggle component in this lesson by using groups, custom states, and conditional statements. This component will be used to filter our shortlisted candidates in the job application table.

You learn how to:

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

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

Let's have some fun with this lesson. Let's spend a bit of time creating a little toggle switch using just states, workflows, and conditionals in Bubble. And of course, you could use a plugin for this. There are free plugins and paid plugins for toggles, similar little UI pieces. But why not learn how to do it yourself, for something as simple as a little toggle?

Let's take a look. So here in the demo app, I have two shortlisted users, and I can use this toggle here to basically toggle to see the shortlisted users or toggle off to see all users.

Back to our app. All right, so let's build this. So I'm just going to have a look at the style for the Text element currently displaying "12 results", I think this is Body Medium. Yes, it is. Let's grab some text, please. Just drop it beneath the "12 Results" text. Let's type the word "Shortlist". On the Layout tab, remove the min width, I want you to fit width to content, and remove the min height.

Now I'd like you to hold down shift and let's select both text elements, right-click, "Group elements in" --> a "Row container". We're going to call this "Group Text". I'm going to remove the min height.

Okay, now for our Toggle element. For this, we're going to use a bunch of groups, so try to get a new Group get it inside this new Group Text you've just created. I'm going to call this "Group Toggle" and on the Layout tab, I'm going to change the height to 24 px. That is fixed height, 24 px. I'm going to fix the width to 50 px. Now, I've built this before. I don't just know these numbers off the top of my head, I've had a play and I've worked it out.

On the Appearance tab, let's add a Background style of flat color. Let's change this color to our surface so we can see something to begin with. Roundness needs to be at least 12 px, which is half the height, which is 24 px. Then we're going to go back to the Layout tab and just "Make last" so it's next to the shortlist.

Let's now group the toggle switch and the word "Shortlist" in a row container. We can name this "Group Toggle Switch". I just want to add a bit of gap spacing on the column of 8 px. Let's remove the min height and fit width to content. I can see Shortlist is not vertically centered, so in the Layout tab of Text Shortlist, I'm going to do that now.

So we need states to achieve this, so we're going to add a workflow on Group Toggle, and for this workflow, we're going to choose Element Actions and Set state. Now, we just need to create a boolean functionality. Either the state is on or the state is off, just like a light switch.

I'm going to attach the state to the company page element, and I'm going to create a new one. I'm going to call this "Toggle". This is a yes/no state type. Go ahead and create. So when the entire Toggle element is clicked, I'm going to change it to "yes" and then when it is "yes", if it's clicked again, and we're going to change to "no". We've just done something similar. So change the value to "yes".

Now we know what to do here. Click back on this event, change it to green, and say Only when "company's Toggle is no". Then we can right-click on this event, copy, paste. Let's do the orange one now. Let's change the conditional to "is yes". And then we do the opposite on step 1 of the orange event, don't now change the green event, choose the orange one. Change that value to "no". Okay, so you must be really, really comfortable with this particular workflow now.

Okay, so on the Conditional tab on Group Toggle, I'm going to say that when that state, which is attached to the company, when its Toggle, is yes, so it's turned on, I'm going to change the background color (When company's Toggle is yes). It's going to change from grey or surface, which means it's toggled as no, I'm going to change it to this green color, but at 10% because we're going to have the little handles in here now next.

Okay, so let's grab another Group. Actually, where can we put it? I'm just going to press escape. What I'm going to do is this rather. I've got my Group Toggle. I'm just going to widen this Elements Tree pop-out a bit, and here's my Group. I'm going to grab a Group and drag it inside Group Toggle like this. There it is there. Let me call it "Group No", alright, Group No. It's massive right now, so we need to set it to fixed width of 24 px, and the height is also fixed of 24 px. And then I want that to be a circle.

So please click back on Group Toggle, and I want you to set padding all the way around of 2 pixels. This is on the Group Toggle. So the element that we're hanging a workflow off, then we can click back into Group No, and we can set both the height and the width to 20 px by 20 px. Nice and clean. So it's going to have 2 pixels of padding all the way around. Now we can change the roundness to 10 px to get our perfect circle. It can be more than 10 px, of course and I want you to change the background style to red.

Now what we're going to do is this. We're going to say Group No is not visible on page load, it's collapsed when hidden, and we're only going to show it when the company's Toggle is no. And that is the default state. That's when it's visible. And let's just make sure. Let's click back on company on the Elements Tree dropdown. If you do the same, please, and click on the "i" icon. Let's set the default value to "no". I prefer to attach an actual value there when I can.

But you know what, I'm just thinking, I don't like this red. It's too aggressive for me. So I'm just going to set this to our charcoal color. So we can see it, it's there, and that's the off state.

Now for the on state. So I'm going to click on Group No, I'm going to copy and paste. Actually, I'm going to undo that because we need to sort out the distribution or the layout here. This layout of Group Toggle needs to be, in fact, a row, and I'm going to change it to "Space between," so these dots are pushed or these handles are pushed side to side.

Now I can copy and paste and look where it puts it, much better. But for this one, I'm going to change the name to Group Yes, and this time, we can actually have it green. So that will be green. And remember, the background of Group Toggle will be green 10%. It's going to look super nice. But on the Conditional tab, we also need to change to show the Group Yes when the Toggle is yes.

Feel free to jump into the demo app if you're struggling to follow along there. And one more thing I'm going to do is on Group Toggle is I'm going to add a border style here of solid and the border color. It's going to look really professional.

Let's just make that these are also vertically aligned in the center. I'm actually going to heighten this to 26 px, Group Toggle. I can just see a few issues when we added the border there. Okay, so Group Toggle is 26 px, inside we've got 20 px.

Now, in order for this to work, we have to click back on the table in order for this filtering to actually happen because we're setting a state and we can actually apply that state in the search for Applications. So we're going to add a new constraint. Now, Shortlisted is expecting a yes or no. And remember, that's what we set our state to. The state, called Shortlist, is a yes or a no. So it's a match! So we can use the state to reference something in the database.

So I'm going to say "Shortlisted = company's Toggle" as a constraint in the Data source of Table jobs. The state is at the company, and it's called Toggle. And if I hover over Toggle, it says the value is set to a yes/no. If I jump into the database and I look at the Shortlisted field under Application, it says yes/no. So we've got a matching process going on here.

So let's go ahead, preview the page, and see what happens. I'm going to refresh the page. I can see a problem here, but let's just quickly test this toggle. So we want the toggle to stay on the right-hand side, okay?

So as you can see, if I click Shortlist and I activate the state, then it's showing a result. But if it's set to off by default, then there's no result and that's because we need to check the box in our constraint to ignore empty constraints because we don't have a constraint at the moment.

Okay, so let's fix all of this. So first of all, on Table jobs under the data source where we Search for Applications, the problem here is that we've set the default value of the state to toggle to "no". Okay, we should rather set it to empty because when we are creating an Application, we're not setting a "no" value to the Shortlisted field. In fact, we're ignoring the Shortlisted field altogether.

So go to company, please. Choose from the page dropdown "company," and then click on the "i" icon. And what you need to do is actually remove the default value from here. I've gone ahead and done that. It was a little bit buggy when I tried this on my break, and I still can't actually click anything here but I want you to remove the value because the default value should actually be empty, not set to no.

And I'm also going to go back to this Group Toggle, and I'm going to edit the workflow. And on the orange event where the conditional says, "company's Toggle is yes," what I want to do, instead of setting it to a value of "no", I'm actually going to clear the expression. So it's a value of nothing. That will fix the problem we have with the table.

The other problem I saw is we had a layout problem when it was activated to green, then the green was pulling to the left. I'm going to open up Group Toggle in the Elements Tree. I'm going to open up both Group No and Group Yes together. And what I'm going to do is on the Group No, I'm not going to collapse when hidden. So I'm going to keep the space where it is. I'm going to do the same to green. I'm not going to collapse when hidden because they've got their own reserved places here. They don't actually need to collapse, they just need to be hidden. Okay, and that should solve those problems.

Let's try it! Okay, so on page load, everything works and I can shortlist, and that works as well. Obviously, we've got nothing else to show, no other shortlisted candidates. But this toggle is working as it should. If I had to uncheck shortlisted, nothing comes up, and then Peter comes back there. Okay, so we know it's working. Shortlist again, and there's our shortlist.

Okay, so just a short lesson, just to show you how I would go about building a little toggle. You don't necessarily have to use a plugin for it, but of course, do check out the plugins because everything you can imagine that you need in a particular app build has probably been created by one of our community members or by Bubble ourselves. Okay, hope you enjoyed that lesson, and I'll see you in the next one.