Example representation: Workbook with a popover (Beta)
Example representation: Workbook with a popover (Beta)
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:
- You must be assigned an account type 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.
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 popover that holds a list values control targeting two charts. Look for the popover entry under overlays, whose triggerElementId points at the button that opens it.
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:
-
Go to the Home page.
-
Select
Create new > Workbook.A new workbook opens.
-
From the Add element bar, select Data > Table.
-
In the Select source modal, search for the table
TRIPin theEXAMPLES.BIKESschema, then select it.The table appears on the page.
-
Select the background of the workbook canvas to open the page-level editor panel, then select Format.
-
In the Page style section, set Page width to Full.
-
In the page tab bar, select
to add a second page. -
With the second page open, select Format, then in the Page style section configure the following settings:
-
On the second page, from the Add element bar, select Chart > Bar, using the Trip table element as the source.
-
In the editor panel, select Properties and configure the bar chart with the following settings:
-
From the Add element bar, select Chart > Scatter, using the Trip table as the source.
-
In the editor panel, select Properties and configure the scatter chart with the following settings:
-
Drag the bar chart and the scatter chart side by side so each fills half the page width.
Add a drawer
-
From the Add element bar, select Layout > Drawer.
-
Select Edit drawer, then set the drawer Width to Medium and the header Title to
Trip details. -
Inside the drawer, add a Single row container sourced from the Trip table, using Id as the unique identifier.
-
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
-
On the second page, from the Add element bar, select UI > Button, then set the button text to
Filter by stationand its appearance to Filled. -
From the Add element bar, select Layout > Popover, and set the button as its trigger.
-
On the popover configuration page, from the Add element bar, select Controls > List values.
-
Configure the control with the following settings:
-
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
-
Select the background of the workbook, then in the side panel, select Workbook settings.
-
Open the Workbook navigation section and configure the following settings:
-
Select the header, then from the Add element bar, select UI > Text.
-
Enter
Bike Rental Data by TRIP, then center it and apply the large heading style. -
Select the sidebar, then set its Width to Small.
-
In the sidebar, from the Add element bar, select UI > Navigation.
-
Set the navigation element’s orientation to Vertical and its alignment to Center, then add two manual options:
-
Assign both the header and the sidebar to both pages.
-
In the document header, select Save as.
-
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: