While building our app, we might run into instances where we need to have data in a static list. For example, we might need to represent days of the week, menu tabs in our nav-bar, or tiers of access that our user can have. While we can create a data type for these sorts of lists, we could also leverage Option Sets. The advantage of an option set is that it is static, and cannot be updated on your front-end; therefore, it is more performant than a data set.
While it’s technically possible to use data types for many of the applications outlined below, there are performance wins to be had with option sets:
- Option Sets don’t read from the database, which means your app will run faster wherever you use them.
- It’s quick to add new options, and change existing ones to be more universal to your application.
- They can be accessed from anywhere in your app.
Some things to keep in mind about option sets are:
- They are not private, so we don’t want to put sensitive data into them.
- When we do update an option set, we have to update the page in development mode, or deploy a new update to live, to see the change. This is the core difference between option sets and data types and if you wanted real-time updates you would need to use a data type.
1. Create an option set
To create an Option Set, we navigate to our Data Tab and click on Option Sets. This is where we can create, update, and delete option sets, the same way we would for regular data types.
For the purposes of the tutorial, let’s say that we want a list of colors in our application. We’ll name our Option Set accordingly (“Colors”) and just like that we’ve created an option set.
When we create an option set, we get two sections: one called “Options” and one for “Attributes”. Options are where we can edit the options for our list, and Attributes allow for adding different fields to the option.
By default, every option set comes with a built-in “Display” attribute. This will be the identifier for each of our options. We’ll enter some colors into our option set: for this tutorial, we’ll use “Red”, “Green”, “Blue”, “Yellow”, “Purple”.
With these added, we have our static list of colors that is globally accessible throughout our app. If we want to have other identifiers for our colors, we can add more attributes to each option.
Once we click “Create New Attribute” and add other properties about this list of colors that we may want to have. For example, we’ll add an “Image” attribute to represent each color with an image. We’ll also add another attribute of type number and name it “Order” for extra sorting that we may want to do with these options.
By default, our option set is sorted from the order in which you add an option. You can also adjust the order in the option set manually by clicking to move the option up or down in the list.
Additionally, we modify each option by clicking “Modify Attribute”. Here, we can add to the option a photo for its color and a number value for its own sort order.
2. Leverage “Get an option” as a data source
The first way we can access an option set is through the “Get an Option” data source. If we create a text box on our page, we can use “Get an Option” to view all of our option sets.
When we choose the option, we can either return the list and all its options, or just get the individual option. However, when we select an individual option, we get an issue. Since this is a text box, we need to evaluate to text, and right now we evaluate to the option itself. When we click “more” we can select the Display attribute, which will evaluate the text and yield us the individual name.
We can now preview our application to see our text box displaying the Display attribute for our selected option.
3. Use the option set as a data source for a repeating group
We can also use option sets as the data source for a repeating group, since an option set is a list of things. To do this, we’ll create a new repeating group on our page. In our “Type of content” dropdown, we can select “Colors”. Once the data type is set, clicking on “Data source” will automatically place “All colors” at the top, to make this selection process easier. Now, our repeating group will display all items in the Colors option set.
As for any data display, we’ll now need to add elements to the repeating group to show the current cell’s Color. We’ll add a text element to the first cell in our repeating group and get the Current Cell’s Color’s Display, which will return the name of each option. Since our Colors also have an Image attribute, we can add an image element next to this text, setting our image source to Current Cell’s Color’s Photo.
When we preview we can see all of the options in our option set, with their names and photos!
4. Sorting the option set
By default, our Repeating Group will display the order of our option as it is displayed in our database. However, when creating this option set in step 1, we added another attribute called Order. We can now leverage this attribute in our repeating group by adding a “:sorted” operator to our data source, and sort by the Order attribute.
5. Use the Option Set as a data source for a dropdown
One of the most powerful use-cases for Option Sets is the dropdown element. By design, a dropdown element can have two ways to define your Choices style: we can select “Static choices”, and type in each option individually, or “Dynamic choices” to retrieve a list from our database.
We’ll create a dropdown element, and select “Dynamic choices” for our choices style. Here, we’ll see our various fields and data types, but we’ll also note that we can select our option sets. We’ll select “Colors” for this dropdown.
We then need to set the Choices Source and, as in step 4, we can select All Colors.
Finally, we’ll set the option caption, as we need to retrieve each option's name. We’ll click more after Current Option and get its Display attribute.
Now, when we preview our app and open our dropdown, we’ll see that the options displayed are our Colors as defined in our option set.
6. Add an Option Set as a custom data field
We can even add option sets as custom fields in our data tab.
We’ll navigate to our app editor’s Data tab, and select the “Data types” tab. Once there, we’ll click on User and add a new custom field called Favorite Color. For the field type, we’ll select our “Colors” option set. In our user app data, we can modify the user and see how this field works.
Because it’s an option set, and because an option set is a static list, we can see a dropdown that displays the Option Set’s available options.
7. Conditional statements
Another place where we can replace search operations with option sets are conditional statements.
Let’s create a new text element that should change color based on the dropdown we created in step 5. We can add some conditional statements to change the color by comparing the dropdown’s value to options in the Option Set.
Since option sets are global, we can even use them to compare things in workflow conditions. To see this in action, we can add an input and a button to the page. Our input should be of type text, and we’ll add a workflow to show a popup if the input’s value matches a value in our option set. Now, when a user types in a text into the input that matches a value in the option set, they’ll see a popup displayed.
We’ve seen how option sets can be used throughout your app, how they are faster to read than searching the database, and that they are globally accessible. By using them for situations where you know your list ahead of time, building your app will become even easier.
Built on Bubble
