Example representation: Workbook with a page header (Beta)

View as Markdown

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.

This is an example representation of a workbook, retrieved using the Get a 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 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 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.

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 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:

This example uses a table from the Sigma 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 page header panel containing a text element. Look for the header entry under panels, and the <Panel> block in the layout that carries its contents. This example uses one workbook to demonstrate several layout and navigation features together: two pages of differing width and background color, a drawer, a popover, a page header, a page sidebar, and the workbook navigation settings that turn the panels on.

To create this workbook in the Sigma UI:

  1. Go to the Home page.

  2. Select Create new > Workbook.

    A new workbook opens.

  3. From the Add element bar, select Data > Table.

  4. In the Select source modal, search for the table TRIP in the EXAMPLES.BIKES schema, then select it.

    The table appears on the page.

  5. Select the background of the workbook canvas to open the page-level editor panel, then select Format.

  6. In the Page style section, set Page width to Full.

  7. In the page tab bar, select to add a second page.

  8. With the second page open, select Format, then in the Page style section configure the following settings:

    OptionSetting
    Page widthMedium
    Background color#d1e6e3
  9. On the second page, from the Add element bar, select Chart > Bar, using the Trip table element as the source.

  10. In the editor panel, select Properties and configure the bar chart with the following settings:

    OptionSetting
    TitleTotal riders by subscription type
    X-axisSubscription Type
    Y-axisCount of Id
  11. From the Add element bar, select Chart > Scatter, using the Trip table as the source.

  12. In the editor panel, select Properties and configure the scatter chart with the following settings:

    OptionSetting
    TitleAverage by start date
    X-axisDateTrunc("day", [Start Date])
    Y-axisAvg([Duration])
  13. Drag the bar chart and the scatter chart side by side so each fills half the page width.

Add a drawer

  1. From the Add element bar, select Layout > Drawer.

  2. Select Edit drawer, then set the drawer Width to Medium and the header Title to Trip details.

  3. Inside the drawer, add a Single row container sourced from the Trip table, using Id as the unique identifier.

  4. Inside the single row container, add a Value list, then add a field for each column in the Trip table and set each one to display that column as a Source column.

    The value list reads the values for each field from the single row container’s current selected row.

Add a popover

  1. On the second page, from the Add element bar, select UI > Button, then set the button text to Filter by station and its appearance to Filled.

  2. From the Add element bar, select Layout > Popover, and set the button as its trigger.

  3. On the popover configuration page, from the Add element bar, select Controls > List values.

  4. Configure the control with the following settings:

    OptionSetting
    Control IDStart-Station-Name
    LabelStart station
    Value sourceThe TRIP table, Start Station Name column
    SelectionMultiple
  5. Select Targets, then add both the bar chart and the scatter chart as targets on their Start Station Name columns.

Add a page header and sidebar

  1. Select the background of the workbook, then in the side panel, select Workbook settings.

  2. Open the Workbook navigation section and configure the following settings:

    OptionSetting
    Page headerEnabled
    Page sidebarEnabled
    PrimaryHeader
    Page tabsHidden in view mode
  3. Select the header, then from the Add element bar, select UI > Text.

  4. Enter Bike Rental Data by TRIP, then center it and apply the large heading style.

  5. Select the sidebar, then set its Width to Small.

  6. In the sidebar, from the Add element bar, select UI > Navigation.

  7. Set the navigation element’s orientation to Vertical and its alignment to Center, then add two manual options:

    LabelDestination
    All dataPage 1
    SummariesPage 2
  8. Assign both the header and the sidebar to both pages.

  9. In the document header, select Save as.

  10. Enter a name for the workbook, then 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.

The code representation of this workbook appears like the following:

