Rich Text Icon

On This Page

SAIL Design System guidance available for Rich Text

Enhance readability and comprehension on your interface by using rich text formatting to visually differentiate text.

Function

a!richTextIcon( icon, altText, caption, size, color, link, linkStyle, showWhen )

Displays an icon for use in rich text display. Icons can be formatted by configuring a color, size, or link. To show documents as images within rich text, see Rich Text Image.

See also: Rich text style guidance

Parameters

Name	Keyword	Types	Description
Icon	icon	Text	The key of the icon to display. See Available Icons below.
Alternative Text	altText	Text	Equivalent alternate text to display when accessibility or browser compatibility issues prevent the icon from displaying.
Caption	caption	Text	Text to display in mouseovers.
Size	size	Text	Determines the icon size. Valid values: `"STANDARD"` (default), `"SMALL"`, `"MEDIUM"`, `"MEDIUM_PLUS"`, `"LARGE"`, `"LARGE_PLUS"`, and `"EXTRA_LARGE"`.
Color	color	Text	Determines the icon color. Valid values: Any hex color or `"STANDARD"` (default), `"ACCENT"`, `"POSITIVE"`, `"NEGATIVE"`, `"WARN"`, and `"SECONDARY"`.
Link	link	Link	Link that determines the behavior of the icon when clicked. Create links with: a!authorizationLink() a!documentDownloadLink() a!dynamicLink() a!newsEntryLink() a!processTaskLink() a!recordLink() a!reportLink() a!startProcessLink() a!submitLink() a!userRecordLink() a!safeLink()
Link Style	linkStyle	Text	Determines how the link is underlined. Valid values: `"INLINE"` (default), `"STANDALONE"`.
Show When	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.

Usage considerations

Using the icon, link, and style parameters

If icon is null or contains an empty array, no icon is displayed.
If link is null, the icon is not displayed as a link.
For nested rich text, if two conflicting styles are found (for example, both SMALL and LARGE), the innermost style will be displayed.

Adding decorative icons

An icon is considered decorative if it only serves a design purpose and does not add meaning or provide information. To meet accessibility guidelines for decorative elements, you should not include the altText, caption, or link parameters for a decorative icon. Appian will indicate the icon's purpose as decorative—and screen readers will skip it—when those parameters are not set and the icon is used in one of the following components:

Examples

Use the interactive editor below to test out the example code.

Linked icons within text

a!richTextDisplayField(
  value: {
    "In addition to a personal statement, candidates may submit up to three ",
    a!richTextItem(
      text: {
        a!richTextIcon(icon: "picture-o"),
        " Fine Art"
      },
      link: a!dynamicLink()
    ),
    ", ",
    a!richTextItem(
      text: {
        a!richTextIcon(icon: "headphones"),
        " Audio"
      },
      link: a!dynamicLink()
    ),
    ", or ",
    a!richTextItem(
      text: {
        a!richTextIcon(icon: "video-camera"),
        " Video"
      },
      link: a!dynamicLink()
    ),
    " media samples."
  }
)

Icons in a grid

a!gridLayout(
  label: "Today's Incidents",
  headerCells: {
    a!gridLayoutHeaderCell(label: "Type"),
    a!gridLayoutHeaderCell(label: "Status"),
    a!gridLayoutHeaderCell(label: "Summary"),
    a!gridLayoutHeaderCell(label: "Assignee")
  },
  columnConfigs: {
    a!gridLayoutColumnConfig(width: "ICON"),
    a!gridLayoutColumnConfig(width: "ICON")
  },
  rows: {
    a!gridRowLayout(
      contents: {
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "wrench",
            color: "#a600a6"
          ),
          align: "CENTER"
        ),
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "exclamation",
            color: "NEGATIVE"
          ),
          align: "CENTER"
        ),
        a!textField(
          value: "Broken escalator in Atrium B",
          readOnly: true
        ),
        a!textField(
          value: "Unassigned",
          readOnly: true
        )
      }
    ),
    a!gridRowLayout(
      contents: {
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "ticket",
            color: "#a600a6"
          ),
          align: "CENTER"
        ),
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "arrow-right",
            color: "POSITIVE"
          ),
          align: "CENTER"
        ),
        a!textField(
          value: "Ticketing queue back-up",
          readOnly: true
        ),
        a!textField(
          value: "Karen Anderson",
          readOnly: true
        )
      }
    ),
    a!gridRowLayout(
      contents: {
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "video-camera",
            color: "#a600a6"
          ),
          align: "CENTER"
        ),
        a!richTextDisplayField(
          value: a!richTextIcon(
            icon: "check",
            color: "POSITIVE"
          ),
          align: "CENTER"
        ),
        a!textField(
          value: "Faulty security camera",
          readOnly: true
        ),
        a!textField(
          value: "Amy Lee",
          readOnly: true
        )
      }
    )
  },
  rowHeader: 3
)

