Tab Layout

SAIL Design System guidance available for Tab Layout When you need to organize content into easily navigable sections, use the tab layout.

About the tab layout

Displays content organized into a set of selectable tabs.

See When to use a tab layout for guidance on when to use this component versus a form layout.

Where to use the tab layout

Use a!tabLayout() in the following components:

• a!formLayout(): contents parameter.
• a!headerContentLayout(): contents parameter, or in the header parameter (inside a!cardLayout() or a!billboardLayout()).
• a!pane(): contents parameter (inside a!paneLayout()).
• a!wizardStep(): contents parameter (inside a!wizardLayout()).
• a!boxLayout(): contents parameter.
• a!cardLayout(): contents parameter.
• a!cardGroupLayout(): cards parameter (inside a!cardLayout()).
• a!columnLayout(): contents parameter (inside a!columnsLayout()).
• a!sectionLayout(): contents parameter.
• a!tabItem(): contents parameter (inside a!tabLayout()).
• a!chatMessage(): messageContent parameter (inside a!chatField()).
• a!sidebarTemplate(): additionalContents parameter (inside a!formLayout() or a!wizardLayout()).
• a!barOverlay(): contents parameter (inside a!billboardLayout()).
• a!columnOverlay(): contents parameter (inside a!billboardLayout()).
• a!fullOverlay(): contents parameter (inside a!billboardLayout()).

You can't use a!tabLayout() in a read-only grid (a!gridField()), editable grid (a!gridLayout()), or side by side layout.

Supported components

The tabs parameter supports a list of a!tabItem().

Parameters

a!tabLayout( tabs, showWhen, marginAbove, marginBelow, highlightColor, contentsPadding, selectedTab, selectedTabSaveInto )

Using the tab layout

The following sections cover important details about the tab layout.

Controlling the active tab with selectedTab

The selectedTab parameter lets you programmatically control which tab is active. Set selectedTab to a variable that holds either the tab index (starting at 1) or the id value defined on each a!tabItem().

When selectedTab is null, the first visible tab will be active on page load.

To create shareable tab links, pair selectedTab and selectedTabSaveInto with a rule input that maps to a URL parameter on a site or portal page. When a user clicks a tab, selectedTabSaveInto updates the rule input, which updates the URL. When the user navigates back to the page or shares the link, the specified tab loads.

Using tab identifiers for dynamic tabs

When tabs are dynamically shown or hidden, you must use the id parameter on each tab item to keep selectedTab values stable. See Using tab identifiers for details.

Loading behavior

By default, the contents of all tabs evaluate on initial page load. To defer evaluation of specific tabs, use the loadBehavior parameter on a!tabItem(). See Tab loading behavior for details.

To load slow-loading content separately from the rest of the interface, use async loading.

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 validations parameter display above the tab contents on an active tab.

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.

Examples

The following examples demonstrate the tab layout.

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.

Use the interactive editor to experiment with the example.

Role-based default tab

The following example shows how to use selectedTab and selectedTabSaveInto to set the default tab based on the user's group membership. Users in the "Designers" group default to the "Team Workload" tab, while all other users default to the "My Tasks" tab.

To use this with URL parameters on a site or portal page, replace the local variable with a rule input (such as ri!activeTab) and configure it as a URL parameter in the site or portal object.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
{
  a!localVariables(
    /* Determine the default tab based on group membership */
    local!activeTab: if(
      a!isUserMemberOfGroup(
        username: loggedInUser(),
        /* Replace this group constant with a constant from your environment */
        groups: a!groupsByName("Designers")
      ),
      "teamWorkload",
      "myTasks"
    ),
    a!tabLayout(
      tabs: {
        a!tabItem(
          id: "myTasks",
          label: "My Tasks",
          icon: "tasks",
          contents: {
            /* Replace with task list content */
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "Task list content goes here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            )
          }
        ),
        a!tabItem(
          id: "teamWorkload",
          label: "Team Workload",
          icon: "users",
          contents: {
            /* Replace with team workload content */
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "Team workload content goes here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            )
          }
        ),
        a!tabItem(
          id: "systemLogs",
          label: "System Logs",
          icon: "file-text-o",
          contents: {
            /* Replace with system logs content */
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: a!richTextItem(
                text: "System logs content goes here",
                style: "EMPHASIS"
              ),
              align: "CENTER"
            )
          }
        )
      },
      selectedTab: local!activeTab,
      selectedTabSaveInto: local!activeTab
    )
  )
}

Feature compatibility

Related recipes

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