Text
The Text component is used to display the text on the screen. It is one of the most frequently used components.
Adding a Text component
To add a Text component on the screen:
- Select the Text component from the Components drawer. You can open the list of components by clicking the
+button next to Components. - Go to the Data tab (third tab) in Properties Panel.
- Under Input Text, you can enter a static string of text to display.
Configuration Properties
| Property | Description |
|---|---|
| Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Text. |
| Truncate Text | Determine how the text will be truncated if the Max # of Lines property is set in conjunction. |
| Max # of Lines | Set the maximum number of lines to be displayed when Truncate Text is set. |
Using Text component for Dynamic Values
A Text component is a Data Enabled Component. This means that the property Input Text in the Data tab supports both static text or data and variables using double curly braces {{variable}}.
In this scenario, usually, a Text component is nested under a Fetch component.
- All you have to do is define a variable in double curly braces name under Input Text property. For example,
{{name}}. - Then, under the Variables property, the variable name you've defined in the previous step will appear.
- Next to the variable name, there is a dropdown where you can select the appropriate key name whose value you want it to display on the screen.
To customize styles of a Text component, check the Styles documentation.
Inline Text Editing
Inline Text Editing allows you to edit a Text component's content by double-clicking it when in Draft View mode. After editing the component's content, press the Tab key to save the changes.
Truncating Text
Truncate Text property under Configs tab (second tab) in Properties Panel supports the following values:
| Property | Description |
|---|---|
| head | The line is displayed so that the end fits in the container, and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz". |
| middle | The line is displayed so that the beginning and end fit in the container, and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz". |
| tail | The line is displayed so that the beginning fits in the container, and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd...". This is the default value. |
| clip | Lines are not drawn past the edge of the text container. |
Note about using Truncate Text property on Android devices
On Android, when Max # of Lines is set to a value higher than 1, only the
tailfrom Truncate Text value will work correctly.
Note about using Truncate Text property in Web Preview
On Web, only the
tailfrom Truncate Text value is supported.
Updated 4 months ago