The Text widget allows you to add static or dynamic text to your app.
Examples
Use this widget to support app design requirements such as the following:
- You want to display text in the app that supports the other content such as data details and image captions.
- You want to show a dynamic field or expression from a data source. You can combine a Text widget with a List widget so users can click an item in the list to show details for the corresponding feature, such as attribute values.
Usage notes
The Text widget includes a rich text editor in which you can change the font type, size, color, and so on. For dynamic text, you can set the data source to use attributes or get statistics from multiple feature layers. Common text formatting options are available on a toolbar that appears when you're editing in the Text widget. You can access all the formatting options in the widget’s configuration panel. To edit hyperlinked text, click the linked text, click the Link button on the Content tab, edit the configured link, and close the Set link panel.
Tip:
When typing in the text editor, use keyboard shortcuts to undo or redo text edits (Ctrl+Z for undo and Ctrl+Y for redo). The Undo and Redo buttons on the builder toolbar are based on the actions performed in the builder, such as connecting data or adding the Text widget.
When the text takes up more space than the size of the widget, users can scroll through the text within the widget. To indicate when there is more text than is showing, a fade effect appears at the bottom of the widget with a jumping arrow icon in the corner.
Settings
The Text widget includes the following settings:
- Connect to data—Optionally, connect the widget to specific data. (A data source is not required for a Text widget.)
- Select data—Select the data to populate content in the widget. You can select multiple feature layers for a single Text widget, and for each feature layer you can add multiple data views. You can combine static text with dynamic content. For example, you can type a sentence and choose one or more fields to populate values from selected features in the connected data.
- Once you connect data, the Dynamic content button becomes active on the widget’s toolbar so you can continue to configure the data connection.
- Wrap—Turn text wrapping on or off.
- Tooltip—Provide hover text to describe the text content. If you connect the Text widget to data, you can use dynamic content by choosing Attribute, Statistics, or Expression
- Placeholder (available in templates)—When using the Text widget in a Web Experience Template, specify placeholder text to customize the content and style.
- Text format—Use the following common formatting options:
- Heading level—Apply heading or paragraph styles to text. You can apply six different heading levels. Each heading level has a base font size, but you can still change the font size.
Note:
Heading styles do not work with bulleted or numbered lists.
Heading styles apply to entire lines of text, not just selected text.
- Font—Change the font type and change the font size by unit using pixels (px), rem, or view width (vw). The default font is the font you set on the Theme tab.
- Basic font settings—Apply bold, italic, strikethrough, and underline formatting to text and choose a highlight color and font color. When you select the entire text box, the font color also affects bullets and numbering in lists.
- Link—Format text as a hyperlink to go to other content, such as a page, window, section view, or web address. On scrolling pages, you can set a link to scroll to a particular block on the page or return to the top of the page.
- Paragraph layout—Adjust the paragraph alignment (left, center, right, or justify), use bulleted or numbered list formatting, and increase or decrease the indent.
- Character spacing—Adjust the space between characters by unit using pixels (px), rem, or view width (vw).
- Line spacing—Adjust line and paragraph spacing. The default is 1.5 lines.
- Character effect—Style text characters by adding a shadow.
- Heading level—Apply heading or paragraph styles to text. You can apply six different heading levels. Each heading level has a base font size, but you can still change the font size.
- Clear all formatting—Select formatted text and click this button to clear existing formatting.
Caution:
When a variable phrase from dynamic content is included in the selected text, this button removes its content because it’s treated as text formatting.
Dynamic content panel
When you connect the Text widget to data, the Dynamic content button becomes active on the toolbar that appears for the widget’s inline-editing mode. This button opens a panel with the following options to get dynamic content from the selected data source:
- Attribute—Choose the field from the selected data for which you want to show attribute values in the Text widget. Once you choose a field, it’s added to the editable text area as a field name variable—the field name in curly brackets. The variable is populated with feature attribute values based on the connections you configure, such as using a Text widget to show place-names in a list that’s connected to the same data.
- Statistics—Get statistics function results for a selected field or the data count from the corresponding data source to insert into the text widget.
- Expression—Build a more complex expression with the function operators and data fields to insert into the text widget.
Tip:
To customize the message that appears when no records are selected, change the expression title. The expression title displays as the no data message for dynamic text. Or you can create a view for empty selection in the Data panel.
You can use the following function operators on the Statistics and Expression tabs:
Operator | Expression syntax | Description |
---|---|---|
AVERAGE | AVERAGE({field}) | The average of all values in the specified field. |
COUNT | COUNT({field}) | The total number of values in the specified field. |
SUM | SUM({field}) | The sum of all values in the specified field. |
MAX | MAX({field}) | The maximum value in the specified field. |
MIN | MIN({field}) | The minimum value in the specified field. |
STANDARD_DEVIATION | STANDARD_DEVIATION({field}) | Standard deviation shows you how much a value varies from the mean. |
PERCENTILE_DISCRETE | PERCENTILE_DISCRETE({field},percentile value, order) | A percentile value is a value on a scale of 0-100. Discrete percentile means the returned value is a value from the input field. |
PERCENTILE_CONTINUOUS | PERCENTILE_CONTINUOUS({field},percentile value, order) | Continuous percentile means that the returned value is interpolated from the data in the input field. |
For PERCENTILE_DISCRETE and PERCENTILE_CONTINUOUS, you can calculate percentiles in ascending (ASC) or descending (DESC) order. Ascending order means a value in the nth percentile of a dataset is greater than n% of values in the dataset. Descending order means a value in the nth percentile of a dataset is less than n% of values in the dataset.
For more information about using dynamic content, see Select data.