Styled Text

Styled Text

SAIL Function: a!richTextItem()

Displays styled text within a rich text component.

Parameters

Name Keyword Type Description
Text text Text or Styled Text Array of text to display as a rich text item. Text can be further styled by nesting multiple a!richTextItem() calls.
Style style Text Determines the style to apply to the text value. Valid values include "NORMAL" (default), "EMPHASIS", "STRONG", "UNDERLINE", "LARGE", "MEDIUM", "SMALL", "HEADER_LARGE", "HEADER_MEDIUM", "HEADER_SMALL", "POSITIVE", "NEGATIVE", "ACCENT", and "SECONDARY".
Link link Link Link to apply to the text. Create links with
Link Style linkStyle Text Determines how the link is underlined. Valid values: "INLINE" (default), "STANDALONE".
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 Text is null or contains an empty array, no text is displayed.
  • If Link is null, the Text is not displayed as a link.
  • While rich text components can be placed inside a grid layout, header styles are not supported within a grid layout.
  • Header styles cannot be combined with other styles, e.g. an underlined header is not supported.
  • Header styles cannot be applied to items within a bulleted list or numbered list.
  • For nested rich text, if two conflicting styles are found (e.g. both SMALL and LARGE), the innermost style will be displayed.

Example

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
=a!richTextDisplayField(
  labelPosition: "COLLAPSED",
  value: {
    a!richTextItem(
      text: "Large Header",
      style: "HEADER_LARGE"
    ),
    a!richTextItem(
      text: "Medium Header",
      style: "HEADER_MEDIUM"
    ),
    a!richTextItem(
      text: "Small Header",
      style: "HEADER_SMALL"
    ),
    a!richTextItem(
      text: "Normal ",
      style: "NORMAL"
    ),
    a!richTextItem(
      text: "Emphasis ",
      style: "EMPHASIS"
    ),
    a!richTextItem(
      text: "Strong ",
      style: "STRONG"
    ),
    a!richTextItem(
      text: "Underline",
      style: "UNDERLINE"
    ),
    a!richTextItem(
      text: " Positive ",
      style: "POSITIVE"
    ),
    a!richTextItem(
      text: "Negative ",
      style: "NEGATIVE"
    ),
    a!richTextItem(
      text: " Accent ",
      style: "ACCENT"
    ),
    a!richTextItem(
      text: " Secondary ",
      style: "SECONDARY"
    ),
    a!richTextItem(
      text: "Large ",
      style: "LARGE"
    ),
    a!richTextItem(
      text: "Medium ",
      style: "MEDIUM"
    ),
    a!richTextItem(
      text: " Small ",
      style: "SMALL"
    )
  }
)

Displays the following:

FEEDBACK