Rich Text Component

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

Name Keyword Type Description
Label label Text Optional text to display as the field label.
Label Position labelPosition Text Optional text to determine where the label appears. Valid values include
  • "ABOVE" (default) Displays the label above the component.
  • "ADJACENT" Displays the label to the left of the component.
  • "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information.
  • "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page.
Instructions instructions Text Optional text displayed below the field's value.
Help Tooltip helpTooltip Text Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is "COLLAPSED".
Display Value value Rich Text The array of rich text to display in the rich text display field. Create rich text using a combination of
Alignment align Text Alignment of the text value. Valid values are "LEFT", "CENTER", and "RIGHT".
Visibility showWhen Boolean Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.

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.
  • The Alignment parameter must not be set if a rich text display component contains a bulleted or numbered list. Otherwise, an error occurs when the interface is opened.
  • 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

=a!richTextDisplayField(
  labelPosition: "COLLAPSED",
  value: {
    a!richTextHeader(
      text: "Agenda",
      size: "MEDIUM"
    ),
    a!richTextHeader(
      text: "Top 3",
      size: "SMALL"
    ),
    a!richTextNumberedList(
      items: {
        a!richTextItem(
          text: {
            "Update ",
            a!richTextItem(
              text: "website",
              link: a!safeLink(
                label: "Company website",
                uri: "http://www.appian.com"
              )
            )
          }
        ),
        a!richTextItem(
          text: {
            a!richTextIcon(
              icon: "clock-o"
            ),
            "Yearly budget - due ",
            a!richTextItem(
              text: "Jan 1, 2015",
              style: "STRONG"
            )
          }
        ),
        "Growth strategy"
      }
    ),
    a!richTextHeader(
      text: "Lower Priority",
      size: "SMALL"
    ),
    a!richTextBulletedList(
      items: {
        a!richTextListItem(
          text: "Department updates",
          nestedList: a!richTextBulletedList(
            items: {
              "Sales",
              "Engineering",
              "Finance",
              "Professional Services"
            }
          )
        ),
        a!richTextItem(
          text: {
            "Market analysis for ",
            a!richTextItem(
              text: "North America",
              style: "EMPHASIS"
            ),
            " and ",
            a!richTextItem(
              text: "Europe",
              style: "EMPHASIS"
            )
          }
        )
      }
    )
  }
)

Displays the following:

Open in Github

On This Page

FEEDBACK