Power Apps Phone Number Formatting In A Form (Input Mask)

Power Apps users want to see the proper formatting applied to a phone number as they type. As an app builder, I want to make sure phone numbers are stored consistently in my datasource. Input masks are an excellent way to accomplish both of these goals and by making sure phone numbers are always formatted correctly. With an input mask we can define data validation rules and a format that will be automatically applied. Power Apps does not have an input mask feature but we can build it ourselves using a new technique I’ve invented.

Table Of Contents:
• Introduction: The Business Contacts App
• Setup The Business Contacts SharePoint List
• Create A Side Navigation Menu With The Contact Name
• Store The Current Contact And Phone Number In A Variable
• Add A Contact Form With A Phone Number Field
• Count The Length Of The Phone Number Field
• Define The Phone Number Formatting In Power Apps
• Phone Number Format Examples For Other Countries (Optional)
• Setting The Phone Number Maximum Length
• Apply Phone Number Formatting To The Text Input In Power Apps
• Submit The Contact Form
• Edit An Existing Contact Phone Number
• Add A New Contact Phone Number
• Hiding The Phone Number Format Text Input & Slider

Introduction: The Business Contacts App

Recruiters at a staffing agency use the Business Contacts app to manage their client information. When a new client is added to the app their phone number is automatically formatted using an input mask.

Setup The Business Contacts SharePoint List

Create a new SharePoint list called Business Contacts and include the following columns:

• FullName (single-line text)
• PhoneNumber (single-line text)

Populate the list with the following data.

Create A Side Navigation Menu With The Contact Name

The first feature we will build is a side navigation menu with a list of contact names. Open Power Apps Studio and create a new app from blank. Connect the Business Contacts SharePoint list to the app.

Insert a gallery on the left side of the app. Select the Business Contacts SharePoint list as the datasource.

Use these values in the following properties of the gallery.

Fill: RGBA(237,237,237,1)
TemplatePadding: 10
TemplateSize: 70

Next, insert a button to display the contact name in the gallery.

Write this code in the Text property of the button to show the contact’s full name.

ThisItem.'Full Name'

Store The Current Contact And Phone Number In A Variable

When the recruiter clicks on a name in the contacts list we want to store their record and their phone number in variables. We will need this in a moment when we create a form to show the contact information.

Use this code in the OnSelect property of the contact name button.

Set(varContactCurrent, ThisItem);
Set(varPhoneNumber, ThisItem.PhoneNumber)

Then we’ll edit the button properties to highlight the currently selected contact name. We want the selected contact to have white text with a blue fill. All other contact names should have black text with no fill.

Write this code in the Color property of the button…

If(
    ThisItem.ID=varContactCurrent.ID,
    White,
    Black
)

…and type this code into the Fill property of the button.

If(
    ThisItem.ID=varContactCurrent.ID,
    RGBA(56, 96, 178, 1),
    Transparent
)

Add A Contact Form With A Phone Number Field

For each contact the recruiter must fill-in a form with a name and a phone number. Let’s start by giving our form a title. Insert a new label at the top of the app with the text “Contact Form.”

Then create a new Edit Form and select Business Contacts as the datasource.

The form should have only 2 fields: Full Name and Phone Number.

We want the form to create a new entry in the SharePoint list by default. Change the DefaultMode of the form to the code below.

FormMode.New

Count The Length Of The Phone Number Field

As the recruiter types a phone number the formatting should be automatically applied using an input mask. Phone number input masks are not a feature of Power Apps so we will build it ourselves. To start, insert a new slider control into the phone number card.

Then use this code in the Default property of the slider. The slider is used to count the current length of the phone number text input. Every time the user inputs another number the slider increases. Soon we will add some code to the OnChange property to re-format the phone number after each digit is typed.

Len(txt_PhoneNumber.Text)

Here’s what the slider looks like in action. Eventually we will hide it from the user but for now we need to keep it visible.

Define The Phone Number Formatting In Power Apps

Next up, we’re going to define the phone number format for our form. Add a text input to the form’s Phone Number card.

Write this code to represent the phone number format in the Default property of the text input. The # symbol identifies positions in the phone number where a digit is found. Any other symbols or spaces in the format will automatically be filled-in as the phone number is typed.

"###-###-####"

Phone Number Format Examples For Other Countries (Optional)

We can also choose another phone number format if we desire. Here are some examples for other countries. Copy them into the Phone Number Format text input to see the result.

