Rich Text

Function: a!richTextDisplayField()

Displays text in variety of styles, including bold, italics, underline, links, headers, and numbered and bulleted lists. Also supports images and styled icons.

Parameters

Editing Rich Text

The rich text configuration pane contains a rich text editor to help with designing your interfaces. It supports the following styles:

• Size
• Header style
• Bold
• Italic
• Underline
• Color
• Styled icons

If your rich text contains any of the following, it can only be edited in Configure items mode or as an expression:

• Lists
• Images
• Links
• Functions
• Variables

Notes

• If Display Value is null or contains an empty array, the Label and Instructions render with no rich text displayed.
• Multiple styles can be applied to text by nesting styled text within itself.
• As with any interface, showing many components at once can increase server evaluation time, client rendering time, and network transmission time. The use of styled text, bulleted, and numbered lists all contribute to this. To provide a fast user experience, limit the number of components, including styled text, bulleted, and numbered lists, shown on a single interface. See also: Interface Evaluation Lifecycle.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
={a!richTextDisplayField(
  labelPosition: "COLLAPSED",
  value: {
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "USER",
          caption: "Name"
        ),
        " Xavier Jones"
      },
      size: "MEDIUM",
      style: {
        "STRONG"
      }
    ),
    char(10),
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "PHONE",
          caption: "Phone"
        ),
        " (555) 123-4567"
      },
      color: "SECONDARY"
    ),
    char(10),
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "BUILDING-O",
          caption: "Location"
        ),
        " Reston, VA"
      },
      color: "SECONDARY"
    )
  }
)}

Displays the following:

Related Patterns

The following patterns include usage of the Rich Text Component.

• Add, Remove, and Move Group Members Browser (Hierarchical Data, Group Management): Display the membership tree for a given group and provide users with the ability to add, remove, and move user members from a single interface.

• Breadcrumbs Pattern (Formatting): The breadcrumbs pattern is a good example of breadcrumb-style navigation.

• Cards as Buttons Pattern (Choice Components, Formatting, Conditional Display): The cards as buttons pattern is a great way to prominently display a select few choices.

• Cards as List Items Patterns (Choice Components, Images): The cards as list items pattern is good for creating visually rich interfaces using a combination of cards and billboards to show lists of like items.

• Display Last Refresh Time (Auto-Refresh, Grids): Display the last time the interface was updated, either based on a user interaction or a timer.

• Drilldown Pattern (Grids): The drilldown pattern allows users to select an item from a list to see more details.

• Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern is a graphically rich, multi-part interface that allows users to drill into particular chart bars for more details.

• Expand/Collapse Rows in a Tree Grid (Hierarchical Data, Grids): Create a grid that shows hierarchical data and allows users to dynamically expand and collapse rows within the grid.

• Grid with Selection Pattern (Grids): This pattern provides useful save behavior and is an example of good UX design for a grid that allows users to select items and easily view their selections when there are multiple pages of data.

• KPI Patterns (Formatting): The Key Performance Indicator ("KPI") patterns provide a common style and format for displaying important performance measures.

• Master Detail Pattern (Grids): The drilldown pattern allows users to select an item from a list to see more details.

• Refresh Until Asynchronous Action Completes (Auto-Refresh): Use a refresh interval to display the results of an asynchronous action automatically.

• Set a Numeric Rating Using Rich Text Icons (Conditional Display): Save a numeric score using a set of clickable rich text icons.

• Show a Numeric Rating as Rich Text Icons (Conditional Display): Dynamically show a star rating based on a numeric score.

• Tabs Patterns (Formatting, Choice Components): The tabs patterns provide an ideal style and design for creating tabbed interfaces.

• Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.

• Use Links in a Grid to Show More Details and Edit Data (Grids): Allow end users to click a link in a read-only grid to view the details for the row, and make changes to the data. The data available for editing may include more fields than are displayed in the grid.

• User List Pattern (Looping): The user list pattern retrieves all the users in a specific group and displays them in a single column. Each user's name and title appears next to their profile picture which is styled as an avatar.

• Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.