Using Input Masks in Model Driven Apps for PowerApps Text Input Uppercase
While canvas apps come with their own array of features, model driven apps stand out with the unique capability of incorporating a masked input control. This article delves into the nuances of applying this specific feature. But before we venture into the step-by-step process, let’s get an understanding of its practical application with a brief example.
Example Requirement
Imagine an organization that maintains an employee database, storing crucial details like the UK national insurance numbers. These numbers typically follow a format: 2 letters, 6 digits, and then a final letter (e.g., QQ 12 34 56 A). In our guide, we’ll create a form embedded with a masked input control tailored for this data pattern.
Implementing the Input Mask on a Form Field
Kickstarting our process, we first need to design our form. While the Power Apps modern form designer lacks support for input mask control, a switch to the classic designer readily solves the problem.
Within the confines of the classic designer, pinpoint your ‘national insurance’ field. Upon selection, head over to the ribbon bar and hit the ‘Change properties’ button. This action will usher you into the ‘Field properties’ dialogue. From here, navigate to the controls tab and click on the ‘Add control’ link. Your target? The ‘Input Mask’.
Defining the Input Mask
Post adding the input mask control, it’s time to detail the mask using the following characters:
- 0 – Digit
- 9 – Digit or space
- # – Digit, sign, or space
- L – Letter
- I – Letter or space
- A – Alphanumeric
- A – Alphanumeric or space
- < – Converts succeeding characters to lower case
- > – Converts succeeding characters to upper case
- | – Disables case conversion
- \ – Turns any character into a literal
Given our example, the mask pattern would look like this:
>L>L 00 00 00 >L
Here, we’re leveraging the ‘greater than’ symbol to ensure that any character keyed in by the user is automatically converted to uppercase. Moreover, ensure that the ‘web’ radio button is aligned with the ‘input mask’ control.
Viewing the Input Mask in Action
Upon saving, publishing, and executing the form, you’d note that the control dutifully enforces the input mask, guiding users to stick to the right NI number format.
Conclusion
The model driven apps in PowerApps grant us the flexibility to set up input masks for single line text fields. This guide broke down the process, showcasing its implementation using the classic designer. For those seeking a deeper dive, feel free to explore the official documentation on PowerApps model-driven apps.
Need assistance or have more technical queries? Don’t hesitate to contact us. We’re here to help, and yes, our services are chargeable.
