In this guide, I’ll teach you everything you need to know about using option sets within Bubble.
If you’re new to Bubble, option sets can often be a confusing feature to comprehend. Once you understand a few key concepts, however, it’ll completely change the way you build products in Bubble.
The steps to learning how to use option sets in Bubble include:
- Learning how to create & structure option sets
- Learning how to modify attributes within option sets
- Understanding how to use option sets within workflows
- Using option sets within a repeating group
Full Transcript of Tutorial
1. What Are Option Sets
Option sets allow you to store a permanent value within your database that you can later reference at any point throughout your application.
Unlike data types, users can’t actually create entries that sit within an option set list. Only you as the admin of your application will have this ability.
A great use case for option sets could be if you’re storing and displaying a list of categories within an application.
Let’s say you’re creating a marketplace within Bubble and you’d like to display a dropdown menu with a list of categories that a user can filter a repeating group with. If you were to create those categories as a data type, you would, later on, have to go into your Bubble app and manually create every entry that you want to display. Because you’re using a data type, this would also allow users to create categories as well.
In this example, it’d actually be more beneficial to make use of option sets.
With option sets, you can create the list of categories once, then easily reference that at any given point throughout your application. This means that within your dropdown menu, instead of having to perform a search through your data type, or manually having to type in a static list of all those categories, you can easily just reference your option set list and it would display all those categories at once.
The reason you wouldn’t want to give users the ability to create categories is because you’d quickly lose control over the formatting of any new categories that are added. This means that there’d be no guarantee that users would correctly add any categories without typos, or even add duplicates of existing categories. If you were to use a list of options sets, however, it just allows you to create a single source of truth.
Now, while I can sit here and try and explain to you how option sets are used, I find the best way to learn is just by showing you some tangible examples that you can implement into your own Bubble application. So let’s open up a Bubble editor and I can start walking you through the process.
Over in my Bubble editor, I’ve created just a sample page that we’ll use to display a list of option sets today. Before I show you this example, what I’d like to do first is walk you through the process of how we can actually create an option set list within our database.
2. How to create new option sets
If you open up the data tab within Bubble, you’ll see under the list of tabs here that by default, you’re currently viewing the data type tab within your database. Over to the right, however, you’ll also see where you can add a list of option sets.
When creating a list of option sets, the first thing you’ll notice is that the interface resembles the same experience as the process of creating a data type.
With option sets, you can create the overarching name of a data type, then you’ll be able to add a list of attributes, which is like a list of data fields. These attributes allow you to store any additional information inside your list of options.
In my example today, what I’d like to do is just show you how we can create a permission structure within a company’s user accounts.
On my page, I’ve just created an internal dashboard with a repeating group that displays a list of users within a team.
What I’d like to do is essentially add a dropdown menu that displays a list of access titles that just gives users different permissions throughout our application. So if, for instance, a user is listed as an admin, I’d like them to have the ability to update and delete an existing team member within this repeating group. Likewise, if a user has a lower permission type like a coordinator, I don’t want them to be able to have access to these features.
Within this dropdown menu, I’m going to be displaying my list of option sets, then I’ll just take the time to also walk you through the process of creating conditions based on certain option sets.
But before we do that, however, we’re going to need to build out the different permission levels that we can give to users within our team.
If we jump back into our data tab, we’ll open up our option sets menu once again. Within this, I’d like to do is create a new option set called ‘permission’. Now, within this list, I’ll just be adding in all of the different permission levels that a user in our team could be allocated.
I’m going to start by adding in the permission level called ‘admin’, then I’ll add another called ‘manager’, then finally, I’ll add in a ‘coordinator’.
At this point, one thing I’d just like to note is that within our dropdown menu, we’re going to display the list of permission. The list of options in our dropdown menu are going to be displayed based on the order of the options that we’ve added in our list here.
This means that the list will start with ‘admin’, then that will be followed by ‘manager’, and finally, ‘coordinator’. If you’d like to move these items around within our list though, you can simply just choose from the options provided to either move these up or move them down within our list. The order of the options within this list will represent the order within our dropdown menu.
3. How to modify option set attributes
Another thing I’d like to point out is that you can create additional attributes for each option within this list. So under our permissions list, we’ve created just three plain text options. Each option, as I just mentioned, is a text entry, so the display of each option is just set as a text type.
But if you’d like to store some additional information for each individual entry?
It’s also possible to create what’s called an attribute within this list.
When you start working with attributes, you’ll see that it closely resembles the process of creating a data field within a data type. This means you’ll need to give your attribute a name, then choose what type of data this will be.
The attribute can be an image, a file, or even a geographic address. I’ll be showing you another example in a moment that makes use of this attribute feature. For now, though, I’m just going to keep this example quite basic and leave my options set list as a list of display text.
Now, if I’d like to actually display this list, I’m going to jump back into my design tab, and within my dropdown menu for my team members in the dashboard, what I’d like to do is display a list of all the choices that I’ve just added into my option set list.
So within my dropdown, I’m going to update the ‘choices style’ to be a list of dynamic choices. I’m selecting this option because I’d like to pull the options that are displayed from my database, and, of course, in this case, I’ll be pulling through the option set list. This means that the type of choices I would display within my dropdown is going to be our ‘permission’ option set.
After configuring our ‘choices style’, we’ll then need to set a data source of the options that will be displayed within this dropdown menu, I’m going to choose to display all of the different permission levels that I had added – so that was our admin, our manager, and our coordinator.
From these permission levels, I’ll be selecting the actual text that’s displayed from each option. In order to do this, I’ll select to display the ‘current option set’, its ‘display’. Now, if you remember from our database, the display was just the text itself for each individual option. This means I’ll be displaying the words ‘admin’, ‘manager’, and ‘coordinator’.
While I’m here though, what I’ll also need to do is just create a relevant data field under my user data type that just allows me to store a single option from our option set list as that user’s account permission. I’m doing this because I’ll want to store whether or not the user is an admin, a manager, or even a coordinator.
If I jump over to our data types and open up our ‘user’ data type, you can see I just currently have two data fields here; one is the name of the user and the other is a profile photo. What I’d like to do is add an additional data field that will link through to our option set list and allow us to store one particular entry – which will just be the level of permission that the user should have.
I’m going to create a new field here and call this ‘account permission’.For the field type, I’d like to reference our ‘permission’ option set.
Because one user will only have one permission type at a time, I’m not going to select that this is a list with multiple entries.
What you’ll now see is this data field is actually linked through to our permission option set type, and so now I can actually create a workflow within our repeating group and update the permission type that each user has when a button is selected.
4. Using option sets in workflows
If I jump into my design tab again, what I’d like to do is just create a workflow that updates the ‘current cell’s user’s permission type’ to match the same value that’s selected within our dropdown menu.
This means that I’m going to create a workflow every single time the update button is clicked. Within this workflow, I’m going to make changes to the ‘current cell’s user’, and in this case, I’m just going to update their ‘account permission’ field.
Because I’d like this field to equal the same value as our dropdown permissions, I’ll select its value and store the option chosen from our dropdown menu.
Now, because both our ‘account permission’ data field and our ‘permission’ option set are stored as the option set list, Bubble will be able to connect both of those data entries together nicely.
And now that I’ve created a way to actually update the account permissions of a user’s account based on our option set list, what I could also do is create a condition on both of our buttons here that only allows these to be accessed if the user’s permission is currently set to be an admin. So in this case, I’ve created a button here, which within this workflow just deletes a user from a team whenever it’s clicked. If you were building an admin dashboard, you might only want the admins themselves within your team to be able to access this feature, so what we can do is actually just create a condition that only allows this button to be displayed to those users who have an admin permission type.
From here, I’m going to unselect that this button should be visible on page load, then I’m going to create a condition that will only display this button to those users registered as admins.
To achieve this, I’ll define a new condition. Within this condition, I’d just like to recognise when the ‘current user’), so that’s the person logged in viewing this team dashboard), when their account permission data field is listed as an ‘admin’.
From here, we can take a preview of your app to see how this feature will function.
Over in my account dashboard, I have a list of all of the team members within my organisation. I can currently see that my account is set to be a manager, so if I would like to open my option set list, I can see the remaining two options. In this case, I’d like to update my account to be an admin, and now what you’ll find is that because I have the permission level of an admin, the delete button is now visible to my account. If I would like, I could select this option and it would run the workflow to delete users.
This is just one simple example of how you can create and use an option set list within a dropdown menu. What I would just like to do quickly though is just show you another brief example of how you can display a list of option sets within a repeating group.
5. Using option sets in repeating groups
If I jump back into my Bubble editor, I have a separate page within my application called a ‘settings’ page. This is just used to store a user’s details like their name, their age, and their profile photo.
For my example today, let’s say I’d also like to store a user’s favorite animal. Because I’d like to display a list of animals that they can choose from in a repeating group, I’m going to create those choices as a list of options sets.
If we jump back into our data tab, we can once again open our option set menu.
For this example, we’ll need to create another option set list called ‘animals’, so I’ll choose to create that.
Within this new option set list, I’m just going to add a list of animals that I’d like to display. These can be animals like a cat, a dog, a fish, and also maybe a goat. Now, I’ve just added these as a list of displayed text, but what I would also like to do is show you how we can create some additional attributes for each choice.
Besides every single text entry within my repeating group, I’d just like to display an image of each animal. In this case, I’ll need to create a new attribute. I’ll call this the ‘image’ of each animal, and, of course, this attribute type will just need to be an image property.
I also won’t need to select that this is a list of images, because one animal will have only one featured image.
After I create this list, I’ll need to upload an image to each option. To do this, I can select the ‘modify attributes’ button. This will now display all of the data that will be stored for this particular option.
So for our cat option, you can see that we have the display text, as well as the ability to upload an image. I’m just going to upload an image that I have stored on my local device here.
Once the image has successfully uploaded, I’ll choose to save that, then I can head on down to my next option, which is the dog.
I’d once again like to modify those attributes and upload another image. From my folder, I’m just going to select this image of a dog that I have, then I’ll select so save that.
Once I’ve added all of the data I’d like to store within my option set list, I can jump back over into my design tab. What I’d like to do now is just update the data source of our repeating group to display a list of all of the option sets that we’ve just added.
For the type of content of this repeating group, I’m going to select from our ‘animals’ option set list, and then for the data source, I’d like to display all of the animals that I’ve created.
From here, I can then start adding in the elements that will be displayed within each cell.
The first element I’d like to add is going to be an image of each animal. In order to do that, I’m just going to insert dynamic data and display the ‘current cell’s animal’, and this is where you’ll be able to choose from the list of attribute fields within each option set list, in this case, I want to display the image of each animal.
Finally, if I’d like, I also could add the text of each animal, which, of course, will just be our display field. I can insert dynamic data and choose to display the ‘current cell’s animals, the display text’.
I’m not going to go into too much detail about how can actually build a workflow to select each option, but what I’d like to do is just show you a quick preview of how this repeating group looks within our Bubble development environment.
Over in the settings page of my application, you can see within my repeating group that I have a list of all of the animals that have been added into my option set list. For each animal, you can also see the image attribute followed by the display text attribute.
And just like that, you can start to see how powerful option sets can be within your Bubble application. If you’ve already set up a database, I’d really recommend taking the time to just review all of the existing data types and fields you’ve created to see if there’s anything you can convert into option sets.