Rich Text Component

Rich text component

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.

See also: Bulleted List, Header Text, Inline Image, List Item, Numbered List, Styled Icon, Styled Text

Parameters

Name Keyword Types Description

Label

label

Text

Text to display as the field label.

Label Position

labelPosition

Text

Determines where the label appears. Valid values:

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

Supplemental text about this field.

Alignment

align

Text

Determines alignment of the text value. Valid values: "LEFT", "CENTER", "RIGHT". Does not apply to lists.

Display Value

value

Any Type

Array of rich text to display. Create rich text using a combination of text, a!richTextItem(), a!richTextHeader(), a!richTextImage(), a!richTextIcon(), a!richTextBulletedList(), or a!richTextNumberedList(). Example: {"Hello ", a!richTextItem(text: "World", style: "STRONG"), "!"}.

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

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

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.

Prevent Wrapping

preventWrapping

Boolean

Determines if wrapping to multiple lines will be prevented. When set to true, each header, paragraph, or list item will truncate to a single line. Default: false.

Usage considerations

Editing rich text

The rich text configuration pane contains a rich text editor to help with designing your interfaces. It supports the following styles:

  • Header size
  • Bold
  • Italic
  • Underline
  • Color
  • Safe links
  • Styled icons
  • Web images

If your rich text contains any of the following, it can only be edited in Configure items mode or as an expression:

  • Non-Web Images
  • Non-Safe Links
  • Functions
  • Variables

rich text example

We recommend using the rich text editor to apply the supported styles, then switching to Configure items mode for additional configurations.

Displaying values

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

Using the preventWrapping parameter

  • Don't use the preventwrapping parameter in side by side layouts that use the "MINIMIZE" width.

Reducing render time

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

Rich text icons and styled text with multiple styles and colors

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
{
  a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {
      a!richTextItem(
        text: {
          a!richTextIcon(
            icon: "USER",
            caption: "Name"
          ),
          " Xavier Jones"
        },
        size: "MEDIUM",
        style: {
          "STRONG"
        }
      ),
      char(10),
      a!richTextItem(
        text: {
          a!richTextIcon(
            icon: "PHONE",
            caption: "Phone"
          ),
          " (555) 123-4567"
        },
        color: "SECONDARY"
      ),
      char(10),
      a!richTextItem(
        text: {
          a!richTextIcon(
            icon: "BUILDING-O",
            caption: "Location"
          ),
          " Reston, VA"
        },
        color: "SECONDARY"
      )
    }
  )
}

Displays the following:

rich text example

The following patterns include usage of the Rich Text Component.

  • Activity History Pattern (Formatting): The Activity History pattern provides a common style and format for displaying an organization's activity measures.

  • Add Validations to an Inline Editable Grid (Validation, Grids, Looping): Allows the user to change data directly in a grid, and validate a various entries.

  • Add, Edit, and Remove Data in an Inline Editable Grid (Grids, Looping): Allow the user to change data directly in an inline editable grid.

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

  • Alert Banner Patterns (Choice Components): The alert banners pattern is good for creating a visual cue of different types of alerts about information on a page.

  • Breadcrumbs Pattern (Formatting): The breadcrumbs pattern is a good example of breadcrumb-style navigation.

  • Call to Action Pattern (Formatting): Use the call to action pattern as a landing page when your users have a single action to take.

  • 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 Choices (Cards, Rich Text, Dynamic Links): Use this pattern to display sets of choices that are quick and easy to navigate.

  • Cards as List Items Patterns (Choice Components, Images): Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.

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

  • Conditionally Hide a Column in a Grid (Grids, Conditional Display): Conditionally hide a column in a read-only grid when all data for that column is a specific value.

  • Display Last Refresh Time (Auto-Refresh, Grids): Display the last time the interface was updated, either based on a user interaction or a timer.

  • Document List (Documents): Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.

  • 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 consists of a bar chart and column chart, which each drill down into a grid.

  • Event Timeline (Timeline, Events): Use the event timeline pattern to display a dated list of events and actions in chronological order. This pattern uses a combination of cards, rich text, and user images to show an easy to navigate list of dated events.

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

  • Filter the Data in a Grid (Grids, Filtering): Configure a user filter for your read-only grid that uses a record type as the data source. When the user selects a value to filter by, update the grid to show the result.

  • Form Steps (Stamps): Use the form steps patten to break down complicated forms into a series of quickly completed steps that are well organized and easy to navigate. This pattern uses a combination of cards and rich text to create steps that can represent fields from one or more interfaces.

  • Grid With Detail Pattern (Grids): The grid with detail pattern allows users to select an item from a grid to see more details next to the grid.

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

  • Inline Tags for Side-by-Side Layout Pattern (Formatting): This pattern shows the best practice for combining tags with standard-sized rich text, or plain text, using a side by side layout.

  • KPI Patterns (Formatting): The Key Performance Indicator (KPI) patterns provide a common style and format for displaying important performance measures.

  • Leaderboard (Looping): Use the leaderboard pattern to show a selection of your data in an easy to read ranked display.

  • Limit the Number of Rows in a Grid That Can Be Selected (Validation, Grids): Limit the number of rows that can be selected to an arbitrary number.

  • Milestone Bar Pattern (Looping): Use the milestone bar pattern to guide users through sequential steps to complete a task and show the user their progress as they move through the steps. This pattern can be used to either break up longer forms into more manageable sections or combine smaller forms into a more streamlined process.

  • Milestone Stamp Pattern (Looping): Use the milestone stamp pattern to visually guide users through sequential steps to complete tasks and show users their progress as they move through the steps.

  • More-Less Link (Grids, Rich Text): Use this pattern to keep grids with rows containing varying text lengths looking clean and uniform. This design also improves readability and the user experience by limiting the amount of text in the interface.

  • Navigation Patterns (Conditional Display, Formatting): Use the navigation patterns to help orient users and enable them to easily navigate pages and content.

  • Refresh Until Asynchronous Action Completes (Auto-Refresh): Use a refresh interval to display the results of an asynchronous action automatically.

  • Set a Numeric Rating Using Rich Text Icons (Conditional Display): Save a numeric score using a set of clickable rich text icons.

  • Show a Numeric Rating as Rich Text Icons (Conditional Display): Dynamically show a star rating based on a numeric score.

  • Stamp Steps (Stamps): There are two similar stamp steps patterns. The stamp steps (icon) pattern is primarily icons and titles. It should be used for simple steps that don't require much information or instruction. The stamp steps (numbered) pattern is primarily text and should be used for steps that require context or explanation.

  • Tabs Patterns (Formatting, Choice Components): The tabs patterns provide an ideal style and design for creating tabbed interfaces.

  • Timeline Patterns (Formatting): Use the timeline pattern to show progress through steps in a process or project. These patterns can be used to show progress in both completed and ongoing processes.

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