> 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 custom page width (Beta) > Example Sigma code representation of a workbook with a custom page width. 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 whose two pages use different widths. Look for `pageWidth` on each entry under `pages`. 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 ![](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 **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 ![](https://sigma-docs-screenshots.s3.us-west-2.amazonaws.com/Icons/button-add.svg) to add a second page. 8. With the second page open, select **Format**, then in the **Page style** section configure the following settings: | Option | Setting | | :------------------- | :--------- | | **Page width** | **Medium** | | **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: | Option | Setting | | :--------- | :-------------------------------- | | **Title** | Total riders by subscription type | | **X-axis** | *Subscription Type* | | **Y-axis** | *Count 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: | Option | Setting | | :--------- | :------------------------------- | | **Title** | Average by start date | | **X-axis** | `DateTrunc("day", [Start Date])` | | **Y-axis** | `Avg([Duration])` | 13. Drag the bar chart and the scatter chart side by side so each fills half the page width. ## Add a drawer 14. From the **Add element** bar, select **Layout** > **Drawer**. 15. Select **Edit drawer**, then set the drawer **Width** to **Medium** and the header **Title** to `Trip details`. 16. Inside the drawer, add a **Single row container** sourced from the *Trip* table, using *Id* as the unique identifier. 17. 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 18. 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**. 19. From the **Add element** bar, select **Layout** > **Popover**, and set the button as its trigger. 20. On the popover configuration page, from the **Add element** bar, select **Controls** > **List values**. 21. Configure the control with the following settings: | Option | Setting | | :--------------- | :-------------------------------------------- | | **Control ID** | `Start-Station-Name` | | **Label** | Start station | | **Value source** | The `TRIP` table, *Start Station Name* column | | **Selection** | **Multiple** | 22. 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 23. Select the background of the workbook, then in the side panel, select **Workbook settings**. 24. Open the **Workbook navigation** section and configure the following settings: | Option | Setting | | :--------------- | :------------------ | | **Page header** | Enabled | | **Page sidebar** | Enabled | | **Primary** | **Header** | | **Page tabs** | Hidden in view mode | 25. Select the header, then from the **Add element** bar, select **UI** > **Text**. 26. Enter `Bike Rental Data by TRIP`, then center it and apply the large heading style. 27. Select the sidebar, then set its **Width** to **Small**. 28. In the sidebar, from the **Add element** bar, select **UI** > **Navigation**. 29. Set the navigation element's orientation to **Vertical** and its alignment to **Center**, then add two manual options: | Label | Destination | | :-------- | :---------- | | All data | Page 1 | | Summaries | Page 2 | 30. Assign both the header and the sidebar to both pages. 31. In the document header, select **Save as**. 32. 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](/docs/get-the-code-representation-of-a-workbook). The code representation of this workbook appears like the following: #### YAML representation ```yaml workbookId: 10870a97-57d2-47ae-bc71-ba68d77e3d78 workbookUrlId: Ph7aTTDwaKQjJRgmLVvAbH createdBy: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o updatedBy: zgzXpTRVbfX4ZE9TEm9q9fUsfXZ5o createdAt: '2026-09-01T14:55:20.825Z' updatedAt: '2026-09-02T17:55:18.075Z' name: custom-page-width url: https://aws-api.sigmacomputing.com/org-name/workbook/Ph7aTTDwaKQjJRgmLVvAbH path: My Documents/ latestVersion: 4 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: '

**Bike Rental Data by TRIP**

' - 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: | documentVersion: 4 ``` ## Representing custom page widths #### Custom page width representation ```yaml ... - id: eKhTktnw name: Page 1 pageWidth: full - id: 5A4Sde2Qvs name: Page 2 backgroundColor: '#d1e6e3' pageWidth: medium ... ```