Setting The Phone Number Maximum Length

Phone numbers have a fixed amount of digits. Therefore, we should limit the amount of numbers a user can type into the phone number text input.

Use this code in the MaxLength property of the phone number text input.

Len(txt_PhoneNumberFormat.Text)

Apply Phone Number Formatting To The Text Input In Power Apps

As the user types they expect to see the phone number formatted. This is the last step needed to make that happen.

Copy and paste this code into the OnChange property of the phone number length slider. As each digit is typed into the phone number text input field, it reads all of the numbers in the field, determines what formatting should be applied, stores the result in a variable named varPhoneNumber and then resets the text input. It also removes any non-numeric values entered by the user.

Set(
    varPhoneNumber,
    With(
        {
            // extracts all numbers from the phone number field
            varTextNumbersOnly: Concat(
                MatchAll(
                    txt_PhoneNumber.Text,
                    Match.Digit
                ),
                FullMatch
            ),
            // builds a table with phone number format at every position
            varPhoneNumberFormat: With(
                {varTextPhoneNumberFormat: txt_PhoneNumberFormat.Text},
                With(
                    {
                        varTablePhoneNumberFormat: ForAll(
                            Sequence(Len(varTextPhoneNumberFormat)),
                            With(
                                {
                                    varNumberCurrentLength: Left(
                                        varTextPhoneNumberFormat,
                                        Value
                                    )
                                },
                                {
                                    NumberFormat: varNumberCurrentLength,
                                    CountNumbers: CountRows(
                                        MatchAll(
                                            varNumberCurrentLength,
                                            "#"
                                        )
                                    )
                                }
                            )
                        )
                    },
                    ForAll(
                        Sequence(
                            Max(
                                varTablePhoneNumberFormat,
                                CountNumbers
                            )
                        ),
                        LookUp(
                            varTablePhoneNumberFormat,
                            CountNumbers = Value
                        )
                    )
                )
            )
        },
        Text(
            Value(varTextNumbersOnly),
            LookUp(
                varPhoneNumberFormat,
                CountNumbers = Len(varTextNumbersOnly),
                NumberFormat
            )
        )
    )
);
Reset(txt_PhoneNumber);

To show the updated phone number with formatting we need to supply the varPhoneNumber variable to the text input.

Write this code in the Default property of the phone number card…

varPhoneNumber

…and make sure the phone number text input has this code its Default property.

Parent.Default

Go ahead and give the phone number field a try. It now applies formatting as you type the number.

Submit The Contact Form

After a contact name and phone number are input the recruiter submits the form to save the data. Insert a new button at the bottom of the form with the text Submit.

Use this code in the OnSelect property of the button to submit the form.

SubmitForm(frm_Contact)

Once the form is submitted we want to store the saved record in a variable and change the form to Edit mode.

Write this code in the OnSuccess property of the form.

Set(varContactCurrent, frm_Contact.LastSubmit);
EditForm(frm_Contact);

When the form switches to edit mode it won’t show any value unless we tell it what to display.

Use the varContactCurrent variable in the Item property of the form to show the record we just saved.

varContactCurrent

Edit An Existing Contact Phone Number

The recruiter needs the ability to select a contact and change their phone number.

Update the OnSelect property of the Contacts menu button code to include an EditForm function at the top. This will allow the recruiter to edit contact information

EditForm(frm_Contact); 
Set(varContactCurrent, ThisItem);
Set(varPhoneNumber, ThisItem.PhoneNumber);

Test the navigation menu by clicking on each contact name in the list. As we do this the form will show the contact’s information.

Add A New Contact Phone Number

Recruiters must also be able to a add new contact to the app. Insert a new button at the bottom of the navigation menu with a transparent fill and the text New Contact.

Write this code in the OnSelect property of the button to set form to new mode which creates a new record upon submission.

NewForm(frm_Contact);
Set(varContactCurrent, Blank());
Set(varPhoneNumber,Blank())

After adding a new contact their name will be included in the navigation menu on the left.

Hiding The Phone Number Format Text Input & Slider

Before publishing our app the last thing we need to do is hide the phone number length slider and the phone number format text input. We don’t want a user to interact with these controls because it would break the app.

Select both controls and set their Visible property to false.

false

The finished contact form should look like this.

Questions?

If you have any questions about Power Apps Phone Number Formatting In A Form (Input Mask) please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.