So I noticed when Bubble AI created me this project page that it had filter by status with a dropdown: Active or Completed.

Now, in order to explain how option sets work and what they're used for, I went ahead and created this fresh new column called Status, but I've left it blank intentionally.

Let's first jump into the data to understand how we can filter these projects by statuses. So, back in the data — on data types: Project — I can see that we have an isActive field here, which is a yes/no. And that's great. That works — is it active, is it not active?

But what if we want to take this one step further? What if we want to track, for instance, three statuses — maybe Upcoming, In Progress, and Completed?

This is the perfect example where I would use an option set to configure this.

Let's click on Option Sets, and I'm going to say Skip Tutorial, and I'm going to create a new option set called Status. Create.

Bubble then gives us an input field here that says New Option. I'm going to type Upcoming and press Return.

Okay, interesting. I'm going to type one that says In Progress. Create. And then lastly, Completed.

So what are these option sets, and why am I creating them here?

The way to think of option sets is: it's a place in your app where you can create static list data — data that you'll likely need to use in other parts of your app.

Now, often data is — well, in most cases — data is case-sensitive, and it's easy for a developer to make spelling errors. So if we had to manually set the status information in multiple dropdowns, we're bound to make mistakes.

So, an option set is a great use case for where we can pull from a single source of truth.

Okay, what else would you use option sets for?

Again, static list data that doesn't change very often — of course, we can change it ourselves, but that's beyond the point.

I would also use them for, for instance, the different states in the U.S., different countries of the world — anything that is static. Different types of food, different types of currencies, different types of languages — would set them here because the likelihood is that we wouldn't make changes very often.

So now that we have a single source of truth for our status, we can now pull from this central location and populate any elements we like in our app with this information.

And in our instance, what I'd like to do is actually populate this filter by status — because hey, maybe my tasks, which are part of my app, also need a status.

So because they are an option set, now we need to change this to dynamic choices — because we're going to dynamically set them to our option set here at the top called Status. And I'm going to grab all of the statuses and then I'm going to display what I typed into the input earlier — okay — which was: Upcoming, In Progress, and Completed.

So now, when I click the dropdown, I'll see those three options.

But let's just dive into the data because I would like to add this new status field.

Okay, so we're going to call this Status, and the field type now links to the option set — and this is all we need to do. I'm going to create this field because we can see that we have a status which is linked to an option set: Status.

And by the way, we can also set a default of Upcoming. Whenever a project is created, it can default to Upcoming — or anything we like here.

Fantastic.

Now that I've created this field, let's populate the actual database with some of these statuses. Now, I'm currently logged in as Zara, so I have one, two, three projects in my project view. So I'm just going to go ahead and choose Upcoming for one of them, and why don't we set Completed on the other two.

So currently, Zara is on holiday because she has nothing In Progress. She completed her projects and she has one for when she gets back.

Okay, let's first look at the front end to see our starting point.

Okay, so we're not displaying anything, and this obviously isn't working.

Let's make this work.

So the first thing I'm going to do is I'm going to add the status here. I'm just going to copy this text — because I like the formatting — and if I just configure this a little bit, paste the text in, I can now access the current row project's status — and it's now pulling through.

And this is where I want to display back what I typed in those inputs.

Okay, and I'm just going to add a placeholder here just so I can see the layout here. So we possibly need more space here.

Okay, so I'm going to add — I'm going to make this wider — this particular column. This is not too important, guys.

What's important now is how we make this work.

Okay, so the design is all set up. We have the status column in our table. We have populated statuses in our database. And we have this filter.

So how do we link the filter to the table so it's functional?

So what I'm going to do is I'm going to click on the table element in the elements tree. Here it is here.

Okay, this is where constraints come in. So, show me all the projects where I'm the owner — great — but then also: status equals dropdown status filter’s value.

How was I able to do this?

Well, that is because this dropdown has a data source that matches the field here. It's an option set: Status. So we can link the two together.

Okay, let's see it in action.

And before we see it in action, there's one more thing I wanted to do — to configure — to make sure, because maybe a user won't always have a selection. Maybe they will just ignore the status for the time being.

So in that instance, we have to ignore empty constraints. These are constraints. If my status constraint is not set, please ignore it. That’s why I’ve checked that box there.

Okay, so the page loads. We see our three projects that I can now filter.

There’s my one. I have no In Progress, but I have two Completed. And then I can actually remove the status altogether.

So — option sets: super, super handy for a single location — a single source of list data — that we can use anywhere in our app and keep our implementation nice and clean.