Power Apps Phone Number Input Mask Component FREE Download

Table Of Contents:
• Description
• Phone Number Input Mask Properties 
• Example - Single Phone Number Format
• Example - Multiple Phone Number Formats
• Limitations
• Download 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

Phone Number Input Mask Properties

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

Example – Single Phone Number Format

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

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.