Tips for PowerApps-10 Validate form input with RegEx

2022-11-01 | Toni Pohl

Forms are simple. Forms are complex. Both are true depending on the functionality of the form. While you can create forms very quickly with Power Apps, it often takes a lot of time to make them as user-friendly as possible. In this article, we'll look at how we can validate and simplify input using Regular Expressions.

A sample form

When creating a form, one often stumbles upon a few details designed to make it easier for the user to fill out the form. So, hereĀ“s my form with some fields.

image

The form contains a form object bound to a SharePoint Online list. Users should be able to add new items by filling out some fields, and see the status of the created items. There can be workflows behind the form that process the data, such as e.g. the provision of an Microsoft 365 team or similar. Here we only look at the form functionality.

The desired behavior

Typically, a text field allows users to type anything. We want to ensure that only certain characters are taken from the Name text input control. If the user changes the input, the Validation is created with only the allowed characters. That should be the behavior:

RegEx resources

Regular Expression (short: RegEx) are made for checking text. Find articles on using RegEx at Wikipedia-Regular-Expression , ntu.edu.sg-HowTo-Regexe and countless other articles.

To use RegEx in Power Apps, see IsMatch, Match, and MatchAll functions in Power Apps. There are also many other resources to check out like April Dunham's great videos on PowerApps Data Validation and many more.

Ensure that only valid characters are processed with RegEx

In Power Apps we can use the IsMatch, Match and MatchAll functions to check text with RegEx. There are many methods to achieve this. After some research, I found the article Remove characters from strings using Regex in Power Apps of Sancho Harker (alias iAm_ManCat), which seems to work well for my purposes. So I used his method to split the input text character by character, checking each character and adding only allowed characters (see above) to the new output string. In the OnChange event, we have the following code that fulfills our rules:

Set(myteamname, Concat( Split(Trim(TeamName.Text), "" ), 
If( IsMatch(Result, "([A-Za-z0-9 ._+&\-\/()])", MatchOptions.Complete ), Result ) )
);

The IsMatch() function checks each character in the Result (that is automatically generated) from the Split() function against the allowed characters (see below) and adds them to the myteamname variable (that is used to show the result in the Validation label). As a result, myteamname contains only the sanitized text.

image

Develop your RegEx expression

I highly recommend developing and validating your regex in an online service like https://regex101.com or similar. This helped me find errors in the expression, like here.

I used "([A-Za-z0-9 .-_+&()])" as RegEx to allow only text, numbers, and a small list of special characters. In the online editor, I saw the result and why it failed: I wanted to allow the hyphen "-" character. But, ".-_" means a range! As the explanation shows, this means characters from index 46 to index 95 (which e.g. includes : and @, etc.), and not a single character, as we see here.

image

This is why special characters like ":" and "@" are allowed. Only the "#" char was suppressed. With that information, the expression was easy to fix: To include specific characters, we have to add a backslash "\ before it. The new expression then is: "([A-Za-z0-9 ._+&\-\/()])" This makes more sense, as we see.

image

Now the check works as expected, and all "other" special characters are marked. Find more about the meaning of specific chars e.g. here.

Replace invalid characters with placeholder

With that simple one-liner loop above, we can replace invalid characters easily with a placeholder as well. Here, we use an asterisk "*" in the if-then-else parameter:

Set(myteamname, Concat( Split(Trim(TeamName.Text), "" ), 
If( IsMatch(Result, "([A-Za-z0-9 ._+&\-\/()])", MatchOptions.Complete ), Result, "*" ) )
);

As a result, we see the placeholder characters, like here.

image

Validation controls

A good way to inform the user that the entered data has a problem is to change the border color to red. Here, we do this with the same expression, but we add "+$" to check the whole string, and we add a condition that the input field must not be empty:

// BorderColor
If(!IsBlank(TeamName.Text) && (IsMatch(myteamname, "([A-Za-z0-9 ._+&\-\/()])+$", MatchOptions.Complete )),
TemplateLabel.Color, Color.Red)

Other expressions like IsBlank(Parent.Error) and similar can be added to the condition if required. We see that the border color turns red if there are invalid characters included. Otherwise, the color is set to a template color.

image

Other notifications could include an extra error message or warnings. They all work with the same principle. Turn the control on or off depending on the result of IsMatch().

Summary

Working with Regular Expressions in Power Apps allows code reduction and supports validation of text input at runtime. Use it!

Categories: Developer, English, Microsoft365, Office365, PowerApps, Cloud, App, Power Platform

Source: https://blog.atwork.at/post/Tips-for-PowerApps-10-RegEx