Using the

The following sections cover important details about the tag item.

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.

Using the showBorder and borderColor parameters

When showBorder is true, a border renders around the tag using the color set in borderColor. The default border color is "SECONDARY".

When showBorder is false (default), no border renders and borderColor has no effect, even if a value is set.

Using the icon and iconPosition parameters

When icon is set, the icon renders inline with the tag text at the position specified by iconPosition.

When icon is not set (default), iconPosition has no effect and no space is reserved for an icon in the layout.

The icon is treated as decorative and is not exposed to assistive technology. If the icon carries meaning beyond the text label, use the tooltip parameter to describe the tag's meaning.

Valid icon values are the same keys accepted by the icon parameter on a!buttonWidget().

In right-to-left (RTL) locales, "START" renders on the visual right and "END" renders on the visual left, consistent with a!buttonWidget() behavior.

Appian Mobile considerations

Older versions of the Appian Mobile app (n-1 and n-2) do not support the showBorder, borderColor, icon, and iconPosition parameters. On those versions, the tag renders using its pre-existing appearance and the new parameters are ignored.

Examples

Display a tag with a border

a!tagField(
  labelPosition: "COLLAPSED",
  tags: {
    a!tagItem(
      text: "Approved",
      backgroundColor: "#E3F4E1",
      textColor: "#1E7B34",
      showBorder: true,
      borderColor: "POSITIVE"
    )
  }
)

Display a tag with an icon

a!tagField(
  labelPosition: "COLLAPSED",
  tags: {
    a!tagItem(
      text: "At Risk",
      backgroundColor: "WARN",
      icon: "exclamation-triangle",
      iconPosition: "START"
    )
  }
)

Display a tag with a border, icon, and large size

a!tagField(
  labelPosition: "COLLAPSED",
  size: "LARGE",
  tags: {
    a!tagItem(
      text: "Critical",
      backgroundColor: "#fdedf0",
      showBorder: true,
      borderColor: "NEGATIVE",
      icon: "exclamation-triangle",
      iconPosition: "START"
    )
  }
)

About the

Where to use the

Parameters