Power Apps Phone Number Input Mask Component FREE Download

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-phone-number-input-mask-component-free-download/. Author: Matthew Devaney.

Power Apps Phone Number Input Mask Component FREE Download Posted by - Matthew Devaney on - March 29, 2022 6 Comments 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: Property Name Type Description InputMask Input

A 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 Output

An unformatted text string with all digits in the phone number Text Output

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: "##### ######" } ) Code language: CSS ( css ) 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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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 M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps