Free cookie consent management tool by TermsFeed Bars Template (a!cardTemplateBarTextJustified)
Bars Template
SAIL Design System guidance available for Card Layout

Reduce clutter and bring balance to your interface designs with cards. Learn how to use cards to organize content in a way that is easier for users to understand and navigate.

Function

a!cardTemplateBarTextJustified( id, primaryText, secondaryText, icon, iconColor, iconAltText, tooltip, showWhen )

Displays a bar card template with an icon, primary text, and secondary text justified on either side of the card. For use in the Card Choice Field cardTemplate parameter.

Parameters

Name Keyword Types Description

Id

id

Any Type

Value that identifies the card.

Primary Text

primaryText

Text

Optional text to display on the first line inside the card.

Secondary Text

secondaryText

Text

Optional text to display beneath the primary text inside the card.

Icon

icon

Text

Icon to display inside the card.

Icon Color

iconColor

Text

Determines the icon color. Valid values: Any hex color or "ACCENT" (default), "STANDARD", "SECONDARY", "POSITIVE", "NEGATIVE".

Icon Alternative Text

iconAltText

Text

Equivalent alternate text for use by screen readers.

Tooltip

tooltip

Text

Text to display on mouseover (web) or tap (mobile).

Visibility

showWhen

Boolean

Determines whether the card is displayed in the set of card choices. When set to false, the card is hidden. Default: true.

Usage considerations

Text truncation

  • Spacing and truncation look different in the bars template. To ensure that all your text has enough space to show properly, keep your secondary text short when using this template.

Examples

Use the interactive editor below to test out your code:

Feature compatibility

The table below lists this SAIL component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Sync-Time Custom Record Fields Incompatible
Real-Time Custom Record Fields Incompatible
Process Reports Incompatible

You cannot use this function to configure a process report.

Process Events Incompatible

You cannot use this function to configure a process event node, such as a start event or timer event.

Open in Github Built: Tue, Apr 16, 2024 (02:43:51 PM)

Bars Template

FEEDBACK