Input Masking – Formatting phone numbers in Power Apps

An input mask is a set of rules that specifies the format in which data can be entered in a field. This is really important for fields like phone number or email. Without checking for the correct format, values entered in these fields could become meaningless. There is no out of the box functionality (yet) in Power Apps to implement input masks for text input fields. We will review one such example in this post - formatting phone number fields.

The first step is pretty straight forward: to display a previously entered number in the correct format. This can be easily achieved using the Text function. Let's say there is a text input control (TextInput1) that has 1234567890 as its text. This can be displayed as a formatted phone number in another label using the following expression:

Text: Text(Value(TextInput1.Text), "[$-en-US](###) ###-####")

The next step is to format a number right after it is entered by a user (rather than simply displaying a previously stored number in the correct format). For that set the following properties as shown:

Default: formattedNumber

OnChange: Set(formattedNumber, Text(Value(TextInput1.Text), "[$-en-US](###) ###-####"))

This is how the text input control behaves:

Now, lets take it one step further. Imagine this field is part of an edit form. This has two implications:

• If there is existing data in the phone number field, it should be displayed formatted
• If there is no existing data, the number entered by the user should get formatted after the number is entered

For a text input control within an edit form, the Default property is set, by default, to:

Default: Parent.Default

So what we need is some combination of the two steps listed above so we can display existing data in a formatted format and also format a newly entered value. This can be achieved with the following properties:

Default: If(IsBlank(Parent.Default), formattedNumber, If(changeNumber, formattedNumber, Text(Parent.Default, "[$-en-US](###) ###-####")))

OnChange: Set(formattedNumber, Text(Value(DataCardValue1.Text), "[$-en-US](###) ###-####")); Set(changeNumber, true)

Additionally, we can enforce the number of digits to always be 10. For that, set the Default property the same as above and change the OnChange property as shown below:

OnChange: If(Len(DataCardValue1.Text)=10, Set(formattedNumber, Text(Value(DataCardValue1.Text), "[$-en-US](###) ###-####"));Set(changeNumber, true), If(!IsBlank(DataCardValue1.Text) && Len(DataCardValue1.Text)<>10, Set(errormessage, true); Set(changeNumber, false)))

In the 2nd If condition above, it is important to not only check if the length of the number is not equal to 10, but also check if the length of the number is not equal to 0. This is because if the length is 0 and we try to enforce it to have 10 digits, the user will never be able to blank the number if they want to. Also, the variable errormessage can be used to make an error message visible alerting the user about the phone number not having 10 digits.

With these properties in place, this is how a phone number field within a form behaves:

A similar approach can be used to implement input masking for other fields like email.

Have fun! Get addicted!