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.

So, let’s get into implementation!

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.

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

1. 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)

2. 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

3. 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  

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.

To validate the phone number, as shown in the above example, add a text label and set the code below in its Text property.

If(
    !Switch(
        Cmb_Country.Selected.Value,
        "India", IsMatch(txt_PhoneNumber.Text, "^\d{10}$"),
        "United States", IsMatch(txt_PhoneNumber.Text, "^\(\d{3}\) \d{3}-\d{4}$"),
        "United Kingdom", IsMatch(txt_PhoneNumber.Text, "^\d{4} \d{6}$"),
        "Australia", IsMatch(txt_PhoneNumber.Text, "^\d \d{4} \d{4}$"),
        "Canada", IsMatch(txt_PhoneNumber.Text, "^\(\d{3}\) \d{3}-\d{4}$"),
        "Germany", IsMatch(txt_PhoneNumber.Text, "^\d{4} \d{7}$"),
        "France", IsMatch(txt_PhoneNumber.Text, "^\d \d{2} \d{2} \d{2} \d{2}$"),
        "Japan", IsMatch(txt_PhoneNumber.Text, "^\d{2}-\d{4}-\d{4}$"),
        "China", IsMatch(txt_PhoneNumber.Text, "^1\d{2} \d{4} \d{4}$"),
        "Brazil", IsMatch(txt_PhoneNumber.Text, "^\(\d{2}\) \d{5}-\d{4}$"),
        "South Africa", IsMatch(txt_PhoneNumber.Text, "^\d{2} \d{3} \d{4}$"),
        false
    ),
    "Invalid Phone Number Format",
    ""
)

Here,

• Cmb_Country = Country combo box control name.
• txt_PhoneNumber = Phone number text input control name.
• IsMatch() = Used to match the phone number input with the regular expression of the respective country.
• Switch() = Used to compare multiple conditions with the same value.
• If() = This condition is used when the phone number format is incorrect with the provided country format. If this condition is met, an error message is displayed; otherwise, an empty string is displayed.

Also, add the code below to the Visible property of the text label to display the error message only if the phone number field is empty.

If(!IsBlank(txt_PhoneNumber.Text),true,false)

Save the changes and preview the app. While testing, you can observe that the error message will be visible if you provide the phone number in an incorrect format.

In this article, I explained how to auto-populate the country code and phone number format based on country selection in a Power Apps combo box. I also covered validating the phone numbers based on each country.

I hope you found this article useful!

Also, you may like:

• Power Apps Form Validations
• Create Power Apps Weather App
• Import CSV Data to Microsoft Dataverse Using Power Automate
• PowerApps role based security SharePoint example
• Power Apps Currency Format
• Create Power Apps App From Excel
• Get Current & Previous Item in SharePoint List Using Power Automate