Tab Layout

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!tabLayout( tabs, showWhen, marginAbove, marginBelow, highlightColor, contentsPadding )

Displays content organized into a set of selectable tabs.

Use a!tabItem() to define each tab.

overview of tab layout with annotations

Parameters

Name	Keyword	Types	Description
Tabs	tabs	Any Type	Tabs to display, configured as a list of a!tabItem().
Show When	showWhen	Boolean	Determines whether the layout is displayed on the interface. When set to false, the layout is hidden and is not evaluated. Default: `true`.
Margin Above	marginAbove	Text	Determines how much space is added above the layout. Valid values: `"NONE"` (default), `"EVEN_LESS"`, `"LESS"`, `"STANDARD"`, `"MORE"`, `"EVEN_MORE"`.
Margin Below	marginBelow	Text	Determines how much space is added below the layout. Valid values: `"NONE"`, `"EVEN_LESS"`, `"LESS"`, `"STANDARD"` (default), `"MORE"`, `"EVEN_MORE"`.
Highlight Color	highlightColor	Text	Determines the highlight color of the selected tab. Valid values: Any valid hex color, hex color including transparency, or '"ACCENT"' (default). To add transparency to the hex color, add two additional digits between `00` (more transparent) and `FF` (less transparent).
Contents Padding	contentsPadding	Text	Determines the space between the tab edges and its contents. Valid values: `"NONE"`, `"EVEN_LESS"`, `"LESS"`, `"STANDARD"` (default), `"MORE"`, `"EVEN_MORE"`.

Usage considerations

Loading behavior

The contents of all tabs load on initial page load. Use async loading to load slow-loading content separately from the rest of the interface.

Input error behavior

If a tab has an input error, such as required field that is empty, form submission is blocked.

For any tab that contains an input error, an error icon displays next to the tab label. When an errored tab is not visible due to responsive behavior, the icon shows on the navigation arrow.

Validation errors configured using the validation parameter display above the tab contents on an active tab.

Component restrictions

Tab layout cannot be used in the following components:

Background color

The tab layout and all tab items are transparent. They will use the color of the component they are placed in.

Margins and padding

The marginAbove parameter adds or removes space above the tab bar.
The marginBelow parameter adds or removes space below the tab contents of all tab items.
The contentsPadding parameter adds or removes space around the contents of all tab items.

Responsive behavior

When the tabs don't fit on the screen, users can use arrows to navigate to more tabs. In the Appian Mobile app, they can swipe the tab bar to see more tabs.

tab layout responsive behavior

Examples

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

Basic tab layout

The following example shows a basic tab layout that uses a custom tab highlight color and optional tab icons for each tab item.

{
  a!tabLayout(
    tabs: {
      a!tabItem(
        label: "Dashboard",
        icon: "tachometer",
        contents: {
         /* This is placeholder content*/
          a!cardLayout(
            contents: 
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "The contents of the first tab would go here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            ),
            showBorder: false
          )
        }
      ),
      a!tabItem(
        label: "Cases",
        icon: "folder-open",
        contents: {
         /* This is placeholder content*/
          a!cardLayout(
            contents: 
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "The contents of the second tab would go here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            ),
            showBorder: false
          )
        }
      ),
      a!tabItem(
        label: "Search",
        icon: "search",
        contents: {
         /* This is placeholder content*/
          a!cardLayout(
            contents: 
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "The contents of the third tab would go here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            ),
            showBorder: false
          )
        }
      ),
      a!tabItem(
        label: "Knowledge Base",
        icon: "lightbulb-o",
        contents: {
         /* This is placeholder content*/
          a!cardLayout(
            contents: 
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "The contents of the fourth tab would go here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            ),
            showBorder: false
          )
        }
      )
    },
    highlightColor: "#38CF7F"
  )
}

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

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?