Layout Perspective

In the Layout perspective, you can design the layout of your dashboard from scratch or by using a CDE template. While defining the layout you can apply styles and add HTML elements as text or images.

Use the Layout Structure toolbar in the top left of the window to add and delete rows, columns, HTML blocks, and images in your dashboard. To move elements around, drag and drop them within the Layout perspective. You can also add resource files (JS or CSS) or snippets.

Layout Structure toolbar

Icon

Icon Name

Description

Save as Template icon

Save as Template

Select to save the dashboard as a template which can be applied to other dashboards. The generated template can contain just the layout structure or may include components and data sources.

Apply Template icon

Apply Template

Select to apply a template to a dashboard. You can select from a list of pre-defined templates or use a template you created.

Add Resource icon

Add Resource

Select to add CSS or JavaScript resources to the dashboard. These can be snippets, which will be included in the dashboard’s HTML as inline code, or external files, which are loaded with the dashboard’s HTML.

Add Bootstrap Panel icon

Add Bootstrap Panel

Select to add a Bootstrap panel to the dashboard layout. The Bootstrap panel contains a panel header, panel body and panel footer.

Add FreeForm icon

Add FreeForm

Select to add an HTML free-form component to the dashboard. This is a user-defined HTML tag with user-defined CSS classes and user-defined attributes. For example, you can have a tag such as the following:```xml

```

This element can then receive other elements, providing limitless custom nesting potential, and you can view it easily in the layout structure, which is not always possible with an HTML element.

Add Row icon

Add Row

Select to add a row to the dashboard.

Add Column icon

Add Column

Select to add a column to the dashboard.

Add Space icon

Add Space

Select to add a separator to the dashboard. Optimally used between rows to add a space.

Add Image icon

Add Image

Select to add an image to the dashboard. Note that images are typically added via CSS instead of through the Add Image button.

Add Html icon

Add Html

Select to add inline HTML code to the dashboard, such as text. Note that an HTML element can only be added to a column, not a row.

Duplicate Layout Element icon

Duplicate Layout Element

Select to duplicate a dashboard section as laid out in the Editor

Delete icon

Delete

Select to delete a dashboard section as laid out in the Editor.

As you build the layout you will see the structure of nested rows and columns below the left toolbar in the **Layout Structure** panel. As you select one of the elements on the layout structure, the **Properties** panel on the right is updated. Here you can configure the element to your specifications.

Layout Structure and Properties panels

Last updated

Was this helpful?