This article contains information about editing the layout of a research dashboard, with detailed steps on reorganizing the order of elements shown in a tab, changing element or page styles, and adding external coding resources.

Overview

Simple dashboards will only have one element within each container, and containers appear vertically at the maximum width. The following sections will provide you with the keywords and syntax to change these parameters and so adjust the overall appearance of your dashboard.

1: Grouping Elements Within a Dashboard

By default, only one dashboard element is shown per container. Using the groupkeyword will allow you to display multiple elements in one container, where filters and zooming can be applied to all elements. Elements within groups should appear on a new line and the group itself should be ended with the keyword Endgroup.

group <name of group>
<elements>
Endgroup

Example:

To group two charts and one table within one container, you would use the following code:

1.1: Changing the Container Layout

Dashboards use a 12-column layout, meaning that up to 12 elements can fit across a page within one container. The keyword layout allows you to specify how many elements are shown horizontally in a container before starting over at the left-most part of the same container. The values for layout are separated by comma:

layout <# in row 1,..., # in row n>

Example:

To allow two charts to appear in the first line of a container and a table in the second line, you would use the following code:

1.2: Keeping Elements Together

The keyword keepwith moves elements to the same column as the specified element using element ids.

Note: In order for keepwith to affect the structure of your dashboard, you will first need to use the width keyword to insert visible columns.

Example:

If you are working with four different elements, and you would like the first table to appear in the same column as the first chart and the second table in the same column as the second chart, you could use the following code:

Placement for style attributes is very important. The style modification here would be a globally-applied style because it is above all occurrences of the page keyword. It will span across the entire dashboard. This code changes the active tab's font color to orange and adds a white text shadow:

The code above works as expected and the screenshot below illustrates the result:

3.1.1: HTML Extensions

The dynamic dashboard extension system allows you to add more data, value and information to your dashboard. You can use dynamic extensions to add the following information to a dashboard's html block:

The { {survey.start_date} }, { {survey.total} }, and { {survey.title} } are examples of the built-in reserved keywords that you can use to present additional information in your dashboard. The following reserved keywords are available:

Keyword

Description

survey.start_date

A date/time object that will output the date when the Survey was created

survey.total

The total number of respondents for the entire survey

survey.title

The survey's alternative report name

filter.total

The total number of respondents for the entire survey based on the current filter

In addition to the reserved keywords above, the following attributes are accessible: