Skip to main content

Text

The Text element allows you to display static or dynamic text content within your project. It supports flexible data binding, making it useful for both labels and dynamic data displays.

Adding a Text Element​

There are two ways to add a Text element:

  • From the Page Containers section:

    • Open Containers and click Add Element.
    • The New Element window appears, where you can assign a Name and select the element Type.
    • Click the dropdown menu for Type and select Text.

  • From the Editor page:

    • Right-click anywhere on the page.
    • Select Add Element from the menu.
    • The same New Element window will appear, allowing you to assign the element Name and select Text as the type.

Adding a new Text element

After adding, you can configure the element’s properties as needed.

Text Friendly Name​

Click the edit icon (pencil) to make Text Friendly Name editable. Assign a name that helps identify the element easily within your project.

Data Source​

Text Data Source​

Choose whether the text is Static or Dynamic.

  • Static displays fixed text content.
  • Dynamic opens the Select Data Source to Work With window with a dropdown menu to pick an available data source.

Size​

Set Width and Height values for the text element.

  • Units can be in Pixels or Percentage.
  • Both width and height allow Assign Dynamic Value. Selecting the dynamic value icon {-} opens the Pick Dynamic Value window, where you can select Variables, Parameters, or State entries.

Mode Selector by Index or Name​

Mode Selector by Index or Name lets you switch between available text modes using either an index or a mode name.

  • You can Assign Dynamic Value, represented by the {-} icon inside curly brackets.
  • You can also Assign Post-Processing Function. Selecting this opens the Select Post Processing Function dropdown menu, where you can choose the desired function.

Available Text Modes​

By default, there is only the Default mode. You can add new modes by selecting the + icon. This opens the Create New Text Mode window, where you can:

  • Set a Name for the new mode.
  • Choose to Copy from the Default mode.
  • Toggle Separate actions for this mode if you want distinct actions for the new mode.
  • Click Add New Mode to create it.

Create new text mode window

Text CSS Classname​

The Text CSS Classname field is editable. You can enter a custom CSS class name to apply additional styling to the text element.

  • You can Assign Dynamic Value to dynamically change the class name.
  • You can also Assign Post-Processing Function, which opens the Select Post Processing Function dropdown menu to choose a function for modifying the value before it is applied.

Sizing​

Sizing defines the text size for the element.

  • You can Assign Dynamic Value, which opens the Pick Dynamic Value window to select Variables, Parameters, or State entries, then save the changes.
  • Text size units can be set to:
    • px (pixels)
    • vh (viewport height)
    • bw (baseline width)

Icon​

Icon allows you to attach an image icon to the text element for additional visual context.

Use Image as Icon​

Toggle Use Image as Icon to enable image-based icons for the text element.
When enabled, you can choose between two options: Library or URL.

Library​

When Dynamic Pick from Library is turned on, you can manually select an image from the existing library using Pick Image.

After selecting an image, you can configure:

  • Icon Size
    • You can Assign Dynamic Value, which opens the Pick Dynamic Value window to select Variables, Parameters, or State entries.
    • Units available: px, vh, or vw.
    • You can also manually enter a numeric value for the size.
  • Icon Position
    • Positions available: Left, Top, Right, Bottom.
    • You can also Assign Dynamic Value to set the position dynamically.
  • Inner Content Gap
    • Sets the space between the icon and text.
    • Supports units px, vh, and vw.
    • You can also Assign Dynamic Value for this setting.

When Dynamic Pick from Library is turned on, you can set Pass Image ID from Library.

  • You can Assign Dynamic Value, which opens the Pick Dynamic Value window to select Variables, Parameters, or State entries.
  • You can manually enter the library image ID into the field.
  • You can also Assign Post-Processing Function, which opens the Select Post Processing Function dropdown menu to modify the value before it is applied.

Other settings remain available and work the same for both:

  • Icon Size
    • Supports Assign Dynamic Value, units px, vh, vw, and manual numeric entry.
  • Icon Position
    • Positions: Left, Top, Right, Bottom.
    • Supports Assign Dynamic Value.
  • Inner Content Gap
    • Controls spacing between the icon and text.
    • Supports Assign Dynamic Value and units px, vh, vw.

URL​

When you select URL, you can use an external image as an icon.

  • You can Assign Dynamic Value, which opens the Pick Dynamic Value window to select Variables, Parameters, or State entries.
  • Enter the external image URL in the External Image URL field.

After providing the URL, you can configure:

  • Icon Size supports Assign Dynamic Value, units px, vh, vw, and manual numeric entry.
  • Icon Position allows Left, Top, Right, Bottom.
  • Inner Content Gap controls spacing between the icon and text. This supports Assign Dynamic Value and units px, vh, vw.

Default Icon (when Use Image as Icon is off)​

