Smart Phone Number Formatting with a Power Apps Component

Collecting phone numbers in a canvas app often leads to messy data if users enter numbers in varying formats. A phone number input mask solves this by automatically formatting the digits as the user types. This article introduces a lightweight component that provides both a single‑mask style and a prefix‑based multi‑mask mode, and shows you how to integrate it into your app.

The component is available from the Power Apps Community gallery and can be imported as a standard canvas component.

Why use an input mask for phone numbers?

Without a mask, users might enter:

5551234567
(555) 123-4567
555-123-4567

You then need to handle all these variations in your data layer. An input mask constraints the entry to digits only and inserts formatting characters (spaces, dashes, parentheses) automatically. This gives you clean, uniform data and a better user experience.

Understanding the component’s custom properties

The component builds on a standard Text Input control and exposes four custom properties that you can configure from the host app. To avoid confusion with the built‑in Format property, we’ll use the following names:

Property	Type	Purpose
`PhoneMask`	Text	A single mask pattern, e.g. `"(###) ###-####"`
`PatternTable`	Table	A collection of prefix‑pattern pairs for multi‑format countries
`CleanNumber`	Text (output)	The raw digits without formatting
`DisplayNumber`	Text (output)	The formatted phone number that appears on screen

When PhoneMask is empty, the component reads PatternTable to determine which mask to apply based on the first few digits of the entered number.

Example 1 – Single format (US style)

Set the PhoneMask property of the component to a string where # represents a digit.

powerfxConfigure single mask

PhoneMask: "(###) ###-####"

When a user types 5551234567, the control instantly displays (555) 123-4567. The CleanNumber output will contain 5551234567 (no formatting), ready to be stored in your data source.

Example 2 – Multiple formats by prefix

In some countries the phone number structure changes depending on the area code or service type. The component supports this via the PatternTable property.

Suppose you need to handle the following UK‑style patterns (fictional but representative):

Numbers starting with 02 → 02# #### ####
Numbers starting with 07 → 07### ######
All others → ##### ######

Set PhoneMask to blank, and fill PatternTable with this table:

powerfxMulti-format pattern table

PatternTable:
Table(
  { Prefix: "02", Pattern: "### #### ####" },
  { Prefix: "07", Pattern: "##### ######" },
  { Prefix: "",   Pattern: "##### ######" }
)

When the user enters 02071234567, the prefix 02 matches and the format ### #### #### is applied, showing 020 7123 4567. For 07700900000 the mask becomes 07700 900000.

The trailing empty‑prefix row acts as a catch‑all for any number that doesn’t start with 02 or 07.

Real‑world scenario: Appointment booking form

Imagine you are building a patient intake screen that captures a name and a contact number. You want to store the raw digits in the database but show the number in a friendly format on screen.

Add the component to the screen (you can import it from a .msapp or component library).
Rename it to PhoneInput.
Set PhoneMask to "+##-###-###-####" for a simple international format, or use PatternTable if the app serves multiple regions.
Bind the Text property of a label (or the Default property of a data card) to PhoneInput.DisplayNumber.
Use PhoneInput.CleanNumber when writing to your data source, for example with a Patch call.

powerfxSaving the raw number to a SharePoint list

Patch(
  Appointments,
  Defaults(Appointments),
  {
      Title: txtName.Text,
      ContactNumber: PhoneInput.CleanNumber
  }
)

Limitations and workarounds

It’s important to know that Power Apps components cannot be placed directly inside Galleries or Edit forms. If you need this functionality in a form, you have two options:

Use the component on a separate canvas and submit the raw value to the data source via Patch or SubmitForm (the example above uses Patch).
Recreate the masking logic inside the form using the Text Input control with a combination of Update and Text properties. This is more work but keeps the mask inside the form card.

Also, the component expects the # character as the digit placeholder. Any other character (like 0 or X) will be treated as a literal formatting symbol.

Common mistakes

Mistake	Result
Leaving `PhoneMask` non‑blank when using `PatternTable`	The table is ignored and the single mask is used
Using spaces instead of `#` in the mask	Spaces are treated as formatting characters, the digit count may be wrong
Forgetting to account for country codes or trunk prefixes	The mask may not match the expected number length
Expecting the component to work inside a `Gallery`	Not supported – you must use the workarounds above

Final recommendation

This phone‑mask component is a quick way to enforce consistent number formatting without writing complex regular expressions. For simple single‑country apps, the PhoneMask property is all you need. For multi‑format scenarios, the PatternTable gives you the flexibility to adapt to different dial plans.

If you need the mask to be part of a standard Edit form, plan to build the formatting logic directly into the card using a text input and a few Power Fx formulas. The component is best used in free‑form canvases or in data‑entry screens that rely on Patch.

References

Original component download and discussion on the Power Apps Community: Phone Number Input Mask (by Matthew Devaney)
Microsoft Learn documentation for the Text input control
Microsoft Learn reference for the Patch function