Styled Text

Styled Text

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.
Style style Text Array Determines the style to apply to the text value. Valid values include "PLAIN" (default), "EMPHASIS", "STRONG", and "UNDERLINE".
Size size Text Determines the text size. Valid values: "STANDARD" (default), "SMALL", "MEDIUM", "MEDIUM_PLUS", "LARGE", "LARGE_PLUS", "EXTRA_LARGE".
Color color Text Determines the text color. Valid values: Any valid hex color or "STANDARD" (default), "ACCENT", "POSITIVE", "NEGATIVE", "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.

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
=a!richTextDisplayField(
  labelPosition: "COLLAPSED",
  value: {
    a!richTextItem(
      text: "Plain, ",
      style: "PLAIN"
    ),
    a!richTextItem(
      text: "Emphasis Small, ",
      style: "EMPHASIS",
      size: "SMALL"
    ),
    a!richTextItem(
      text: "Underline Medium, ",
      style: "UNDERLINE",
      size: "MEDIUM"
    ),
    a!richTextItem(
      text: "Emphasis Medium_Plus, ",
      style: "EMPHASIS",
      size: "MEDIUM_PLUS"
    ),
    a!richTextItem(
      text: "Strong Large, ",
      style: "STRONG",
      size: "LARGE"
    ),
    a!richTextItem(
      text: "Emphasis Large_Plus",
      style: {"EMPHASIS"},
      size: "LARGE_PLUS"
    ),
    a!richTextItem(
      text: "Strong Extra_Large",
      style: {"STRONG"},
      size: "EXTRA_LARGE"
    )
  }
)

Displays the following:

Styled Text Example

The following patterns include usage of the Styled Text.

  • 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 grid to see more details in place of the grid.

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

  • Icon Navigation Pattern (Conditional Display, Formatting): The icon navigation pattern displays a vertical navigation pane where users can click on an icon to view its associated interface.

  • 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 grid to see more details next to the grid.

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

Old Versions

There are older versions of this Interface Component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below.

Old Versions Reason for Update
a!richTextItem_18r1

New version supports multiple values in the style parameter, as well as custom hex colors.

To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page.

FEEDBACK