Power Apps Portals – Adding field Mask

Currently in Power Apps Portals, we can’t set a mask for a field, which usually improves a lot the UX. In this post I will show you how a simple example to achieve that using JavaScript/jQuery.

In my case, I am adding a whole number field to the Profile page/form.

Download jQuery Mask Plugin

For this example I am using the following jQuery Plugin: https://igorescobar.github.io/jQuery-Mask-Plugin/

• Download the plugin and locate the jquery.mask.min.js file under the “dist” folder
• Create a Web File in your CDS environment
  • Note that by default you can’t upload a .JS file, I am going to rename the file to .ES to bypass this validation (you can also change your environment settings but this is not recommended) – but keep the Partial URL as .JS
  • I am going to set the parent page as Home
  • I am going to set it to be hidden from site map and excluded from search

Adding JS library reference

We need to reference the JS, open your Web Page (content page) and add the following to your HTML “copy” field:

You can also add the above line to the “Tracking Code” Content Snippet, and this would be loaded in every page, in my example this JS would only be loaded in the Profile Web Page.

Adding the mask via JavaScript / jQuery 

Still in your content page, navigate to the Advanced tab and add the following code:

$(document).ready(function () {
       AddWholeNumberMask();
});
AddWholeNumberMask = function()
{
         $("#ollie_wholenumber").mask("00000", { placeholder: "i.e.: 12345" });
};

Result

This is how you will see your mask in the Portal, and the mask will prevent the user from typing non-number fields or more than 5 numbers in my case.

You can reference the below documentation for other masks (date field / money / e-mail / etc): https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

Above I am using a placeholder to indicate the user what the expected format is, but this is optional, I could have the mask just as: $(“#ollie_wholenumber”).mask(“00000”);