Skip to main content

Text

This document explains how to display static or dynamic textual information using the Text widget.

Use the Text widget to display data

Display static text

To display static text enter the desired text directly into the Text property. The text remains the same until manually updated or edited.

This method is useful when you need to display fixed information, such as instructions or labels, that don't change based on user interactions.

Additionally, you can use HTML code in the Text field to customize the appearance of the displayed text. Text field can only render inline CSS. To use external CSS, it's recommended to use the Iframe widget. For instance, you can use:

<p style="color:blue;">Hello World</p>

Display dynamic text

To display dynamic text that changes based on user interactions or data from external sources, you can use binding values to connect different widgets and their properties.

For example, if you have a Table widget that displays a list of tasks, where each row contains the task name, the person assigned to the task, and the deadline for completion.

[
{
"Name": "John",
"Task": "Create report",
"Deadline": "2023-04-01"
},
{
"Name": "Alice",
"Task": "Review proposal",
"Deadline": "2023-04-03"
},
{
"Name": "Bob",
"Task": "Update website",
"Deadline": "2023-04-05"
}
]

Now, if you want to display the details of a particular task in a Text widget when the user clicks on the corresponding row in the Table widget, you can use the following steps:

{{Table1.selectedRow.task}}

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget properties

These properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyData typeDescription
TextStringSets the text to be displayed.
Overflow TextStringControls the text behavior when the length of the text exceeds. You can choose between Scroll, Truncate and None. Scroll: This option enables scrolling within the boundaries of the Text widget. Truncate: This option shortens text in a Text widget and adds ellipses at the bottom left. Clicking on the ellipses reveals a pop-up with the full text if it exceeds the widget area.
VisibleBooleanControls the widget's visibility on the page. When turned off, the widget would not be visible when the app is published.
Animate LoadingBooleanControls the widget's loading animation. This can be controlled with JS until all the widgets are rendered.
Disable linkBooleanIt parses any link in the widget as standard text.
HeightStringIt configures how a widget’s height reacts to content changes. It has three possible configurations:
Fixed: The height of the widget remains as set using drag and resize.
Auto Height: The height of the widget reacts to content changes.
Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and maximum number of rows that can be occupied by the widget.

Reference properties

These properties can be referenced in other widgets, queries, or JS functions using the dot operator. For instance, to get the text, you can use Text1.text.

PropertyData typeDescription
isVisibleBooleanThis property indicates whether the widget is visible or not.
textStringThis property returns the widget's text value.

Style properties

Style properties allow you to change the look and feel of the widget.

PropertyData typeDescription
Font FamilyStringAllows you to select a font for the text.
Font SizeStringAllows you to set the size of the label.
Text ColorStringAllows you to change the color of the text.
Background ColorStringAllows you to change the background color of the text widget.
Border ColorStringAllows you to change the border color of the text widget.
AlignmentStringThis property focuses on the text alignment inside the text widget.
EmphasisStringAllows you to choose a font style; bold or italic.
Border WidthNumberYou can define the width of the border here. It takes input in px.