> 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: Report with element layering (Beta) > Example Sigma code representation of a report with an element layering. 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 report, retrieved using the [Get a report](/reference/get-report) endpoint with the query parameter `includeContents=true`. Representations like this one can be used to create a report from code using the [Create a report](/reference/create-report) endpoint. Each page in this example library includes the code representation of the report and step-by-step instructions to create it in the Sigma UI. Consult this example and others in the [Report representation example library](/docs/report-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 reports 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 reports from code](/docs/manage-reports-as-code). ## System and user requirements To complete the steps in this example, you must meet the user requirements listed below for creating the report in the UI and creating it from code. The ability to create this report 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 reports** permission enabled. * You must have access to a connection to a data platform. The ability to create a report from code requires the following: * You must be assigned an [account type](/docs/account-type-and-license-overview) with the **Create, edit, and publish reports** 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 report in the Sigma UI This example shows a report with element layering, where a text element and a divider element is layered on top of an image element. To create this report 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** > **Report**. A new report opens. 3. Right-click this image and select **Save Image As…** ![Sample brand logo image of Logo Ipsum Network company](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/sigma.docs.buildwithfern.com/91425bbb039703cf3926369228e1274bfd80ccf0361ba0aad5f7cb6385f68c2d/assets/docs-images/sample-logo-ipsum-network.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260916%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260916T193514Z&X-Amz-Expires=604800&X-Amz-Signature=fe91158a1bf2093e705fb59ecb0dd4fd21dcefb51b160d9ef6bef96d094523ee&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) 4. Use the image element's drag handles to resize the image to cover the entire report page. 5. In the **Add element** bar, select **UI** > **Text**. A text element appears on a new report page. 6. Style the text element: 1. Enter `2026 Annual Logoipsum Network Financial Report` in the text element. 2. In the toolbar, select the text preset dropdown and select **Medium heading**. 3. In the **Format** tab of the editor panel, in the **Size** section, resize the image to **Width** of `500` and **Height** of `100`. 7. Drag the text element to the first page of the report, overlapping the image element. In the **Position** section, set the **X** to `150` and **Y** to `100`. 8. In the **Add element** bar, select **UI** > **Divider**. A divider element appears on a new report page. 9. In the **Format** tab of the editor panel, in the **Size** section, resize the divider to **Width** of `755` and **Height** of `100`. 10. Drag the text element to the first page of the report, overlapping the image element. In the **Position** section, set the **X** to `30` and **Y** to `320`. 11. Delete the second page by selecting the page tab and selecting ![](https://sigma-docs-screenshots.s3.us-west-2.amazonaws.com/Icons/trash.svg) **Delete**. 12. In the document header, select **Save as**. 13. Enter a name for the report, such as `element-layering`. 14. Select **Save**. ## Get a code representation of this report To get a representation of this report, follow the steps in [Get the code representation of a report](/docs/get-the-code-representation-of-a-report). The code representation of this report appears like the following: #### YAML representation ```yaml reportId: 9ff29550-71dd-4ab8-bddf-754beb55d886 reportUrlId: bVF4mVkno2ZeMEiVfjYMSz createdBy: UWCrlXH5OZPIvkmpaeAMF2oY3Y2dQ updatedBy: wAj3rAPRQ7VNx4vU2IaXXBv0x6YEk createdAt: '2026-09-03T17:58:54.511Z' updatedAt: '2026-09-16T16:56:26.360Z' name: element-layering url: https://aws-api.sigmacomputing.com/org-name/report/bVF4mVkno2ZeMEiVfjYMSz path: My Documents/ latestVersion: 4 ownerId: UWCrlXH5OZPIvkmpaeAMF2oY3Y2dQ isArchived: false contents: schemaVersion: 1 elements: - id: py17bmXm0L kind: image source: kind: upload key: 8ed87a12-0db3-4973-a1a1-3c7ed8f008ad/251f4373-b933-476b-89fa-3d5045e789dc.png - id: w1Man2fD0v kind: text body: '

2026 Annual Logoipsum Network Financial Report

' - id: YFWsXyLdNq kind: divider pages: - id: SX3nvQLjKX name: .default config: margin: 0 pageHeight: 1056 pageWidth: 816 kind: report layout: | documentVersion: 4 ``` ## Representing element layering #### Element layering representation ```yaml ... layout: | ... ``` In this report, the elements are layered in the following order, from backmost to frontmost: 1. Image element (`NGkTAdVjX8`) 2. Text element (`S3uNRfuZmm`) 3. Divider element (`pPZlpGVukX`) This is represented in the `layout` field of the report code representation. The order in which the elements are listed represent their layering positions, with elements later in the list being in front of of elements earlier in the list.