Tab Item

On This Page

SAIL Design System guidance available for Tab Layout

When you need to organize content into easily navigable sections, use the tab layout.

Function

a!tabItem( label, icon, contents, showWhen, validations, validationGroup )

Displays the components and layouts of a single tab within the tab layout.

Parameters

Name	Keyword	Types	Description
Label	label	Text	Text to display as the title for the tab.
Icon	icon	Text	Icon to display next to the label. Valid values: Any icon key. See Standard Icons for available icons.
Contents	contents	Any Type	Components and layouts to display when the tab is selected.
Show When	showWhen	Boolean	Determines if the tab is hidden and not evaluated. Default: `true`.
Validations	validations	List of Variant	Validation errors configured using a text array or an array of text and a!validationMessage(). These errors will display above the contents of the active tab and as an icon next to the tab title.
Validation Group	validationGroup	Text	The keyword used to identify the validation group for the tab item's validations parameter. When this parameter is specified, the validations parameter is only evaluated when a button that uses the same validation group is selected. This value cannot contain spaces. See the following recipes for more information: Configure Buttons with Conditional Requiredness Validation Groups for Buttons with Multiple Validation Rules

Usage considerations

Async loading placeholder

If this component relies on an async variable, a placeholder will be displayed until the async data is finished loading. See a!asyncVariable() for more information on how the placeholder behavior works.

Examples

To experiment with examples, copy and paste the expression into an interface object.

Conditional tab visibility

The following example shows how to show or hide a tab based on group membership.

{
  a!tabLayout(
    tabs: {
      a!tabItem(
        label: "Dashboard",
        contents: {
          /* This is placeholder content */
          a!cardLayout(
            contents: 
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "The contents of the Dashboard tab would go here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            ),
            showBorder: false
          )
        }
      ),
      a!tabItem(
        label: "Admin",
        icon: "lock",
        contents: {
          /* This is placeholder content */
          a!cardLayout(
            contents: 
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "The contents of the Admin tab would go here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            ),
            showBorder: false
          )
        },
        /* If you are in the Designers group, this tab displays. Otherwise, it is hidden. */
        showWhen: a!isUserMemberOfGroup(
          username: loggedInUser(),
          groups: a!groupsByName("Designers")
        )
      )
    }
  )
}

Feature compatibility

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

Feature	Compatibility	Note
Portals	Compatible
Offline Mobile	Incompatible
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.

The following recipes include usage of the Tab Item.

Trend-Over-Time Report (Charts, Reports):
This report provides an attractive, interactive design for exploring different series of data over time.

Feedback

Was this page helpful?