Tabs | CYPEX Documentation

Tips & examples

A tabbed container viewport with a top navigation bar holding static tab labels. Clicking a tab switches the active visible panel to display its specific child elements.

When to use

Organizing large dashboards or complex forms into separate, focused tabbed views within a single screen container.
Grouping related controls, tables, or sub-views into distinct tabs to reduce cognitive overload and save vertical scroll space.

What you need

Acts as a structural layout container holding independent child widgets, forms, tables, and display fields across distinct tab panels.

Examples

A customer 360 view with separate tabs for ‘Overview’, ‘Orders’, ‘Support Tickets’, and ‘Settings’.
An analytical dashboard switching between ‘Sales Metrics’ (Tab 0) and ‘Inventory Status’ (Tab 1), referencing elements.default_tabs_7c4e5b9a256e.indexSelected.toString() in dependent queries.

Avoid

Squeezing the container into tiny height/width footprints when its nested children require ample room, prefer full-width (12 units) and generous height (at least 12 units).
Using tabs for sequential multi-step wizard processes where data must be validated step-by-step, use a dedicated stepper or multi-page layout instead.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Tabs

LabelsoptionalList of Text: A list of static tab definitions where tab labels can be created, edited, reordered, or deleted.
Default: none

Styling

VariantoptionalOne of: standard, scrollable, fullWidth

Controls how tab headers distribute their spacing along the top navigation bar.

Choices

standard
scrollable
fullWidth

Default: standard

Sizing

Minimum size: 4 × 4 grid cells (width × height).

Translatable labels

tabItems.name — The visible text label shown on each individual tab header.

Accessibility

Implements standard ARIA tablist patterns (role='tablist', role='tab', role='tabpanel'). Screen readers announce active tab indices and dynamic panel changes.

Left and Right Arrow keys move focus across tab headers.
Enter or Spacebar activates the focused tab panel.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myTabs.<property>

indexSelected number The current index selected value of this element. elements.myTabs.indexSelected

When Zero-based index of the open tab. Use it to load data only for the visible tab, or to reflect the current tab in a heading.

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myTabs.indexSelected

Replace myTabs with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Child slots

This container accepts nested elements in these slots:

slot	accepts
`content`	any element

Nesting overview

graph TD
  root["default_tabs"]
  root --> content["content slot"]

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
{
  "config": {
    "default": 0
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  "config": {
    "default": 0,
    "labels": [
      "labels"
    ],
    "variant": "standard"
  },
  "children": {
    "content": [
      {
        "type": "default_text_input",
        "config": {
          "label": "Example field"
        }
      }
    ]
  }
}

Ready-made setups

Full-Width Multi-Section Workspace Tabs ↕

Configures a 12x12 tab container with Full Width tab navigation, organizing sub-views across multiple independent panel areas.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "config": {
    "tabs": {
      "tabItems": [
        {
          "id": "tab_0",
          "name": "Overview"
        },
        {
          "id": "tab_1",
          "name": "Analytics"
        },
        {
          "id": "tab_2",
          "name": "Settings"
        }
      ]
    },
    "styling": {
      "tabVariant": "Full Width"
    }
  }
}