Prevent Special Characters In PowerApps Forms

Introduction

Recently I came across a use case, where there needs to be restricting special characters in one of the multiline text fields in Power Apps. The description field should contain only numbers, letters, and spaces and no special characters.

In this article, let us see how we can achieve this. We are now trying to build a canvas app, with the SharePoint list as Data Source. For simplicity, In this case, the SPO list has only 2 fields,

• Title
• Description.

My use case is to have in the canvas app, the ‘Description’ field should not have any special characters.

Step 1

Go to Power Apps maker portal https://make.powerapps.com

Step 2

Create a canvas app based on the ‘Tablet’ layout.

Step 3

You might be getting a screen to create a form, or create a gallery just like below. You can skip for now.

Step 4

Since we are connecting to the SPO list, let's try connecting to the SPO list using data.

Step 5

Select the ‘Data Tab’ by selecting the ‘Burger’ menu.

Step 6

Select the ‘SharePoint’ data source.

Step 7

Select the SharePoint site, where the SPO list is being hosted. In this case, I am selecting MyDevSpace, where I have created the ‘MySamples’ list.

Step 7

Validate the Data tab and your list should appear there. In my case, it is the ‘MySamples’ list.

Step 8

Insert the form from the gallery and attach the data source. Modify the form to have the fields in the vertical format.

Step 9

After attaching the data source, you may have your fields in horizontal format. Unlock the fields and set the property ‘Width fit’ to ‘On’. By default, it is off. This will help in arranging the data cards. Please refer to the below screen capture for reference.

Step 10

Create 2 buttons at the bottom, and modify the configuration to show as ‘Cance’ and ‘Submit’.

Cancel Button: Set the ‘OnSelect’ property to ‘Reset the form values’.

Submit Button: Submit the values to form.

Step 11

Insert a label and put this underneath the description. Rename the control as ‘lblWarning’.

Step 12

Set the ‘Visible’ property to IsMatch(DataCardValue2.Text,".[\\"&Char(34)&"/<>[!@#$%^&()].](mailto:!@#$%^&()].*)")

Here the ‘Description_DataCard1’ has a text property that holds the text called ‘DataCardValue2’.

Following is the screen capture of the warning message visible property.

IsMatch(DataCardValue2.Text,".*[\\\"&Char(34)&"/<>!@#$%^&*()].*")

Step 13

Update the display mode property of the ‘Submit’ button.

Submit à DisplayMode,

If(
 !lblWarning.Visible,
 DisplayMode.Edit,
 DisplayMode.Disabled
)

Step 14

Save and publish the form.

Validation

Step 1

Open the form from the maker portal and search for the app ‘MySamples’.

Step 2

In the description enter the special character like / “!@ you should see an error message and the submit button to be disabled. Once the special characters are removed the submit button is enabled.

Step 3

Once special characters are removed, the submit button is now enabled.

Please note that you can modify the regular expression in the ‘IfMatch” condition according to your needs. Below is the screen capture for reference.

IsMatch(DataCardValue2.Text,".*[\\\"&Char(34)&"/<>!@#$%^&*()].*")

References

• https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-ismatch
• https://powerusers.microsoft.com/t5/Building-Power-Apps/Validation-for-Special-Characters/td-p/633108