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”);
Oliver Rodrigues 