Header Text Component

Header Text

Function: a!richTextHeader()

Displays heading-styled text within a rich text component.

Parameters

Name Keyword Types Description

Text

text

Text or Styled Text

Array of text to display as a rich text item.

Size

size

Text

Determines the text size. Valid values: "ICON" (default), "TINY", "GALLERY", "SMALL", "MEDIUM", and "LARGE".

Link

link

Link

Link to apply to the text. Create links with a!authorizationLink(), a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), and a!safeLink().

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.

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
a!richTextDisplayField(
  label: "Heading Sizes",
  labelPosition: "ABOVE",
  value: {
    a!richTextHeader(
      text: "Small Heading",
      size: "SMALL"
    ),
    a!richTextHeader(
      text: "Medium Heading",
      size: "MEDIUM"
    ),
    a!richTextHeader(
      text: "Large Heading",
      size: "LARGE"
    ),
    a!richTextHeader(
      text: "Medium Standalone Link Heading",
      link: a!dynamicLink(
      ),
      linkstyle: "STANDALONE",
      size: "MEDIUM"
    ),
    a!richTextHeader(
      text: "Medium Inline Link Heading",
      link: a!dynamicLink(
      ),
      linkstyle: "INLINE",
      size: "MEDIUM"
    )
  }
)

Displays the following:

Header Text Example

The following patterns include usage of the Header Text Component.

  • Comments Patterns (Comments, Looping): Use this pattern when displaying a chronological list of messages from different users, such as comments on a topic or notes on a case.

  • Grid with Selection Pattern (Grids): This pattern 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. It also provides information on a common save behavior.

  • Inline Survey (Radio Buttons, Checkboxes, Buttons): Use this pattern to create a clean and easy to navigate survey.

  • User List Pattern (Looping): The user list pattern retrieves all the users in a specified group and displays them in a single column.

  • 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.

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK