1. Home
  2. Tutorials
  3. Creating your App UX
  4. Display Text Input Characters Remaining

Display Text Input Characters Remaining

Using the Calculate Math Expression Action in Dropsource, you can provide your app users with a dynamically updating indicator of how many characters they have left in a restricted character text input. In the example you will work through in this tutorial, the number of characters will update as the user types into a text Element, and the color will change to indicate the length status.

  • Add a text input Element to a page in your app, choosing a Text Field on Android or a Text View on iOS (with Editable/Selectable checked in Properties). Set the Properties to allow a few lines of text and size the Element accordingly. text input properties
  • Add a second text Element to display the updating character count indicator, placing it below the input Element and setting the text initially to indicate the max number of characters you want to allow, for example “150 characters remaining”. Set the text initially to a green color to indicate the user has adequate characters remaining. characters left
  • Add a Page Variable to keep track of the number of characters the user has left – give it a name such as chars_remaining and choose a Java/Swift integer type. chars remaining
  • The display will update whenever the user types in the text entry Element, so select it and open Properties > Events. Add an Action to the Text / Value Changed Event. text changed
  • The app will calculate how many characters the user has entered relative to the maximum allowed, so add a Calculate Math Expression Action. Add a variable to represent the number of characters already typed into the field, naming it characters_in or something similar. Assign it a value by selecting the text entry Element text – length property. In the Expression subtract the variable from your chosen max length (150 in the example). subtract characters
  • Use a Set Value Action to update the Page Variable with the new number of characters remaining, retrieving it from the Action Data for the math Action (if you’re on iOS use the int value from the Action Data). update remaining
  • Now you can build the number of characters remaining into a text string to display. Add a Build a String Action, add a variable to reference the Page Variable. Include it in a string along with some informative text, referencing the variable by enclosing it in double curly braces, for example {{chars_left}} characters left. chars left string
    The string building Action could alternatively reference the math Action output directly, but the math Action returns a Double value on Android, so storing it in an int variable will make the display appearance preferable (e.g. 10 instead of 10.0). On iOS you can just retrieve the int value from the math Action.
  • Display the string indicating the number of characters remaining in the text Element below the input Element, using a Set Value Action. show chars left
  • As an optional enhancement, tailor the color of the text indicator to the number of characters remaining. Add an If Else Action, first testing whether there are less than zero characters left (in which case the user has typed too many). less characters
    • In the True Event, set the text Element color to red. red text
    • In the False Event, add another If Else checking if the number of characters left is less than ten. less ten chars

    • In the True Event for the second If Else, set the text color to gray. grey text
    • In the False Event for the second If Else, set the text to green. green text

If you want to force the restriction on your character input, you can also carry out a test when the user attempts to submit their input, for example to display an error message. You can validate user input in your app in a variety of ways.

Was this article helpful to you? Yes No

How can we help?