> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://help.sigmacomputing.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://help.sigmacomputing.com/_mcp/server.

# Example representation: Workbook with a tabbed container (Beta)

> Example Sigma code representation of a workbook with a tabbed container.

This documentation describes one or more public beta features that are in development. Beta features are subject to quick, iterative changes; therefore the current user experience in the Sigma service can differ from the information provided in this page.

This page should not be considered official published documentation until Sigma removes this notice and the beta flag on the corresponding feature(s) in the Sigma service. For the full beta feature disclaimer, see [Beta features](/docs/sigma-product-releases#beta-features).

This is an example representation of a workbook, retrieved using the [Get a workbook](/reference/get-workbook) endpoint with the query parameter `includeContents=true`. Representations like this one can be used to create a workbook from code using the [Create a workbook](/reference/create-workbook) endpoint. Each page in this example library includes the code representation of the workbook and step-by-step instructions to create it in the Sigma UI.

Consult this example and others in the [Workbook representation example library](/docs/workbook-representation-example-library) to:

* Troubleshoot the formatting of a particular feature in code representation
* Relate a feature from the Sigma UI to its representation in code
* Provide context to AI tools used to create workbooks from code

This example representation cannot be used as-is. All identifying details, such as IDs, names, and URLs, have been replaced with randomized ID values or generic substitutions. The format of these contents, like the length of ID values, is preserved for demonstrative purposes. However, this representation cannot be directly used without modification to the base URL, connection details, and more. For more information, see [Create and manage workbooks from code](/docs/manage-workbooks-as-code).

## System and user requirements

To complete the steps in this example, you must meet the user requirements listed below for creating the workbook in the UI and creating it from code.

The ability to create this workbook in the Sigma UI requires the following:

* You must be assigned an [account type](/docs/account-type-and-license-overview) with the **Create, edit, and publish workbooks** permission enabled.
* You must have access to a connection to a data platform.

The ability to create a workbook from code requires the following:

* You must be assigned an [account type](/docs/account-type-and-license-overview) with the **Create, edit, and publish workbooks** permission enabled.
* You must have developer credentials for the Sigma API. For more information, see [Get started with the Sigma REST API](/reference/get-started-sigma-api).

This example uses a table from the [Sigma Sample Connection](/docs/sigmas-sample-connection). Your organization might have disabled access to the Sigma sample connection. If so, you can contact an admin to enable it, or use a table from another connection to follow along with this example.

## Create the example workbook in the Sigma UI

This example shows a workbook with a tabbed container element.

To create this workbook in the Sigma UI:

1. Go to the **Home** page.

2. Select ![](https://sigma-docs-screenshots.s3.us-west-2.amazonaws.com/Icons/button-add.svg) **Create new** > **Workbook**.

   A new workbook opens.

3. From the **Add element** bar, select **Layout** > **Tabbed container**.

   The tabbed container appears in the workbook.

4. In the **Add element** bar, select **UI** > **Button** and drag the button element into **Tab 1** in the tabbed container.

5. Open **Tab 2** of the tabbed container.

6. In the **Add element** bar, select **Data** > **Table**.

7. In the **Select source** modal, search for the table `TRIP` in the `EXAMPLES.BIKES` schema.

   The table is added to **Tab 2**.

8. In the document header, select **Save as**.

9. Enter a name for the workbook, such as `tabbed-container`.

10. Select **Save**.

## Get a code representation of this workbook

To get a representation of this workbook, follow the steps in [Get the code representation of a workbook](/docs/get-the-code-representation-of-a-workbook).

The code representation of this workbook appears like the following:

#### YAML representation

```yaml
workbookId: e8b9a2a8-7872-4be1-b9e3-9e9014cbf969
workbookUrlId: T7lA2Pkzsh6ac68lhUzbgG
createdBy: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o
updatedBy: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o
createdAt: '2026-07-24T19:43:44.910Z'
updatedAt: '2026-07-24T21:59:30.351Z'
name: tabbed-container
url: https://aws-api.sigmacomputing.com/org-name/workbook/T7lA2Pkzsh6ac68lhUzbgG
path: My Documents/<folder-name>
latestVersion: 2
ownerId: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o
isArchived: false
contents:
  schemaVersion: 1
  elements:
    - id: dBJxWe1c2w
      kind: tabbed-container
      tabs:
        - name: Tab 1
        - name: Tab 2
        - name: Tab 3
    - id: NszYEEPEGv
      kind: button
      text: Click Me
      appearance: filled
    - id: d9J4Xp93fc
      kind: table
      source:
        connectionId: b2af3691-12a0-48fa-a91d-fbe2e1b31627
        kind: warehouse-table
        path:
          - EXAMPLES
          - BIKES
          - TRIP
      columns:
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/ID
          formula: '[TRIP/Id]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/DURATION
          formula: '[TRIP/Duration]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/START_DATE
          formula: '[TRIP/Start Date]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/0j9rfNmHBAGe3asxsM
          formula: '[TRIP/Start Station Name]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/START_STATION_ID
          formula: '[TRIP/Start Station Id]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/END_DATE
          formula: '[TRIP/End Date]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/END_STATION_NAME
          formula: '[TRIP/End Station Name]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/END_STATION_ID
          formula: '[TRIP/End Station Id]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/BIKE_ID
          formula: '[TRIP/Bike Id]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/SUBSCRIPTION_TYPE
          formula: '[TRIP/Subscription Type]'
        - id: inode-MKXXT4nWWmGyzyQ6EUt9UH/ZIP_CODE
          formula: '[TRIP/Zip Code]'
      order:
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/ID
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/DURATION
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/START_DATE
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/0j9rfNmHBAGe3asxsM
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/START_STATION_ID
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/END_DATE
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/END_STATION_NAME
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/END_STATION_ID
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/BIKE_ID
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/SUBSCRIPTION_TYPE
        - inode-MKXXT4nWWmGyzyQ6EUt9UH/ZIP_CODE
      visibleAsSource: false
  pages:
    - id: 'klnv2R4pyE'
      name: Page 1
  kind: workbook
  layout: |
    <?xml version="1.0" encoding="utf-8"?>
    <Page type="grid" gridTemplateColumns="repeat(24, 1fr)" gridTemplateRows="auto" id="klnv2R4pyE">
      <TabbedContainer elementId="dBJxWe1c2w" type="tabbed-container" gridColumn="1 / 13" gridRow="1 / 21">
        <Tab gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto">
          <Element elementId="NszYEEPEGv" gridColumn="1 / 5" gridRow="1 / 4"/>
        </Tab>
        <Tab gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto">
          <Element elementId="d9J4Xp93fc" gridColumn="1 / 13" gridRow="1 / 21"/>
        </Tab>
        <Tab gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto"/>
      </TabbedContainer>
    </Page>
documentVersion: 2

```

## Representing tabbed containers

#### Tabbed container representation

```yaml
...
id: dBJxWe1c2w
kind: tabbed-container
tabs:
- name: Tab 1
- name: Tab 2
- name: Tab 3
...
```

## Representing the tabbed container layout

The `layout` property determines the position of the tabbed container and identifies which elements are in which tabs. The tabbed container and the elements in each tab appear next to each other in the `contents.elements` array. In the layout XML, the `TabbedContainer` element wraps a `Tab` element for each tab, and each `Element` inside a `Tab` references the element that appears in that tab by its `elementId`. The `layout` XML is the only place that the nesting of elements within tabs is defined.

#### Layout representation

```yaml
...
layout: |
  <?xml version="1.0" encoding="utf-8"?>
  <Page type="grid" gridTemplateColumns="repeat(24, 1fr)" gridTemplateRows="auto" id="klnv2R4pyE">
    <TabbedContainer elementId="dBJxWe1c2w" type="tabbed-container" gridColumn="1 / 13" gridRow="1 / 21">
      <Tab gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto">
        <Element elementId="NszYEEPEGv" gridColumn="1 / 5" gridRow="1 / 4"/>
      </Tab>
      <Tab gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto">
        <Element elementId="d9J4Xp93fc" gridColumn="1 / 13" gridRow="1 / 21"/>
      </Tab>
      <Tab gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto"/>
    </TabbedContainer>
  </Page>
...
```