Character Count

You can use the Character Count UI Pattern to display the number of characters a user has entered or has remaining for an onscreen text area.

How to use the Character Count UI Pattern

Prerequisites: You have created an Input widget called MyInput and created a Local Variable called MyInputVariable with its Data Type set to Text.

1. In Service Studio, in the Toolbox, search for Character Count.

   The Character Count widget is displayed.

   

   If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

   a. Go to Module > Manage dependencies.

   b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

   c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

   d. Search for and select the element you want to add, and click Apply.

   e. In Service Studio, in the Toolbox, search for the widget again.

2. From the Toolbox, drag the Character Count widget into the Main Content area of your application's screen.

   

3. On the Properties tab, from the InputWidgetId drop-down, select the Input widget Id you have already created (MyInput).

   

4. In the Limit property, enter the maximum number of characters allowed, for example, 180, and set the IsDescending property to True.

   

   By setting the Limit property to 180, the user can enter up to 180 characters, and by setting the IsDescending property to True, the character count will go from 180 to 0.

After following these steps and publishing the module, you can test the pattern in your app.