Power Apps Auto Populate Country Code And Phone Number

I was recently working on a Power Apps form where users need to provide their personal information, including their full name, email address, phone number, and address. In the form, I had to auto-populate the country codes along with the phone number format, so that I could get the proper information from the user.

To illustrate, suppose the user selects their country as “United States” from a dropdown; the country code +1 will automatically appear in the phone number field, along with the corresponding number format.

Auto Populate Country Code based on Country selection in power apps combo box

So, let’s get into implementation!

Table of Contents:

Auto Populate Country Code Based On Country Selection Power Apps Combo Box

To meet our requirements, we need to store country details, including country name, country code, and phone number format, in Power Apps. When the data is in table format, creating a collection is the best way to store the details.

Below, you can see that I created a collection named colCountries, which has the following fields:

CountryName
CountryCode
PhoneNumberFormat

Provide this code either in the App OnStart property or a button OnSelect property, based on your choice.

ClearCollect(
    colCountries,
    {CountryName: "India", CountryCode: "+91", PhoneNumberFormat: "XXXXXXXXXX"},

    {CountryName: "United States", CountryCode: "+1", PhoneNumberFormat: "(XXX) XXX-XXXX"},

    {CountryName: "United Kingdom", CountryCode: "+44", PhoneNumberFormat: "XXXX XXXXXX"},

    {CountryName: "Australia", CountryCode: "+61", PhoneNumberFormat: "X XXXX XXXX"},

    {CountryName: "Canada", CountryCode: "+1", PhoneNumberFormat: "(XXX) XXX-XXXX"},

    {CountryName: "Germany", CountryCode: "+49", PhoneNumberFormat: "XXXX XXXXXXX"},

    {CountryName: "France", CountryCode: "+33", PhoneNumberFormat: "X XX XX XX XX"},

    {CountryName: "Japan", CountryCode: "+81", PhoneNumberFormat: "XX-XXXX-XXXX"},

    {CountryName: "China", CountryCode: "+86", PhoneNumberFormat: "1XX XXXX XXXX"},

    {CountryName: "Brazil", CountryCode: "+55", PhoneNumberFormat: "(XX) XXXXX-XXXX"},

    {CountryName: "South Africa", CountryCode: "+27", PhoneNumberFormat: "XX XXX XXXX"}
)

Once the collection is created, it will appear as shown in the image below.

How to auto-populate the Country or Region code in power apps

Since the country details are ready, let’s see the further steps:

Add a Power Apps Combo box control and set the distinct formula below in its Items property. This function will fetch the country names present in the collection.

Distinct(colCountries,CountryName)

Power Apps Phone Number Formatting For Any Country

Now, we need to display the country code dynamically whenever a country is selected in the country combo box. So, take a text input control and apply the LookUp function below to retrieve the country code based on the chosen country.

LookUp(colCountries,CountryName =ComboBox_Country.Selected.Value).CountryCode

Power Apps Phone Number Formatting In A Form

If you want to display the phone number format as a hint text to users, use the following Lookup formula in the Hint Text property of the phone number text input field.

LookUp(colCountries,CountryName=Cmb_Country.Selected.Value).PhoneNumberFormat

auto populate country phone number format dynamically in power apps

This is how you can easily auto-populate country codes and phone number formats in Power Apps forms. This will help the user because they don’t have to manually search or type the country code.

Validate Phone Number in Power Apps Forms Before Submit

As Power Apps app developers, we are responsible for validating the form control to obtain proper information from the user.

In the example below, you can see that when I try to provide the phone number in the wrong format, an error is displayed until I give the number in the correct format.