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 –

And you want to dynamically check the length as you type to see how much is remaining

And maybe also add some validation like disabling the button if the limit is reached

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“
   
   
   
   
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.
   
   
   
   
3. And finally, a Submit button which will be disabled if the Text size exceeds the limit.
   
   

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)
   
   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 –
   
   
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
   
   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 –
   
   
   
4. Finally, we’ll go to the Submit button and set the Display Mode property of it to the below
   
   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
   
   
   
   

Execution

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

I’ve also created a YouTube video demonstrating the same –

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!!