Intro to UI Elements

UI elements add additional context and/or styling to workbook pages. They include buttons, dividers, images, spacers, embeds, and text.

Summary of Content

Create a UI Element
Element Types
       Text
       Images
       Buttons
       Dividers
       Spacers
       Embed Elements
Related Resources

Requirements

  • To create and edit UI elements, you must have Can Edit access to the individual workbook.

Create a UI Element

Before you start: This action is only available in Edit mode. To begin editing, click Edit in the top right corner of the page. Learn more

  1. In the editor panel's sidebar, click the + icon.
    This will open the ADD NEW panel.
  2. Under CONTROL ELEMENTS select your desired control element type.
    Your new element will appear on the page.

Now what?

    • Use the editor panel to configure your new element.
    • Use your cursor to drag and drop the element anywhere on the page canvas. 

Element Types

Screen_Shot_2021-05-13_at_4.36.47_PM_copy.png

Text

Text boxes allow you to add titles, captions and overall more explanation to your workbook pages. You can choose the size, style, and font of your dashboard text. Learn more

Images

Add images to your dashboard via upload or URL. Go to images settings to change how images fit within the dashboard container.  You can reference control variables within the image embed URL to customize images on a per-dashboard basis. 

Buttons

Buttons elements can be set to redirect dashboard viewers to an external website url or a different Sigma page. There are also customization options for button title and style. You can choose whether the link opens in a new browser tab, and you can optionally add control values.

Dividers

Horizontal dividers visually partition elements or groups of elements on a page. 

Spacers

Spacers create empty visual space on the page canvas, pushing elements up, down, to the left, or to the right. 

Embed Elements

Embed webpages, videos, or other Sigma workbooks. Any iFrame enabled URL can be embedded. Use control variables within your embed URL to customize what content is displayed according to different inputs. 

Related Resources

Workbooks: An Overview
Intro to Element Types