Text

Last modified: August 20, 2024

Introduction

The text widget displays a text which can optionally contain parameters. A parameter can be an attribute of a context object or an expression which also has access to the surrounding context objects and their attributes. When used with parameters, every parameter placeholder in the text (which may appear as {0}, {1}, or {2} for example) is replaced with the value of its corresponding attribute or expression.

For example, if you want to build a page that shows some detailed information about books, you can configure a data grid to retrieve the whole list of Book objects from the database. Then, you can place a text widget inside a data view that is configured to listen to this data grid (for more information, see Listen to Widget Source. Finally, you can add parameters for your text widget to display information about the selected book from the data grid.

Text Widget

Properties

An example of text properties is represented in the image below:

Text Properties

Text properties consist of the following sections:

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

General Section

Caption

Caption defines a text that will be shown. The caption can contain parameters that are written between braces, for example, {1}.

For more information on using parameters, see the Parameters section below.

Parameters

Parameters are attributes or expressions whose values will be displayed as part of the text defined in the Caption setting. To view Parameters, do one of the following:

  • Double-click the Caption setting in properties

  • Double-click the text widget on the page and click Edit in the General section > Caption:

    Opening Parameters

Parameters have the following settings:

  • Index – an identification number of a parameter

  • Value – an attribute or an expression value to be displayed

  • Format – a format in which the value will be displayed (only for attributes)

    Parameter Settings
Adding New Parameters

To use parameters, do the following:

  1. Place the Text widget in a context of an entity, as in, inside a data container.

  2. Double-click the Caption setting in the text widget properties.

  3. In the Edit Caption dialog box > Parameters section click New:

    Adding New Parameter
  4. In the Edit Template Parameter dialog box, click Select, choose an attribute and confirm your choice.

  5. In the Caption setting, write the text you would like to display and type the Index of the parameter you would like to include within braces. In the example below, to include the title of the book, amount of pages it has and the year it was published, you need to use indexes {1} for the Title attribute, {2} for the NrOfPages attribute and {3} for the DatePublished attribute:

    Parameter Example
  6. In the Fallback text setting, write the text you would like to display when no context object is available from the surrounding data widget:

    Fallback Text Example
Performing Other Actions on Parameters

In addition to adding new parameters, you can perform the following actions on parameters:

  • Delete – to delete a parameter click Delete or press Delete on your keyboard

  • Edit – double-click a parameter to edit it or click Edit

  • Move up – to move a parameter up in the list of parameters and also to change its index, click Move up

  • Move down – to move a parameter down in the list of parameters and also to change its index, click Move down

    Parameter Actions

Render Mode

The render mode determines how the text will be displayed.

Value Description
Text (default) The text will be rendered inline with the previous/next texts on a page (<span> tag in HTML).
Paragraph The text will be rendered as a separate paragraph (<p> tag in HTML).
Heading 1 - Heading 6 The text will be rendered as a selected heading (for example, <h1> tag in HTML). Heading 1 is the largest type of heading, Heading 6 is the smallest one.

Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

Read More