Skip to main content




Applies only to Traditional Web Apps
Service Studio version:

Character Count

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • We’ve been working on this article. Please let us know how useful this new version is by voting.

    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.


    Property Description
    InputWidgetId (Text): Mandatory The Input widget name that counts the characters.


    • MyInput.Id - Counts the characters in the MyInput input widget.
    Limit (Integer): Mandatory Character count limit. This value should be the same as the maximum length of the Input widget.


    • 180 - Sets the maximum number of characters a user can enter into the Input widget to 180
    IsDescending (Boolean): Optional Defines whether the count is ascending or descending.


    • False - The count goes from 0 to the value set for the Limit property
    • True - The count goes from the value set in the Limit property to 0. This is the default setting.
    • Was this article helpful?