Components for working with text

In this section, we will tell you how to display text and add a text entry field. We'll also tell you which components you can use to change text.

Display text

Use the view.text component to display text in the task interface. In the content property, insert the required text or specify a component with the data.* type that returns the text.

To use the text from the input data, use the data.input component.

View example in the sandbox

If you want to insert formatted text, see the instructions and samples in the Text formatting section.

Change text

To change the text, such as all uppercase letters or insert a variable value, use the following components:

  • helper.text-transform: Changes the text case. To transform the text, use the transformation property with the appropriate value:
    • uppercase: Convert all letters to uppercase.
    • lowercase: Convert all letters to lowercase.
    • capitalize: Convert the first letter of the text to uppercase and all the subsequent letters to lowercase.

    View example in the sandbox

  • helper.replace: Lets you replace some parts of the string with other strings. To do this, use the find property for the replaced text and the replace property for the replacing text.

    View example in the sandbox

  • helper.join: Joins multiple strings into one string, separating them with spaces or commas.

    View example in the sandbox