Implement character length validation in a Canvas Power App | Power Platform

Often times, you want to know the size of text entered in a field and want to indicate a user that they need to restrict the text to your specific size, like Twitter. And make sure the user is restricted within the limits. So, I’ve added a button to show that validation –


undefined

And you want to dynamically check the length as you type to see how much is remaining
undefined
And maybe also add some validation like disabling the button if the limit is reached
undefined

Let’s look at how we can implement this in Canvas Power App!

Setup

Let’s get to building this out!

  1. Let’s say you have a Text Input. I’ve simply called it “Message
    undefined
    undefined

  2. Then, I have the Label field called as “CharLength“. This will be a place holder for our counter of characters in the Message textbox.
    undefined
    undefined

  3. And finally, a Submit button which will be disabled if the Text size exceeds the limit.
    undefined
    undefined

Setting Properties

Now, let’s get the properties set to these components so as to validate the character limit

  1. Nothing to set on the Text Input ‘Message’ for this example.
  2. Let’s move to the label CharLength itself. Set the Text handler of the CharLength label control to the following (You can have your own limit)
    undefined
    In the above example, I’ve set the length 60 and then I’m subtracting the length of the Text of the Message.Text (Text entered in Message box) so that as we type on, the remaining value will be shown as below –
    undefined
  3. Now, let’s see the Color property of the text field. It’ll be a visual cue indicating the user that they’ve exceeded the character limit
    undefined
    In the above example, I’ve added a condition to set the color as Red, if the length is exceeded or Black is the length is under the limit and will look something like below –
    undefined

  4. Finally, we’ll go to the Submit button and set the Display Mode property of it to the below
    undefined
    I’ve added a condition, that if the Length of the Message box’s Text goes above the limit, set the Display Mode to Edit i.e. Active or else, Disable. And it will look like below when disabled
    undefined


Execution

This is how it will work when you put this in execution

And that’s it. So you can use this validation as you want. In place of the button, you could have something else put up.

Hope this helps!

Here are some posts on Canvas Power Apps you might want to check –

  1. Logged In User details in a Canvas Power App
  2. Implementing Exit app, Logout and Confirm Exit features in a Canvas Power App
  3. Get N:N records in a Canvas Power App using Common Data Service connector | Power Platform
  4. Variables in Canvas Power Apps | Global and Context
  5. Correctly connect to an Excel file in a Canvas PowerApp
  6. Adding a Canvas PowerApp to Teams
  7. Sending Image from Canvas PowerApps to SharePoint Document Library using Flows

Thanks!!

2 thoughts on “Implement character length validation in a Canvas Power App | Power Platform

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.