Standalone links

a!richTextDisplayField(
  value: {
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "home"
        ),
        " Home"
      },
      link: a!dynamicLink(),
      linkStyle: "STANDALONE"
    ),
    char(10),
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "check-square-o"
        ),
        " My Open Requests"
      },
      link: a!dynamicLink(),
      linkStyle: "STANDALONE"
    ),
    char(10),
    a!richTextItem(
      text: {
        a!richTextIcon(
          icon: "file-text-o"
        ),
        " My Documents"
      },
      link: a!dynamicLink(),
      linkStyle: "STANDALONE"
    )
  }
)

Available icons

The following table shows all available icons. Search the table to find specific icons.

Feature compatibility

The table below lists this component's compatibility with various features in Appian.

Feature	Compatibility	Note
Portals	Compatible
Offline Interfaces	Compatible
Sync-Time Custom Record Fields	Incompatible
Real-Time Custom Record Fields	Incompatible	Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.
Process Reports	Incompatible	Cannot be used to configure a process report.
Process Events	Incompatible	Cannot be used to configure a process event node, such as a start event or timer event.
Process Autoscaling	Incompatible	Cannot be used in autoscaled processes.
Event Consumer Filter Conditions	Compatible	Can be used in filter conditions.
Event Consumer Event Handlers	Compatible	Can be used in event handler expressions.

The following recipes include usage of the Rich Text Icon.

Action Banner Pattern (Formatting, Buttons, Rich Text, Cards):
Use the action banner pattern to display prominent messages that include interactive elements like links or buttons.
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.
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):
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.
Configure a Custom Search Box with Smart Search (Grids, Query Data, Records):
Implement smart search in a custom search box for a read-only grid.
Create a Custom Chat Interface:
Build a custom chat interface by using the cardLayout component to give each message a distinct visual style.
Display Semantic Search Match Quality in a Read-Only Grid (Grids, Query Data, Records):
Display a column in a read-only grid that illustrates if the semantic search results are strong, moderate, fair, or weak.
Document List Pattern (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.
Duration Display (Rich Text, Events):
Use the duration display pattern to show the amount of time in between events in a quick, easy-to-read way.
Dynamic Inputs (Inputs, Dynamic Links):
Use the dynamic inputs pattern to allow users to easily add or remove as many values as needed.
Grid with Selection Pattern (Grids, Heading component):
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 Stats Pattern (Formatting, Rich Text):
Use this pattern to display data values with icons in a compact, horizontal layout. This pattern uses side by side layouts with rich text display components to create inline statistics.
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.
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, Records):
Limit the number of rows that can be selected to an arbitrary number.
Navigation Patterns (Conditional Display, Formatting, Navigation):
Use the navigation patterns to help orient users and enable them to easily navigate pages and content.
Offline Task Report (Grids, Filtering, Process Task Links, Task Reports, Looping):
Display a task report for a user that will work in Appian Mobile, even when the user is offline.
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.
Task Report Pattern (Grids, Filters, Process Task Links, Task Reports):
Provides a simple way to create and display an Appian task report.
Upload Multiple Documents and Edit Document Properties (Document Management, Records):
Build a form that allows users to create a record and upload related documents. Users can edit the document name and add a document description before submitting the form.
Upload and rename a file (Document Management, Records):
Allow users to upload and rename a file.
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.

Feedback

Was this page helpful?