What are Option Sets?

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.

Definitions

First, let’s get to know the Option Set terminology:

TermMeaning
Option SetThe Option Set is a collection of Options
Example: Country
OptionAn Option within that set.
Example: Norway
AttributeA field saved on an Option.
Example: Name or Population
DisplayThe 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

What are Option Sets in Bubble?

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.

How do I add and update Option Sets?

Option sets are added in the Bubble editor, and you need to deploy your app before they are visible in the front-end.

How are Option Sets downloaded?

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.

Share:

More Posts

Custom states VS URL parameters for navigation in Bubble

A lot of Bubble tutorials and guides describing page navigation default to using custom states for hiding and showing Groups. While states will work just fine in many cases, it has its limitations and shouldn’t be used simply because it’s

How to add keyboard shortcuts to your Bubble App

Keyboard shortcuts have been a natural part of desktop applications since… well, forever. For web applications it’s really in the last few years that they’ve started to become commonplace enough for users to actually remember to use them. Not to

Bubble vs WordPress – what’s the difference?

When people first hear about Bubble, they often quickly draw the comparison to WordPress. It’s not that far-fetched – after all, they’re both platforms that allow non-coders to set up a website, create content and publish it for the world

How to do complex calculations in Bubble

The Bubble expression editor – you know… this one: … is pretty good! But if you’re trying to do more complex mathematical expressions, you’ll find that the built-in editor has its limits. You can easily set up basic arithmetic like

1 Comment


Tracking the progress of a Recursive Workflow in Bubble
April 26, 2021 at 00:25
Reply

[…] How to use Option Sets […]


Leave A Reply

Your email address will not be published. Required fields are marked *

*

Useful articles and tips

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

You have Successfully Subscribed!

Share This