Rich Text Component

Rich Text

SAIL Function: a!richTextDisplayField()

Displays text in variety of styles, including bold, italics, underline, links, headers, and numbered and bulleted lists.

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 Text or Styled Text The array of rich text to display in the rich text display field. Create rich text using a combination of text, a!richTextItem(), a!richTextImage(), a!richTextBulletedList(), or a!richTextNumberedList().
Alignment align Text Alignment of the text value. Valid values are "LEFT", "CENTER", and "RIGHT". Appian recommends setting the alignment when used in the grid layout component only.
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 formats 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 SAIL interface is opened.
  • As with any SAIL 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: SAIL Performance.

Examples

Copy and paste an example to the expression view of the interface designer 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
76
77
78
79

=a!richTextDisplayField(
  labelPosition: "COLLAPSED",
  value: {
    a!richTextItem(
      text: "Agenda",
      style: "HEADER_MEDIUM"
    ),
    a!richTextItem(
      text: "Top 3",
      style: "HEADER_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!richTextImage(
              image: a!documentImage(
                document: a!iconIndicator(
                  icon: "WAIT_CLOCK"
                )
              )
            ),
            "Yearly budget - due ",
            a!richTextItem(
              text: "Jan 1, 2015",
              style: "STRONG"
            )
          }
        ),
        "Growth strategy"
      }
    ),
    a!richTextItem(
      text: "Lower Priority",
      style: "HEADER_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
17.4

On This Page

FEEDBACK