Power Apps Phone Number Formatting For Any Country (Input Mask)

Power Apps Phone Number Formatting For Any Country (Input Mask)
Update: March 27, 2022
I’ve written a new version of this article that shows how to implement phone number input masks inside of a Power Apps form.


Input masks are used to restrict the values input into a text field and apply formatting. Phone numbers and zip codes are an example of a data types that benefit from input masking. Each have specific rules about how they should be formatted. Power Apps does not have a feature to format phone number but we can build an input mask ourselves with this method that I’ve hacked together. In this article I will show you how to apply phone number formatting to a Power Apps text field for any country including the US, Canada, UK, Japan and India.

Table Of Contents:
Introduction: Text Input With Phone Number Formatting
Use A Slider To Detect KeyPresses
Define The Phone Number Format
Phone Number Format Examples For Other Countries (Optional)
Update The Phone Number Formatting After Each KeyPress
Input A Phone Number With Formatting Applied




Introduction: Text Input With Phone Number Formatting

We will create a text field to capture a phone number in the format ###-###-####. There will also be instructions on how define your own custom format for a different country. The user is restricted to only typing number values. Formatting is automatically applied each time a new number is typed as shown below.

Use A Slider To Detect KeyPresses

To show a phone number in the proper format we need to update the text input after each keypress. A text input’s OnChange property cannot detect this because it only triggers once the user moves away from it. However, we can use a slider that will immediately update its value based on the length of the text input value and trigger the OnChange behaviour property inside the slider. This technique makes it act more like an OnKeyPress property than an OnChange property.

Open Power Apps Studio and create a new tablet app from blank. Insert a text input and a label with the words “Phone Number” onto the screen.



Next, place a new slider control directly below the text input. We will use it to count the length of the word in the text input as it is being typed.



Use this code in the Default property of the slider to determine the text input length.

Len(txt_PhoneNumber)



When we add numbers to the text input the slider increases and when we remove numbers the slider decreases.

Define The Phone Number Format

We will use another text input field to define the phone number format so it can be easily updated for a different locale in the future. Insert a new text input and label onto the screen as shown below.



Copy and paste this code into the OnChange property of txt_PhoneNumberFormat. This code is quite complex, but what we are doing here is creating a collection to define how the phone number should be formatted at each individual number position.

ClearCollect(
    colPhoneNumberFormat,
    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
                )
            )
        )
    )
)



At this point we can also set a size limit for the phone number text input. Use this code in the MaxLength property of txt_PhoneNumber.

Len(txt_PhoneNumberFormat.Text)



Then type the phone number format “###-###-####” into the Default property of the text input.

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



The default phone number format should appear inside the text as shown below.




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.

