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.

Property	Data type	Description
Text	String	Sets the text to be displayed.
Overflow Text	String	Controls 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.
Visible	Boolean	Controls the widget's visibility on the page. When turned off, the widget would not be visible when the app is published.
Animate Loading	Boolean	Controls the widget's loading animation. This can be controlled with JS until all the widgets are rendered.
Disable link	Boolean	It parses any link in the widget as standard text.
Height	String	It 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.

Property	Data type	Description
isVisible	Boolean	This property indicates whether the widget is visible or not.
text	String	This property returns the widget's text value.

Style properties

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

Property	Data type	Description
Font Family	String	Allows you to select a font for the text.
Font Size	String	Allows you to set the size of the label.
Text Color	String	Allows you to change the color of the text.
Background Color	String	Allows you to change the background color of the text widget.
Border Color	String	Allows you to change the border color of the text widget.
Alignment	String	This property focuses on the text alignment inside the text widget.
Emphasis	String	Allows you to choose a font style; bold or italic.
Border Width	Number	You can define the width of the border here. It takes input in px.