Responsive Layout Dashboard Mode
It takes time to develop dashboards. Traditionally most dashboards are created for displaying on a large device, such as a computer monitor or TV. However with today’s ubiquity of mobile devices with a variety of screen sizes, it is important to build dashboards that both display appealing informative information, but also adapt to the size of the device they are being viewed on.
Typically multiple dashboards would need to be created to serve every size of display. However with Responsive Dashboard mode, this it is no longer always necessary to create separate dashboards. It still may be better to create separate dashboards when the dashboard is designed to display very large amounts of information, for instance, a very detailed map. How much information you want to display is an important consideration when designing This is important when designing a dashboard that will also be visible on a smart phone sized display, as the size limits the amount of information you can effectively communicate.
To build a responsive dashboard you must use template grids. For more details on how to use templates, see this article.
2. Enabling Responsive Mode
Responsive mode is a property of the dashboard. It is selected in the Re-size mode property. Click on the dashboard, select properties, and change the Re-Size Mode to “Responsive”.
3. Using Responsive Mode
To use responsive mode you create the dashboard using the template grid, placing the visualizations within each of the grids. For best results element should use relative position.
4. How Responsive Mode works
Responsive mode reflows the individual grid cells from left to right, then top to bottom, as the available size of the screen changes. By default, the size of the cells in the grid are uniform. However, this is not a requirement for responsive mode. The sizes can be changed to better reflect the content that will be placed in those cells. In Responsive mode, when the page is loaded the layout is calculated based on the current page size. Additionally each time the page changes size the page layout is recomputed. This can happen several ways. On the desktop, the browser window can be resized. On mobile devices, the device can be changed from portrait to landscape mode.
When a layout is computed, it starts in the top left cell, and moves from left to right, top to bottom.
4.1. Grouping and Headings
Two new abilities were added to templates to allow for more complex layouts with responsive mode. These are Groups and Headers. In a regular template, headers and groups do not need to be defined because the layout is static. However in responsive mode, some extra information is required on the cells to preserve certain important layouts.
In the layout below, a template grid with 6 rows and 6 columns has been created.
Grouping several cells together ensures that these cells are kept together when the page layout is computed. The group is considered a single cell when the layout is computed. To configure several adjacent cells to form a group, select the cells. If the objects are selected instead of cell, the cells themselves can be selected by clicking “Select Template Cell” in the toolbar.
Select “Group Cells” in the toolbar to create a group.
In this example, cells 1 &2, 3&4, and 5,6,11&12 have been grouped. In responsive mode, the layout is recomputed to keep all groups together. Cells 1&2 take up the whole row because cells while cell 3 can fit onto that row, cell 3&4 cannot. Cells 5,6,11&12 all occur before cells 7,8,9&10 because the group is kept together, and cells 5&6 come before cells 7,8,9&10.
Frequently, when grouping items together, a header is desired. When the layout is computed, a cell that is tagged a header row will not have any cells placed to the cells immediate right, even if there is space. When the header row is inside a group, this only applies within the group.
A cell can be designated a header row if it is the only cell in the row in the template grid OR the only cell in the row in the group. When creating a group this may require merging two cells to create a header row.
Select the header cell, and click “Toggle Header” on the toolbar.
In the example below, cells 5&6 have been merged, note how despite the merger, they do not function as a header.
When the header property is set, cell 5&6 (which is now one cell), contains no cells to the immediate right that are in its group (“5&6”, 11 & 12). As 11 & 12 can fit underneath “5&6”, the group is shrunk, and cell 7 is placed to the immediate right of the group.
5. Design Notes
Responsive mode is designed to cleanly modify the layout of the dashboard cleanly when viewing on a device with a smaller display size, or different orientation. When viewing at screen sizes larger than the size the dashboard is designed for may cause undesired layouts. Dashboards targeted for larger displays should be designed for those displays from the outset. Smaller screens also require consideration of how information is conveyed in a small area.
Another consideration that must be taken into account is how the recalculation of the layout impacts the positioning of sections of the dashboard. When a dashboard is displayed at full size two related visualizations that are in different cells that are adjacent, may not be when the layout is recalculated. To ensure that related visualizations are kept together, the cells should be configured in a group.
5.1. Example Dashboard
The dashboard below has been created using responsive design. When designing the dashboard in the dashboard designer, there is a base size that is used, however when viewing the dashboard on smaller displays, the dashboard layout is recomputed to take into account the smaller sized display.
In edit mode, the original dashboard is designed to have a grid that is 3 across and 2 down. When viewed at full size, this is the display that is seen.
When the dashboard is viewed on a tablet device which is often used in portrait mode, the dashboard layout is recomputed, and it able to fit a layout of 2 across and 3 down.
On a smart phone, which has a much smaller screen, the layout can only fit a grid one cell wide.
6. See also