Setting up the Input Mask UI Control in Dynamics 365

Setting up the Input Mask UI Control in Dynamics 365

Dynamics 365 On Premise and Online customers have a plethora of UI controls available to them. We have blogged before about some of our favorite UI controls, but we wanted to take some time to walk through how to configure the Input Mask UI control on a field in Dynamics 365.

The input mask control is an extremely useful way to guide your users to enter the correct data in a field. Let’s take a look at what this control looks like when it has been applied to the field. In the below image, Business Phone has the Input Mask control applied, while Mobile Phone does not.

Business Phone has an Input Mask control applied. Mobile phone does not.
An example of one field with the Input Mask control applied.
When should I use the Input Mask?

You can use this control on any text field on a form. An excellent use case is illustrated above – formatting a phone number. But, you can use this for any single line of text field where you need to input a specific format to ensure streamlined data input and formatting. In prior iterations of Microsoft CRM, this sort of requirement needed JavaScript applied to a form. Today, it’s a simple configuration using this powerful UI control!

Input Masks increase the integrity of your data. How? By storing the data internally in the exact same format you can trust that your data is meaningfully unique. For example, formatting your phone numbers in the same manner avoids data headaches down the line.
Which data would you prefer to work with: (A) or (B)?
– Data Group A: 555-123-4567, 1-555-234-5678, (555)345-6789, 555.456.7890
– Data Group B: (555)123-4567, (555)234-5678, (555)345-6789, (555)456-7890
Sounds great! How do I configure it in Dynamics 365?

Great question! Today (August 13, 2020), the Input Mask must be configured using the Classic Solution Designer. If you’re using Dynamics 365 Online, you’ll need to toggle back to the Classic Solution Designer to apply this control (for now – PowerApps keeps changing and offering more UI controls. I’m sure in the future this one will be available there). All of your field controls will be applied to the Form.

Here’s how to apply the Input Mask Control:

1. From the Classic Solution Designer, open your Entity.

2. Open the Form on the Entity.

Open your Entity, then open the Form.

3. From the Form designer, open the field you want to apply a custom control on (in this example, we will use Main Phone on the Account).
4. Click the Controls tab.

From a field on a form, click the Controls tab.

5. Click Add Control… and select Input Mask from the list that appears in a popup window, then click Add.

Select Input Mask from the list of available controls.
Select Input Mask from the list of available controls.

6. Set your Scope by selecting Web, Phone and/or Tablet from where you’d like this control to appear.

Set scope: Web, Phone and/or Tablet
Set your scope for this control.

7. In the Property box, click the pencil icon to define the mask.

Define the mask
Next, define the mask!
HOW TO! Here’s How to Define Your Mask.
You can use a combination of the following characters to define the mask for your field:
0 – Digit
9 – Digit or space
# – Digit, sign, or space
L – Letter
l – Letter or space
A – Alphanumeric
a – Alphanumeric or space
< – Converts characters that follow to lowercase
> – Converts characters that follow to uppercase
| – Disables case conversion
\ – Escapes any character, turning it into a literal
All others – Literals

8. In the new window that opens, you will configure the Mask property. Select the option to Bind to a static value then enter your mask using the characters in the yellow box above. In our example, we want to format our phone number like this: (000)000-0000. Click OK.

Configure the mask
Configuring our text field to be formatted for a phone number.

9. Back on the Field Properties box, click OK.
10. This takes you back to the Form editor. Save your changes then Publish.

Now it’s time to test and verify! Let’s head over to an Account in Dynamics 365 and see what our Main Phone field looks like:

Formatted phone number!

Success! Our Main Phone is now formatted, helping to show my users what data should be entered AND ensuring some data integrity in my system.

Happy Configuring!

I hope this helps you with configuring the Input Mask control on a field in Dynamics 365. If you try this out and need some help, feel free to reach out to me. You can fill out our Contact Form with details about what you’re working on, or email me directly at [email protected].

Heidi Neuhauser
Posted on:
Heidi is a Partner at Reenhanced. She is a Microsoft MVP for Business Applications and is passionate about user adoption, out-of-the-box configuration tools, Dynamics 365 and the Power Platform.
Post author