Skip to main content

Text Step

Text Element

The text step allows users to input text to specific regions of the design. Text has a number of different configuration options that allow for a wide variety of use cases. We'll list each with a brief description and code example below.

Selecting a font​

The base option type for a text step is the Font Asset. After configuring an option with multiple font variants in the hub you may select a specific font by passing the corresponding variant to the selectVariant function.

This function is asynchronous as it involves loading of an asset and some pre-processing calculations. Please await the result before allowing the user to select other variants.

await textStep.selectVariant(variant);

Getting available colors​

The text step also allows you to select a color for the text. You can get a list of available colors by calling the getAvailableColors function. These are the colors configured on the step in the workflow editor. This allows you to specify a list of colors that are appropriate for the design while preventing the user from adding colors that would not work. The return value is a list of color defnition objects that tell you the fill color and any additional spot color information if relevant.

const colors = textStep.getAvailableColors(variant);

Setting the fill color​

Once you have a list of available colors you can select one by calling the setFill function. Please await the result before allowing the user to select other colors.

await textStep.setFill(color);

Getting the current fill color​

At any time you can get the current fill color of a text step by calling the getFill function.

const fill = textStep.getFill();

Setting the text​

To set the text of the step you may call the following function. The behavior of this call is heavily configurable via the text step in the workflow editor.

textStep.setText("The quick brown fox jumps over the lazy dog");

The return type looks like the following:

{
    "input": "", // The text that was set.
    "helperData": { // Data that may be useful in the construction of a helper message.
        "charactersRemaining": 0, // Nullable. The amount of characters remaining, assuming the step has a character limit.
    },
    "errorData": { // Nullable. Data that may be useful in the construction of an error message.
        "blockedProfanity": false, // Nullable. Whether the entered text has triggered the profanity filter.
        "doesNotFit": false, // Nullable. Whether the text does not fit in the available space.
        "hitCharacterLimit": false, // Nullable. Whether the text has gone over the character limit for this step.
        "illegalMultipleLines": false, // Nullable. Whether the text needs to break over multiple lines but is not allowed to by configuration.
    },
}

Getting the current text​

At any time you may get the current text of the step by calling the following. This will return the last valid text that was set by a previous call to setText or the default text otherwise.

const text = textStep.getText();

Advanced Concepts​

The text step has a massive amount of configuration available to you. We'll list some of the more advanced concepts below & link the relevant documentation on our support site to help you get started.

Replaceable Text​

The text steps allows for a feature referred to as 'replaceable text'. When active, the input text replaces a substring of a larger piece of text configured in the workflow step. This can allow the workflow creator more control over the message.

Sometimes you may want to allow the user to switch between modifying the entire message or just the configured substring. To do this you may call the following function.

const value = checkbox.checked;
textStep.setFullTextCustomization(value);