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
Name | Keyword | Types | Description |
---|---|---|---|
Label |
|
Text |
Text to display as the field label. |
Label Position |
|
Text |
Determines where the label appears. Valid values:
|
Instructions |
|
Text |
Supplemental text about this field. |
Alignment |
|
Text |
Determines alignment of the text value. Valid values: |
Display 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: |
Help Tooltip |
|
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 |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Visibility |
|
Boolean |
Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true. |
The rich text configuration pane contains a rich text editor to help with designing your interfaces. It supports the following styles:
If your rich text contains any of the following, it can only be edited in Configure items mode or as an expression:
We recommend using the rich text editor to apply the supported styles, then switching to Configure items mode for additional configurations.
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE 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
={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:
The following patterns include usage of the Rich Text Component.
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 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 consists of a bar chart and column chart, which each drill down into a grid.
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 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.
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.
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. This page explains how you can use the three types of KPI patterns in your interface, and walks you through the design structure of the KPI 1 pattern in detail.
Master Detail Pattern (Grids): The master-detail pattern allows users to select an item from a grid to see more details next to the grid.
Navigation Pattern (Looping): Use the navigation pattern as a way to structure a group of pages with icon and text based left navigation. When an icon and text are selected, the corresponding page is displayed.
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.
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.