Option Sets were introduced in Bubble in December of 2019. Since then remained somewhat under the radar in my personal opinion, although they are an incredibly useful feature in a lot of different scenarios. At their most basic, option sets can be used to store dropdown values (like a list of countries or sorting categories), but they’re flexible enough the be used in a range of creative ways.
First, let’s get to know the Option Set terminology:
|Option Set||The Option Set is a collection of Options|
|Option||An Option within that set.|
|Attribute||A field saved on an Option.|
Example: Name or Population
|Display||The only built-in attribute. A text field to identify the set.|
What’s the difference between the database and Option Sets?
In many ways, they are similar. You can create new types, link them to each other and reference them everywhere in your app. But there are some main differences:
Option sets are static
Unlike the database, any values that you store in Option Sets are unchanging, and can only be edited in the Bubble editor. The changes are not visible in your app until you deploy a new version of it.
Option sets are fast
Every time you reference something in your database, Bubble needs to fetch that information from the Bubble server. Option Sets, on the other hand, are downloaded as a JSON object along with everything else on your page when it’s first loaded and don’t require any searches after that. Any listing, sorting or filtering of data stores in Option Sets after that is done client-side, meaning it’s lightning fast.
After that first page load, Bubble doesn’t need to perform any extra database look-ups to get Option Set data.
A database Thing can contain an Option set – but not the other way around
Option Sets are designed to live independently from the database. You can reference them from wherever you want in your app, but you can’t reference a database entry from an Option. Options can reference each other just fine though, as we’ll see in the example further down.
Creating an Option Set
Option sets are found in the Data tab, along with data database editor. There are no default sets, so you’ll find a completely empty canvas. In our example, we’re going to set up two different Option sets: Countries and Continents, and bind them to each other. You’ll see that the process is very similar to working with the database.
Countries and Continents
Let’s first get our Country type set up. In the Option sets editor, type in Country as illustrated below, and then set up one called Continent in the same way:
Having set up Country and Continent, click on the Country Option set to edit it. We’re going to add one attribute to it to bind it to a continent:
Then, let’s set up our first Continent with the New Option input field:
Do the same thing, and create a Country such as Norway, and then click the Modify attributes link, and pick the newly created Continent as the Country’s continent:
Great! Now we have a Country belonging to a continent. Feel free to add a few more countries and continents to the list, and let’s look at how we can show this list in the front-end. Remember to save the Continent on each Country.
Using Option Sets in the front-end
With a few Countries with Continents, let’s now leverage both of them in the front-end. First, set up a dropdown that simply lists all the Continents we’ve saved. Remember that this will only work in the version-test in your app, until you’ve deployed it.
Showing Option Sets in a dropdown
- Type of choices: Set the Continent Option set that we just created
- Choices source: Set the top All Continent
- Option caption: User Current Option’s Display.
Filtering the Option Sets
Next, we’ll use the Continent field saved on each Country to filter the countries by. Start by adding another dropdown next to the first one, and set it up exactly like the first one, except showing Country instead of Continent.
Now, we’ll make one important change to show the correct list of Countries after having picked a Continent. We do this by adding the :filter operator at the end of the Country list. What we’re telling Bubble is to take the full list of Countries, and then apply a filter to them:
Then, we’ll set up the Constraint telling Bubble that it should only show Countries that have a Continent that is the same as the User has picked in the Continent dropdown.
Option Sets FAQ
Option set are a kind of “light” database in Bubble that you can use to store static information. They are great for storing values that you need around in your app, such as the options you want to show in a dropdown.
Typically, Option Sets are used to store values that rarely change, such as a list of countries, languages, categories, etc.
Option sets are added in the Bubble editor, and you need to deploy your app before they are visible in the front-end.
Option Sets are downloaded to your page on page load, along with the other parts of your app that Bubble needs (elements, workflows, conditions, etc). Technically, it’s downloaded as a JSON file, which means it’s quickly processed on the page
Bubble only downloads the data it needs for the specific page.