Phone Number Input Mask 04-21-2022 20:18 PM

[mdevaney]

Description

This Power Apps component is a simple text input that applies formatting to a phone number after each keystroke.  The text input only allows numbers to be entered.

Here's how it works:

• The app developer defines the phone number format as "(###) ###-####"
• A user opens the app and types a phone number as 2049876543
• The text input shows (204) 987-6543

Give a Thumbs Up if you like the component to make it easier for others to find

Follow me on Twitter for Power Apps tips & articles https://twitter.com/mattbdevaney 

Send me a message if you find any bugs and I will fix them as quickly as possible


Phone Number Input Mask Properties

The Phone Number input mask shares the same properties as a Text Input along with 4 new properties.

InputMask (input property) - A text string that defines the phone number formatting to be applied

InputMaskMultipleFormats (input property) - A table that defines multiple phone number for countries with more than one phone number format.  To use this property the InputMask field must be blank.

PhoneNumber (output property) - A unformatted text string with all digits in the phone number

Text (output property) - A text string with the formatting phone number.


Example - Single Phone Number Format

To format a phone number for a country in the table below use the following values InputMask property.

Country	Example	InputMask
Canada	204-998-8344	"###-###-####"
US	(204) 998-8344	"(###) ###-####"
United Kingdom	+44 1234 567890	"+## #### ######"
Japan	(03)-4567-1234	"(##)-####-####"
India	+91 0123 456789	"+## ####-######"

Example - Multiple Phone Number Formats

Here's how UK phone number formatting works:

Numbers beginning 01 are 01### ######
Numbers beginning 02 are 02# #### ####
Numbers beginning 03 are 03## ### ####
Numbers beginning 07 are 07### ######
Numbers beginning 08 are 08## ### ####

All other phone numbers are ##### ######

Use this code in the InputMaskMultipleFormats property to define phone number formatting.  The InputMask property must be blank in order for multiple formats to appear.

Table(
    {
        Prefix: "01",
        Format: "##### ######"
    },
    {
        Prefix: "02",
        Format: "### #### ####"
    },
    {
        Prefix: "03",
        Format: "#### ### ####"
    },
    {
        Prefix: "07",
        Format: "##### ######"
    },
    {
        Prefix: "08",
        Format: "#### ### ####"
    },
    {
        Prefix: "",
        Format: "##### ######"
    }
)

Limitations

Power Apps components cannot be used in Galleries and Edit Forms.  To use this component you must create your own form and submit data using the PATCH function.  If you want to have this functionality inside of an Edit Form check out this article I wrote which shows how to build this components functionality from scratch.

Link: https://www.matthewdevaney.com/power-apps-phone-number-formatting-in-a-form-input-mask/

[Anonymous]

@mdevaney I am having some trouble importing this component into a Power App, or a component library. Other community created components i have downloaded were imported successfully, but i get the following error message when trying to import your component; "to import from component libraries, save your library files to the cloud and select "Get more components" from the insert pane."

Is it possible that your attached component file was for the component library it was created in and not just the component itself?

I am relatively new to Power Apps, so a solution to this error would be greatly appreciated.

[TessJane]

This does not work on an Edit Form, and the link you posted, that doesn't work at all.  While typing, slider doesn't move, nothing happens

[iagorah]

How can we clean/reset the component after patch?

[subsguts]

Agree that this doesn't address the fact that the default cannot be a varPhoneNumber if you are pulling it from a database where this is stored.  Trying to figure out how to get this to work.  I assume the varPhoneNumber will have to be set to the Phone Number stored in the data source, but still haven't gotten this to work consistently.    

[subsguts]

I believe you wherever you load your data, in my case a gallery, you have to set the varPhoneNumber equal to whatever is in the data source.  I'm still testing, but this appears to work thus far.  I use a global variable that is set to "ThisItem", and then reference it.  So in the OnSelect of my Gallery I have added the following to get the phone number that was saved into the varPhoneNumber, so it defaults correctly as follows.  I have to exercise this more, but believe this is a solution. 

Set(varPhoneNumber,gblSelectedProvider.ProviderPersonalPhoneNumberTXT);

[subsguts]

In my opinion, you'd have to clear the value of the varPhoneNumber.  You might not have to do a reset, but maybe that will be needed as well.