How to use Option Sets with country and phone numbers in Bubble.io
In this Bubble.io 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.
Unlock the power of option sets: Create dynamic country fields with phone codes in minutes!
Master data management: Learn how to effortlessly update and display option sets across your entire Bubble app.
Supercharge your contact forms: Discover the secret to combining country codes and local numbers for seamless SMS integration.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.