PowerApps - PCF - Input Formatter With Regular Expression

Overview

In Power Apps, we can build custom Power Apps Code Components using PowerApps Component Framework (PCF), which can be reused in Canvas or Model driven apps.

Please note, to enable code component in PowerApps, these two settings needs to be enabled.

1. Enable setting on Environement: Admin Center >> Select Environement >> Settings >> Product >> Features >> "Power Apps component framework for canvas apps"
2. Enable setting on Canvas Power App: Select Power App >> Edit App >> Settings >> Upcoming features >> Preview >> Components

As a continuous learning activity, while exploring PCF, I realized a need of one such custom PCF code component which would be useful in both canvas and model driven apps and would provide flexible validation feature with cusotm styling. So, I developed it and now sharing it as a “Managed Solution” with you all so that hopefully you would also find it a very useful and value addition component for existing and new applications.

PCF Component Details

Below are the PCF Code component details:

Name: Input Formatter with Regular Expression

Purpose: The benefit and advantage of this component is to dynamically apply validation pattern to HTML5 input control with the help of custom regular expression. Along with this, it also provides some masked input types like “Date”, “DateTime”, “Time”, “Password”. Custom CSS Styles provides freedom to apply attractive styles as per your custom design and branding. For ex: If the control is marked as Required, then input box border can be shown in red color just to highlight invalid input. This code component solution is developed and distributed considering both Citizen developer and Pro developer use case scenarios. It is very simple to use and configure.

App Support: Canvas and Model-driven.

Environment: Dataverse (as Solution need Dataverse Database).

Power Apps License: Standard.

Browser and Device Support: Supported in all latest and modern browsers like Chrome, IE/Edge, Firefox, Safari, Opera and also modern mobile/tablet devices (tested in android device).

Github Managed Solution Url:https://github.com/shrirampophali/MyPowerAppsPCFControls/blob/master/ManagedSolution/CustomPCFInputTextFormatterSolution.zip

This PCF Component is also published in PCF Gallery: https://pcf.gallery/input-formatter-with-regular-expression/

Now let’s start understanding how we can use this component, with the help of step-by-step instructions.

How to import solution?

Step 1

Download the solution from above Github URL and recommend you to first import into your any test or developer Power Platform Environment for verifying and testing purpose.

Step 2

After import is successful, Publish all customizations of solution.

Step 3

Imported solution settings will look like this.

How to add component in Canvas App?

Step 1

Create a new canvas app for testing purpose and click on Insert “+” icon in left navigation and click on “Get more components”

Step 2

In Code tab, select code component and click on Import

Step 3

After import, Code component will appear in Insert section. Now code component is ready to be used in Canvas App.

For understanding purpose, I prepared one sample canvas app where I tried to demonstrate multipurpose use of code component.

In Image 8, you can see how component properties are configured for “Email” pattern.

Following are the properties and its purpose.

Property / Label	Purpose
formatTypeProperty “Format Type”	For selecting input format type from optons “Custom Pattern”, “Date”, “DateTime”, “Time”, “Password”.
CustomFormatTextProperty “Regular Expression for Custom Pattern”	For defining regular expression for format type “Custom Pattern”.
CustomFormatTextMessageProperty “Message for Custom Pattern”	For adding placeholder text in case of format type as “Custom Pattern” or “Password”.
MandatoryProperty “Required”	For marking input field as required or not. If Required, then Css style from “InputBoxRequiredCssStyleProperty” property will be applied for required and invalid data. For valid data “InputBoxCssStyleProperty” Css style applied. If not Required, then default Css style “InputBoxCssStyleProperty” will be applied.
InputBoxCssStyleProperty “Input Box Css Style”	For applying Css style as default.
InputBoxRequiredCssStyleProperty “Input Box Required Css Style”	For applying Css style if input data is required or if data is is invalid.
OutputValue “Output Value”	No Input needed here. This is Output value of input field data. So, if any additional validation to be applied on any submit button click event then this property value to be used.
IsValid “Is Valid”	No Input needed here. This tells whether input data is valid or not. It returns true/false. This can be used to apply additional validation on any submit button click event.

 Table 1

Here are the sample property values from example shown in Image 8.

Property	Example
formatTypeProperty	Custom Pattern
CustomFormatTextProperty	^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$
CustomFormatTextMessageProperty	Enter Email
MandatoryProperty	On
InputBoxCssStyleProperty	width: 200px;height: 50px;padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid black;border-radius: 16px;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;font-size:20px;
InputBoxRequiredCssStyleProperty	width: 200px;height: 50px;padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid red;border-radius: 16px;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;font-size:20px;
OutputValue	-
IsValid	-

Table 2

Here are values of Format Type Property:

This is another example of how “Date” masked type can be used. Remember “Regular expression” is used only for “Custom Pattern”.

After all configurations done, then save, publish and run the app. For example, sample app demoed here looks like this for Mobile and Web devices.

Image 11.1 (Mobile view)

In this canvas app demo, there are labels shown below each field. They displays the OutputValue and IsValid property value for each component, once any input is entered.

How to add component in Model-driven App?

In Model-driven app, component control can be added to specific entity column.

Step 1

In this example, Code component control is added to “SIC Code” column of Account entity main form, from classic view.

Step 2

Configuration of properties are done like this. Here I used Regular expression as “^([0-9]{4})$” to validate SIC Code as “4 digit”. Please do remember to save and publish changes.

Step 3

When Model-driven app is opened, and any person account record is selected then “SIC Code” column will now look like this.

If you notice here, the entered SIC code is valid (for ex: exact 4 digits) and hence component CSS style stays as default.

And in this case, the entered SIC code is not valid data (for ex: more than 4 digits) and hence component CSS style is applied which turns it to red, to just indicate/highlight invalid data.

This is how we can use code component in Canvas or Model-driven app.

Stay safe stay healthy!

Happy Learning, Anywhere!