Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

How to use Option Sets with country and phone numbers in

In this video tutorial we show how to use Option Sets in the Bubble editor to store and display phone numbers and country codes. We use an example of a basic CRM to demonstrate the power of Option Sets to storing multiple expressions of the same data and saving this to your user in your Bubble database.

Option Sets are really powerful when you are going to be displaying the same data or group of data throughout your app. And one example of this may be a country field. So I have the beginnings of a contact manager here and I'm going to be adding in a country field and showing you how quickly you can then populate and do some really clever things with options, Option Sets.

Creating Option Sets

So, to begin with, I'm going to go in and create my Option Set called country. It's under Data and then the different options are going to be USA, UK and Russia. I'm then going to go back into my data types and in my contact data type, I'm going to create a field to store a country.

And it can be tempting to use text, but you lose all of the power of Option Sets choosing text. To be able to continue to refer to the data in our Option Set, we need to choose our Option Set down here, which was country. And then because I've not got a front end form set up for this demonstration, I'm going to just do it in the back end data editor so the country for Natasha is Russia, for Peggy, it is UK, and for Tony, it is USA.

Displaying Option Sets

And then to display that on the front end, I'm just duplicating this text element. This is just a repeating group showing all of my contacts. And rather than showing the contact's name, I'm going to show the contacts country. And you'll see that it doesn't accept it straight away, because your Option Set is a container of information and at the very least, it will contain an element called display, an attribute called display. And another way to think of that is your label.

So choose display there and hit preview and you can see it now shows my countries. And to show you the power of Option Sets, let's say that I've been a little bit too informal. I need to write the full names of the country. So change that there. And United Kingdom.

Why you should use Option Sets in Bubble

And by changing an Option Set in the Option Sets menu in the back end of your app, it means that that information is carried forward in all examples. You don't have to go into Tony's record and update it. It's updated because it's attached. The Option Set is attached inside of the contact known as Tony.

Another example of why this is really powerful and could save you loads of time is let's say there is other data associated with a country, such as a country code used for phones.

Understanding Option Set Attributes

So I'm creating another attribute, which means that I can go into the United States of America, and I know that the United States of America country code is +1, the UK is +44 and Russia is +1. So, just like before in here, let's neaten this up a bit and this time, instead of display, I can choose country code.

And you might be beginning to see where this is going. This becomes really handy if you're working with, working with an API for sending SMS messages, because you'll need to have the country code stored somewhere.

So let's finish building out this table. Back in my data, under my data types Contact, I'm going to create one called Local Phone. And I'm not going to choose number for phone number because if it was to start with a zero, that zero is going to disappear and I just want the information to remain intact whatever I enter in that field. So I'm going to choose text and then Peggy's local phone. I'm just going to put some random numbers in here. That was Natasha, but random numbers in Peggy now and random numbers in Tony.

And so now I go back to Contact Local Phone and it will display the Local Phone here's, where it becomes quite special. Because in this last field, I'm going to show how you can combine the two together as if you were sending off an API call to include the contacts number. So I can go current Contact country code and then immediately afterwards I can go current contact local Phone And so you can see there that it combines the two elements together. And to take this one step further, I could use a link.

Making a phone number a link

And in this link, I'm going to include that exact same information. Current contact, country code, followed by current contact local phone. And instead of going to an internal page, you're going to make it external. I'm going to make it tel:. And then if I was to put exactly the same code, I've then created a link which if you were on a phone and you were to click it, it would call that number and it would call that number and it would go through wherever you are in the world because it contains the country code.

So there we go. That is a summary of the power of Option Sets if you're using a country field and showing you how you can add other attributes to Option Sets, such as a country code in order to help build up the application. It could become particularly useful if you're sending SMS notifications.

Latest videos