Free cookie consent management tool by TermsFeed

Tag Item

On This Page
SAIL Design System guidance available for Tags

Draw attention and drive engagement to the right places on your interface. Learn how to use tags to highlight valuable links, sections, or other components so users don't miss important or notable items.

Function

a!tagItem( text, backgroundColor, textColor, tooltip, showWhen, link )

Displays a short text label with colored background for use with a!tagField. Tag items can contain a record link or user record link.

See also: Tag Field, Tag design guidance

Parameters

Name Keyword Types Description

Text

text

Text

Text to display within the tag. The tag displays a maximum of 40 characters.

Background Color

backgroundColor

Text

Determines the background color. Valid values: Any valid hex color or hex color including transparency, or "ACCENT" (default), "POSITIVE", "NEGATIVE", "WARN", "SECONDARY". To add transparency to the hex color, add two additional digits between 00 (more transparent) and FF (less transparent).

Text Color

textColor

Text

Determines the text color. Valid values: Any valid hex color or "STANDARD" (default).

Tag Tooltip

tooltip

Text

Text to display as a tooltip on the tag.

Show When

showWhen

Boolean

Determines whether the tag is displayed on the interface. When set to false, the tag is hidden and is not evaluated. Default: true.

Link

link

Any Type

Link to apply to the tag. Create a link with a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!safeLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), or a!authorizationLink().

Usage considerations

Using the text parameter

  • A tag will not render if no text is specified.
  • Any tabs, line breaks, and leading or trailing spaces are trimmed. Spaces between words are trimmed down to one space.
  • If the text is too long to display within a tag, the text is truncated. The full text is shown on hover.

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.

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!tagItem_24r2

Added the ability to use any link subcomponent in a tag.

For more on what's changed, see New version details.

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

The following recipes include usage of the Tag Item.

  • Cards as Info Pattern (Cards, Formatting, Stamps):

    Use this pattern to display high level summaries of options with icons and descriptions. This pattern uses card layouts with stamp fields and rich text to create visually distinct information cards.

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

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

Feedback