CountryExampleNumberFormat
Canada204-998-8344###-###-####
US(204) 998-8344(###) ###-####
United Kingdom+44 1234 567890+## #### ######
Japan(03)-4567-1234(##)-####-####
India+91 0123 456789+## ####-######




Update The Phone Number Formatting After Each KeyPress


As the user updates the phone number in the text input we must determine what formatting to apply after each keypress.



Use this code in the OnChange property of the slider. When a new character is added to the text input we use the MatchAll function to extract only the numbers. Then we apply the formatting we generated using our collection.

Set(
    varPhoneNumber,
    With(
        {
            varTextNumbersOnly: Concat(
                MatchAll(
                    txt_PhoneNumber.Text,
                    Match.Digit
                ),
                FullMatch
            )
        },
        Text(
            Value(varTextNumbersOnly),
            LookUp(
                colPhoneNumberFormat,
                CountNumbers = Len(varTextNumbersOnly),
                NumberFormat
            )
        )
    )
);
Reset(txt_PhoneNumber);



The text input is reset to the value of the varPhoneNumber variable whenever a formatting change is applied.



Use this code in the Default property of the formula.

varPhoneNumber




Input A Phone Number With Formatting Applied

We are done creating the input mask. Test a the text input by typing a phone number and watch it become formatted.

Finally, we should hide the slider, and phone number format label/text input by setting their Visible property to false.

false



Questions?

If you have any questions or feedback about Power Apps Phone Number Formatting For Any Country (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.

Matthew Devaney

Subscribe
Notify of
guest
34 Comments
Oldest
Newest
Inline Feedbacks
View all comments
David McKenzie
David McKenzie
6 months ago

I like the idea, but UK numbers have a number of different masks which makes it a more difficult. I’ll ignore the +44 since this is the international code to dial from outside the UK and is not used when writing numbers unless it is to an international audience (and using +44 means the 0 at the start is not required), and use _ in place of spaces for clarity.
Numbers beginning 01 are 01###_###### (as above but with leading 0 instead of +44)
Numbers beginning 02 are 02#_####_####
Numbers beginning 03 are 03##_###_####
Numbers beginning 07 are 07###_######
Numbers beginning 08 are 08##_###_####
FYI: 01 and 02 numbers are geographic, 07 is mobile phones, 03 and 08 and special rate numbers (fixed rate, freephone etc.)
Would be interesting to see if this method could allow for multiple masks (I suppose the easiest way might be setting the mask text box from a lookup on a collection based on the first 2 characters?)

Joey O'Neil
5 months ago

Great solution Matthew. Thoroughly enjoyed reading this and can’t wait to put it in my Power apps. ?

Adam Toth
5 months ago

I really love the creativity here with this technique. This got me inspired. I built on your concept a bit and created a reusable component from it, and made it available for download on my blog with an explanatory post. I don’t think I can link to it in the comments here.

Paul Rodrigues
5 months ago

Hi Matthew,

Excellent post! I implemented it today. Only thing I came across is that if the user backs out the last digit and places a non number quick it will hold there. Not evetime but sometimes.

I just needed to put some extra logic in the on change of the txtPhone to replace any non numbers in the last character and notify the user they are missing a digit and also add some logic to prevent them submitting until fixed.

Keep of the great work, you are a rock star!
@officepoweruser
#PowerAddict

Paul Rodrigues
5 months ago

Matthew,

This may not be the most elegant solution but it works for my needs. What I did is put this code in the OnChange of the txtPhoneNumer.

The format I am using is (xxx) xxx-xxx

//Remove any letters
Set(
  varPhoneNumber,
  Substitute(
    txtPhoneNumber.Text,
    Concat(
      MatchAll(
        txtPhoneNumber.Text,
        Match.Letter
      ),
      FullMatch
    ),
    “”
  )
);
// Remove other characters
Switch(
  Right(
    txtPhoneNumber.Text,
    1
  ),
  “!”,
  Set(
    varPhoneNumber,
    Left(
      txtPhoneNumber.Text,
      13
    )
  )
)
//Repeat for each character you wish to remove.
Then set focus back to txtPhoneNumber and show a message that a digit is missing. Also I disabled the submission button if all the digits are not completed.

Abdulsalam Garba
5 months ago

I really enjoy reading because it solves my problem and please did you have a youtube channel?

Andrew Forsberg
Andrew Forsberg
5 months ago

Would you please explain “the Default property of the formula”.

Hollis Long
Hollis Long
5 months ago

The issue that I have run into after implementing this is that the template does not stick around when the application is run. I tried setting the default value for txt_PhoneNumberFormat to the desired template, it for some reason will not allow a single number or character of any kind to be entered. I’m not super sure why this is or how to fix it.

Jason Gillman
Jason Gillman
4 months ago

I love this concept, and it works perfectly as described. But I’m wondering how to adapt this for a text input that’s part of an Edit form. The default property for the data card is usually something like ThisItem.Phone and the default for the input control is usually Parent.Default. If you replace either of these with varPhoneNumber, you’re no longer retrieving the existing data represented in the form’s Item property. Any thoughts?

Jason Gillman
Jason Gillman
4 months ago

That makes sense. The problem seems to actually be the line with Reset(txt_PhoneNumber). In a form, that command resets the field to its initial state (blank for a new form, or the default value in an edit form). This occurs with each keystroke, so it’s impossible to actually enter the phone number. Any thoughts on a work around for that?

Teresa Agustin
Teresa Agustin
4 months ago

Hello Matthew, Thank you for the article. Like Jason G, I am using an edit form control. I tried adding the formulas in the OnVisible and Default property of the data card’s text control, but it continues to reset to blank with each keystroke. To confirm, I did navigate away from the form screen and then back in to set the variable. Any other ideas of things we could try? I would love to be able to apply this concept across all of my apps that have edit forms.

Jason Gillman
Jason Gillman
4 months ago

I’ll continue to play with this as well and post on here if I have any breakthroughs. Input masks are so easy to implement in Microsoft Access, it’s a shame Microsoft hasn’t translated that to Power Platform yet!

Cari
Cari
2 months ago

Are you back yet? I really need help making this work. I’ve been able to stop the numbers from being erased (thanks to a comment on here), but the phone number formatting doesn’t change to the Phone Number Format I set ((###) ###-####)). Any thoughts?

Jer Harwood
Jer Harwood
3 months ago

I just came across this and thought, “Cool! I can throw this quickly into a form I’m going to demo today.” I built it on a scratch app so I could see how it worked before putting in my form… and I have the issue some have described within a form, but I’m not using a form. The text input box where you type the phone number resets with every keystroke.

Claudette Mardero
Claudette Mardero
3 months ago

That would have been good to know at the beginning as I also added it to my edit form, and it didn’t work, but The idea is there!
From one Peg City-ite to another! πŸ™‚

Last edited 3 months ago by Claudette Mardero
Steve Myles
Steve Myles
2 months ago

I tried to use this in an edit form but unsuccesful. I then tried a simple format – Text(Value(Parent.Default),”0### ### ###”) (Australian Mobile No.) but still failed. I then removed the existing editform text input box and replaced it with a nes one and the formatting worked. Updated my data card to update from new text box

Patrick
Patrick
3 months ago

Well, I tried this multiple times and it is not working for me.

Every time I enter a character, the slider goes back to zero and my number is erased.

Cari
Cari
2 months ago

Good, because I am having the same issue. When I start typing a number, it;s erased

Jorge
Jorge
3 months ago

I’ve tried this as well as written and the same thing happens to me. The digits automatically erase after they are entered. Also the slider doesn’t start to respond, slide along, until many digits are entered.

Krystal
Krystal
2 months ago

For those still having an issue with the number being erased after each keystroke, I figured out that removing the code Reset(txt_PhoneNumber) from the end of the OnChange property in the slider resolves that issue.

Cari
Cari
2 months ago
Reply to  Krystal

I did this, and the numbers aren’t being erased now, but the phone number formatting doesn’t change to the Phone Number Format I set ((###) ###-####). Any thoughts?