Uiflow
ChangelogPartners | Freshworks
Search
⌃K
Links

Create dynamic strings with a String Template

When building an application, you might want to include dynamic text that changes, when users interact with your application. The String Template component enables you create dynamic strings that change in response to events in your application.
By default, the String Template component is equipped with the following nodes:
  • name: Input node to change the value of the variable in your string.
  • output: Returns the completed custom string with the updated variable value.
This page explains how to:

Create a dynamic string

To create a dynamic string using the String Template component:
  1. 1.
    Navigate to the Logic view.
  2. 2.
    Open the Libraries panel, and drag-and-drop the String Template component into your app.
  3. 3.
    Select the String Template component, and open the quick selection State menu.
  4. 4.
    Modify the text as desired.
    Note: Variables are written as ${<variable>}. Each new variable appears as an input node on your component.

Display a dynamic string in your application

Once you create a dynamic string, you can display it in your application. This example outlines how to display the dynamic string as simple text in your application UI:
  1. 1.
    Navigate to the Design view.
  2. 2.
    Open the Libraries panel and drag-and-drop the following components into your application:
    • Text
    • Button
    • Text Input
  3. 3.
    Navigate to the Logic view.
  4. 4.
    Open the Libraries panel, scroll down to the Design References section, and drag-and-drop the following component references into your logic flow:
    • Text
    • Button
    • Text Input
  5. 5.
    Build the following node connections:
    • Text Input getValue > String Template name: Sets the String Template variable's value to the user-entered value.
    • String Template output > Text label: Passes the String Template's dynamic string value into the Text component.
    • Button onClick > Text setLabel: Sets the Text component's text label when the button is clicked.
  6. 6.
    Test the application to ensure the Text component displays the dynamic string when the button is clicked.
Congratulations, you can now configure and display dynamic strings in your application!
Previous
How to use Collections
Next
Use ForEach & Loop components with APIs
Last modified 1mo ago