When Use Image as Icon is turned off, you can attach a regular icon from available icon libraries.

  • Click Filter Icon Library to choose which icon library to use. Available libraries include examples like Fontawesome, Material Design, Hero, and Flat.

  • After selecting a library, you can choose an icon using the Select Icon option. Select Icon provides two modes:

    • Manual – Manually pick an icon from the selected library.
      • Choose from a dropdown list of available icons.
      • Alternatively, click the Icon Library Explorer (search icon) to open a full icon browser for easier selection.
    • Dynamic – Allows dynamic selection of icons by assigning values at runtime.

  • Configure Inner Content Gap to controls spacing between the icon and text. This also supports Assign Dynamic Value and units px, vh, and vw.

Text Content​

Selecting Text Content opens the Edit Text window, which allows you to define and style the text displayed by the element.

Edit Text Window​

The Edit Text window provides a text editor with the following options:

  • Variable Insert Buttons

    • A, D, S, NUM, BOOL, STR, ST, and PARAMETER buttons insert variables, parameters, or state references into the text.

  • Basic Text Formatting

    • B (bold), I (italic), S (strikethrough), U (underline), and X₂/X² for subscript/superscript.

  • Alignment and Styles

    • Text alignment options: left, center, right, justify.
    • A↑ and A↓ to adjust text size.
    • T menu for headings or block formatting.

  • Lists

    • Bullet and numbered lists.

  • Additional Options

    • Source toggles between visual and source code editing.
    • Undo/redo buttons are available for quick changes.

After editing, click Save to apply changes or Cancel to discard them.

Design​

The Design section allows you to customize the visual styling of the text element.

Font Family​

Font Family lets you choose the typeface used for the text element.

Text Transform​

Text Transform controls how the text is capitalized. Available options are None, Uppercase and Capitalize.

There is also a toggle for Allow Text Wrap.

  • When enabled, text will wrap within the container.
  • When disabled, text remains on a single line.

Text Color​

Text Color allows you to set the color of the text.

  • You can Assign Dynamic Value, which opens the Pick Dynamic Value window to select Variables, Parameters, or State entries.
  • You can manually type in the color value or use the color selector.

Icon Color​

Icon Color sets the color of the icon (if an icon is used).

  • You can Assign Dynamic Value.
  • You can type in the color value or select from the color picker.

Background Color​

Background Color defines the background behind the text element.

  • You can Assign Dynamic Value.
  • You can manually enter a color value or use the color selector.

Border​

The Border section controls border styling for the text element.

Default​

When Default is selected, the text element uses its default border settings.

Override​

When Override is selected, you can customize the border:

  • Border Width
    • Set values for Top, Right, Bottom, and Left.
    • You can manually enter numeric values or increase/decrease using controls.
  • Border Type
    • Choose from Solid, Dashed, or Dotted.
  • Border Color
    • Use the color picker or manually enter a color value.
  • Border Radius
    • Define corner rounding in pixels.
    • Supports individual values for Top Left, Top Right, Bottom Left, and Bottom Right.

Shadow​

The Shadow option adds a shadow effect behind the text element.

  • None – Disables the shadow.
  • Enabled – Allows you to customize:
    • X Offset and Y Offset
      • You can Assign Dynamic Value or manually enter offset values (in pixels).
    • Blur
      • You can Assign Dynamic Value or set a blur value (in pixels).
    • Spread
      • You can Assign Dynamic Value or enter a spread value (in pixels).
    • Color
      • By default, the shadow color is black.
      • You can Assign Dynamic Value, type a color value, or use the color selector.
    • Inner Shadow
      • Optionally enable or disable inner shadow.

Reflect​

The Reflect option adds a reflection effect to the text element.

  • None – No reflection is applied.
  • Enabled – Allows you to configure:
    • Alignment
      • Dropdown options: Bottom (default), Top, Left, Right.
    • Offset
      • Adjusts the distance of the reflection.
    • Start Opacity
      • Defines the opacity at the start of the reflection.
    • End Opacity
      • Defines the opacity at the end of the reflection.

Actions​

Actions allow you to define interactive behaviors for the text element.
You have the option to add new actions as needed.

State​

The State section controls visibility, orientation behavior, and interaction signals for the text element.

Orientation Visibility​

Orientation Visibility determines when the text element is visible based on device orientation.
Available options:

  • Both
  • Portrait Only Visible
  • Landscape Only Visible

Visibility Dynamic Value​

Visibility Dynamic Value controls whether the element is shown or hidden dynamically.

  • You can Assign Dynamic Value, which opens the Pick Dynamic Value window to select Variables, Parameters, or State entries.
  • You can also manually enter the visibility dynamic value in the field.

Visibility Signal​

Visibility Signal allows you to toggle the element’s visibility using a signal.

  • You can Assign Dynamic Value or enter the visibility signal value directly.
  • Includes a toggle for Reserve Space When Hidden to keep or release layout space when the element is hidden.

Disabled Signal​

Disabled Signal determines when the element is disabled.

  • You can Assign Dynamic Value or enter the disabled signal value directly in the field.