Power Apps Phone Number Input Mask Component FREE Download

Power Apps Phone Number Input Mask Component FREE Download
Table Of Contents:
• DescriptionPhone Number Input Mask PropertiesExample - Single Phone Number FormatExample - Multiple Phone Number FormatsLimitationsDownload The Component For FREE




Description

This Power Apps component is available as a free download 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
mdevaney_1-1648520436594.gif

Phone Number Input Mask Properties

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

Property NameTypeDescription
InputMask InputA text string that defines the phone number formatting to be applied
InputMaskMultipleFormats Input 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 OutputAn unformatted text string with all digits in the phone number
TextOutputA 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.

CountryExampleInputMask
Canada204-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.




Download The Component For FREE

Click to here download this component for FREE from the Power Apps Community.





Questions?

If you have any questions about Power Apps Phone Number Input Mask Component FREE Download 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
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
Bill Prater
Bill Prater
1 month ago

This is wonderful! Thanks matt. Have perfect use scenario for this.