workbookId: bf256c44-0530-4f89-ad6a-94fae913e851
workbookUrlId: 0dbDo9lQAfWsyi5HRONcIa
createdBy: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o
updatedBy: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o
createdAt: '2026-09-01T14:55:18.614Z'
updatedAt: '2026-09-02T17:55:16.565Z'
name: page-header
url: https://aws-api.sigmacomputing.com/org-name/workbook/0dbDo9lQAfWsyi5HRONcIa
path: My Documents/<folder-name>
latestVersion: 6
ownerId: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o
isArchived: false
contents:
schemaVersion: 1
elements:
- id: wzbE2ryOqEax7
kind: table
source:
connectionId: b2af3691-12a0-48fa-a91d-fbe2e1b31627
kind: warehouse-table
path:
- EXAMPLES
- BIKES
- TRIP
columns:
- id: 6DqBgE6Rq
formula: '[TRIP/Id]'
- id: wOW6NNWOZqI
formula: '[TRIP/Duration]'
- id: jC0c8h8Ewz3g
formula: '[TRIP/Start Date]'
- id: cOIGflvCqIlC
formula: '[TRIP/Start Station Name]'
- id: JpVJowwqZg
formula: '[TRIP/Start Station Id]'
- id: GyZynaXgfv
formula: '[TRIP/End Date]'
- id: qQzuJifMd2
formula: '[TRIP/End Station Name]'
- id: 3Esuzz9y
formula: '[TRIP/End Station Id]'
- id: a1ySXDMEm
formula: '[TRIP/Bike Id]'
- id: Kng0H6Uvst
formula: '[TRIP/Subscription Type]'
- id: B0QtJd
formula: '[TRIP/Zip Code]'
order:
- 6DqBgE6Rq
- wOW6NNWOZqI
- jC0c8h8Ewz3g
- cOIGflvCqIlC
- JpVJowwqZg
- GyZynaXgfv
- qQzuJifMd2
- 3Esuzz9y
- a1ySXDMEm
- Kng0H6Uvst
- B0QtJd
actions:
- id: C8cm1jvfHT
trigger: on-select
effects:
- effect: set-single-row-container
target:
type: container
containerElementId: iiLCmhIF9J
value:
type: column
columnId: 6DqBgE6Rq
- effect: open-overlay
overlayId: PP4VeBkK
- id: 2cupqZEjQS
kind: button
text: Filter by station
appearance: filled
align: stretch
- id: YPnYhttini
kind: bar-chart
source:
elementId: wzbE2ryOqEax7
kind: table
columns:
- id: QkCWbl0KHg
formula: '[TRIP/Subscription Type]'
- id: WzylljrcNT
formula: Count([Id])
- id: Hxs4ZSLfqT
formula: '[TRIP/Id]'
- id: pYv6sn8Yte
formula: '[TRIP/Duration]'
- id: VAUq7L7o8O
formula: '[TRIP/Start Date]'
- id: PzMjD99x2Q
formula: '[TRIP/Start Station Name]'
- id: gNZIAYb4yz
formula: '[TRIP/Start Station Id]'
- id: 635xOYDnsW
formula: '[TRIP/End Date]'
- id: P4QoyH9oHJ
formula: '[TRIP/End Station Name]'
- id: ZOowShiPpw
formula: '[TRIP/End Station Id]'
- id: MFCFMM3GjX
formula: '[TRIP/Bike Id]'
- id: TlW1AmADyo
formula: '[TRIP/Zip Code]'
yAxis:
columnIds:
- WzylljrcNT
xAxis:
columnId: QkCWbl0KHg
name: Total riders by subscription type
- id: ZJU2VE7Ugn
kind: scatter-chart
source:
elementId: wzbE2ryOqEax7
kind: table
columns:
- id: E7oa6OhNzK
formula: DateTrunc("day", [Start Date])
- id: nCwNT7N0Ac
formula: Avg([Duration])
- id: Hxs4ZSLfqT
formula: '[TRIP/Id]'
- id: pYv6sn8Yte
formula: '[TRIP/Duration]'
- id: VAUq7L7o8O
formula: '[TRIP/Start Date]'
- id: PzMjD99x2Q
formula: '[TRIP/Start Station Name]'
- id: gNZIAYb4yz
formula: '[TRIP/Start Station Id]'
- id: 635xOYDnsW
formula: '[TRIP/End Date]'
- id: P4QoyH9oHJ
formula: '[TRIP/End Station Name]'
- id: ZOowShiPpw
formula: '[TRIP/End Station Id]'
- id: MFCFMM3GjX
formula: '[TRIP/Bike Id]'
- id: TlW1AmADyo
formula: '[TRIP/Zip Code]'
- id: QkCWbl0KHg
formula: '[TRIP/Subscription Type]'
yAxis:
columnIds:
- nCwNT7N0Ac
xAxis:
columnId: E7oa6OhNzK
name: Average by start date
- id: iiLCmhIF9J
kind: single-row-container
source:
elementId: wzbE2ryOqEax7
kind: table
keyColumnId: 6DqBgE6Rq
keyColumnValue: '4549'
- id: YaA0f1s70U
kind: value-list
fields:
- fieldId: kE0O68GwYr
formula: '[TRIP single row container/Id]'
- fieldId: dSfOKB6h6H
formula: '[TRIP single row container/Duration]'
- fieldId: kwUSn2wGYy
formula: '[TRIP single row container/Start Date]'
- fieldId: YxPLJM_Z9s
formula: '[TRIP single row container/Start Station Name]'
- fieldId: 8L3lEDcs2d
formula: '[TRIP single row container/Start Station Id]'
- fieldId: mCUACt_vpl
formula: '[TRIP single row container/End Date]'
- fieldId: aVI3nfD02X
formula: '[TRIP single row container/End Station Name]'
- fieldId: vWzf43SuNz
formula: '[TRIP single row container/End Station Id]'
- fieldId: 8YhbBnrf55
formula: '[TRIP single row container/Bike Id]'
- fieldId: thBU_Fllcz
formula: '[TRIP single row container/Subscription Type]'
- fieldId: K1MAaqRr_V
formula: '[TRIP single row container/Zip Code]'
- kind: control
controlId: Start-Station-Name
id: gtt7lQZlkR
name: Start station
filters:
- source:
kind: table
elementId: YPnYhttini
columnId: PzMjD99x2Q
- source:
kind: table
elementId: ZJU2VE7Ugn
columnId: PzMjD99x2Q
controlType: list
mode: include
selectionMode: multiple
values: []
source:
kind: source
source:
kind: warehouse-table
connectionId: b2af3691-12a0-48fa-a91d-fbe2e1b31627
path:
- EXAMPLES
- BIKES
- TRIP
columnId: 0j9rfNmHBAGe3asxsM
- id: Bhxu4cjacj
kind: text
body: '<p class="h-large" style="text-align: center"><u>**Bike Rental Data by TRIP**</u></p>'
- id: WdRX6qRR2y
kind: navigation
optionStyle:
orientation: vertical
alignment: center
mode: manual
options:
- label: All data
destination:
type: page
pageId: eKhTktnw
- label: Summaries
destination:
type: page
pageId: 5A4Sde2Qvs
pages:
- id: eKhTktnw
name: Page 1
pageWidth: full
- id: 5A4Sde2Qvs
name: Page 2
backgroundColor: '#d1e6e3'
pageWidth: medium
panels:
- id: BLBdY0XZoi
title: Header 1
pages:
- eKhTktnw
- 5A4Sde2Qvs
type: header
- id: LY6Zvallc8
title: Sidebar 1
pages:
- eKhTktnw
- 5A4Sde2Qvs
type: sidebar
width: small
settings:
navigation:
pageHeader: enabled
pageSidebar: enabled
primary: header
pageTabsInViewMode: hidden
overlays:
- id: PP4VeBkK
type: drawer
name: Drawer 1
drawer:
width: medium
header:
title: Trip details
- id: K3fNdJBevg
type: popover
name: Popover 1
popover:
triggerElementId: 2cupqZEjQS
kind: workbook
layout: |
<?xml version="1.0" encoding="utf-8"?>
<Page type="grid" gridTemplateColumns="repeat(24, 1fr)" gridTemplateRows="auto" id="eKhTktnw">
<Element elementId="wzbE2ryOqEax7" gridColumn="1 / 25" gridRow="1 / 30"/>
</Page>
<Page type="grid" gridTemplateColumns="repeat(24, 1fr)" gridTemplateRows="auto" id="5A4Sde2Qvs">
<Element elementId="2cupqZEjQS" gridColumn="1 / 25" gridRow="1 / 4"/>
<Element elementId="YPnYhttini" gridColumn="1 / 13" gridRow="4 / 27"/>
<Element elementId="ZJU2VE7Ugn" gridColumn="13 / 25" gridRow="4 / 27"/>
</Page>
<Page type="grid" gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto" id="PP4VeBkK">
<Container elementId="iiLCmhIF9J" type="grid" gridColumn="1 / 13" gridRow="1 / 22" gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto">
<Element elementId="YaA0f1s70U" gridColumn="1 / 13" gridRow="1 / 22"/>
</Container>
</Page>
<Page type="grid" gridTemplateColumns="repeat(12, 1fr)" gridTemplateRows="auto" id="K3fNdJBevg">
<Element elementId="gtt7lQZlkR" gridColumn="1 / 13" gridRow="1 / 4"/>
</Page>
<Panel type="grid" gridTemplateColumns="repeat(24, 1fr)" gridTemplateRows="auto" id="BLBdY0XZoi">
<Element elementId="Bhxu4cjacj" gridColumn="1 / 25" gridRow="1 / 4"/>
</Panel>
<Panel type="grid" gridTemplateColumns="repeat(6, 1fr)" gridTemplateRows="auto" id="LY6Zvallc8">
<Element elementId="WdRX6qRR2y" gridColumn="1 / 7" gridRow="1 / 8"/>
</Panel>
documentVersion: 6

Representing page headers

...
panels:
- id: BLBdY0XZoi
title: Header 1
pages:
- eKhTktnw
- 5A4Sde2Qvs
type: header
settings:
navigation:
pageHeader: enabled
...