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.
Important: This tutorial shows how to apply phone number formatting in an Edit Form. If you are using the Patch form method instead I’ve built a phone number input mask component you can easily insert into your own apps. The reason I am showing you how to make it for yourself is components cannot be placed inside Edit Forms. |
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.
FullName | PhoneNumber |
Alice Lemon | 204-000-2929 |
David Johnson | 309-199-2992 |
Sarah Green | 204-567-3040 |
Roger Sterling | 345-304-0500 |
Leanne Davies | 204-594-9393 |
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.
Country | Example | NumberFormat |
Canada | 204-998-8344 | ###-###-#### |
US | (204) 998-8344 | (###) ###-#### |
United Kingdom | +44 1234 567890 | +## #### ###### |
Japan | (03)-4567-1234 | (##)-####-#### |
India | +91 0123 456789 | +## ####-###### |
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.

Did You Enjoy This Article? 😺
Subscribe to get new Power Apps articles sent to your inbox each week for FREE
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.
As always – great examples. Keep up the great work. Personally I would also have liked a more detailed explanation to the formatting with the onChange property and may I make a suggestion to add links to the appropriate function page in the Power App docs.
Richard,
I agree, the OnChange code is very complex and I did not make much of any attempt to explain it. It’s a big deviation from my normal blogging style; making the simplest explanation possible and ensuring folks understand what they are building. I think my previous article does a better job of it… https://www.matthewdevaney.com/powerapps-phone-number-formatting-for-any-country-input-mask/
In the next 1-2 weeks I will publish a component so you don’t have to create this for yourself. Stay tuned.
Also, what did you mean by “link to the appropriate function page in the Power Apps docs.” Can you please clarify this comment?
Try this code. It’s easier to understand and do not need a slider ( use it on the “on change” propriety of the text box on the phone number card):
ClearCollect(TempFormatedPhoneNumber,”);
ClearCollect(PositionOfPhoneDigit,1);
//Desired format
Set(DesiredFormat,‘###-###-####’);
Set(strPhone;Concat(
MatchAll(
txt_PhoneNumber.Text,
Match.Digit
),
FullMatch
));
ForAll(Sequence(Len(DesiredFormat)),
If(Mid(DesiredFormat,Value,1) = ‘#’,
//collect number
Collect(TempFormatedPhoneNumber,Concatenate(Last(TempFormatedPhoneNumber).Value,Mid(strPhone,Last(PositionOfPhoneDigit).Value,1)));
Collect(PositionOfPhoneDigit,Last(PositionOfPhoneDigit).Value+1),
//collect symbol
Collect(TempFormatedPhoneNumber,Concatenate(Last(TempFormatedPhoneNumber).Value,Mid(DesiredFormat;Value,1)))));
//Final number formated
Set(varPhoneFormatado,Last(TempFormatedPhoneNumber).Value);
Reset(txt_PhoneNumber)
Josdeyvi,
Thank you for providing your alternate method.
I was not successful at using the OnChange property of the text input. When I typed it did not always immediately recognize a keypress event even with the DelayOutput property set to false. That is why I introduced the slider!
Can you confirm you have a working input mask without the slider?
Yes, it shows the formated number at the end, after the user type all numbers and press a button to save. In my case it is ok. In fact, using a slider didn’t work for me, since the app change of that value didn’t trigger the ‘on change’, only when I change it by hand. I think it can be an issue with the PowerApp for Teams, perhaps.