How to use Option Sets with country and phone numbers in Bubble.io

Understanding Option Sets in Bubble.io

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 option sets.

Creating an Option Set for Countries

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, I'm 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.

Setting Up Data in the Backend

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, Hapegi, it is UK, and Vittoni, it is USA.

Displaying Option Set Data on the Front-end

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 contact's 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.

The Power of Option Sets: Easy Updates

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 countries. So, change that there, and United Kingdom. And by changing an option set in the option sets menu in the backend 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.

Adding Additional Data to Option Sets

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. 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 plus one. The UK is plus four, four. And Russia is plus seven.

Utilizing Option Set Data in Your App

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 a, if you're working with an API for sending SMS messages, 'cause you'll need to have the country code stored somewhere.

Adding Phone Numbers to Contacts

So let's finish building out this table. Back in my data, under my data types, contact, I'm gonna create one called local phone. And I'm not gonna 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 gonna choose text. And then Peggy's local phone, I'm just gonna put some random numbers in here. Oh, so that was Natasha, but random numbers in Peggy now. And random numbers in Tony.

Combining Option Set Data with Contact Information

And so now I can, 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 contacts, country, 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.

Creating Clickable Phone Numbers

And to take this one step further, I could use 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 approach, I'm gonna make it external, I'm gonna make it tell. And then if I was to put exactly the same country code, I've then created the link, which if you're on the 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.

Conclusion: The Power of Option Sets

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 your application and it could become particularly useful if you're sending SMS notifications.