Example representation: Report with element layering (Beta)

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

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

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 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 Create new > Report.

   A new report opens.

3. Right-click this image and select Save Image As…

   

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

The code representation of this report appears like the following:

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/<folder-name>
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: '<p class="h-med" style="text-align: center">2026 Annual Logoipsum Network Financial Report</p>'
    - id: YFWsXyLdNq
      kind: divider
  pages:
    - id: SX3nvQLjKX
      name: .default
  config:
    margin: 0
    pageHeight: 1056
    pageWidth: 816
  kind: report
  layout: |
    <?xml version="1.0" encoding="utf-8"?>
    <Page id="SX3nvQLjKX">
      <Element elementId="py17bmXm0L" x="0" y="0" width="816" height="1056"/>
      <Element elementId="w1Man2fD0v" x="155" y="220" width="500" height="100"/>
      <Element elementId="YFWsXyLdNq" x="30" y="320" width="755" height="100"/>
    </Page>
documentVersion: 4

Representing element layering

...
layout: |
  <?xml version="1.0" encoding="utf-8"?>
  <Page id="SX3nvQLjKX">
    <Element elementId="py17bmXm0L" x="0" y="0" width="816" height="1056"/>
    <Element elementId="w1Man2fD0v" x="155" y="220" width="500" height="100"/>
    <Element elementId="YFWsXyLdNq" x="30" y="320" width="755" height="100"/>
  </Page>
...

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.