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.

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

Add a text entry field

To add a text entry field, use the field.text component for single-line text and field.textarea component for multi-line text.

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

• 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

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

  View example

Last updated: August 2, 2023