Responsive layout dashboard mode
Dashboards are traditionally created for displaying on a large device, such as a computer monitor or TV, however some may be viewed on smaller mobiles devices such as phones.
Typically, multiple dashboards would need to be created for the best possible use of space on the display. With the responsive dashboard re-size mode, dashboards laid out in a grid can automatically re-flow themselves when necessary to fit different displays.
To build a responsive dashboard, its contents must be docked into the cells of a template grid. See Using a template grid for resizing for details.
Related video: Resize Mode
2. The responsive mode flow algorithm
Responsive mode re-flows the individual grid cells from left to right, then top to bottom, as the available size of the screen changes:
- The dashboard will attempt to fit as many cells as possible by using the edit-time width of the template cells. When there is not enough space, it will start a new row. The left-over space will then be filled by evenly resizing all the cells.
- The height of the row is defined by the cell with the largest edit-time height, after it was already placed in the row. All the cells in the row will expand to match that height.
- The header in a group of cells will be placed before the content cells, in the left-top position of the group. The remaining content cells in the group will be positioned according to the two points described above.
When the responsive dashboard is loaded, the layout is calculated based on the current page size, and is re-calculated each time it changes size. This can happen either by resizing the browser window or changing the device from portrait to landscape mode.
3. Grouping and headings
In a regular template grid, headers and groups do not need to be defined because the overall layout does not change. However in responsive mode, some extra information is required on the cells to preserve certain important positioning.
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 by holding Shift while clicking them. If you selected an element filling the cell instead of the cell itself, choose Select Template Cell in the toolbar.
Select Group Cells in the toolbar to create a group.
In this example, 1 is grouped with 2, 3 with 4, and 5, 6, and 11 with 12. In responsive mode, the layout is recalculated to keep all groups together. Cells 1 and 2 take up the whole row because while cell 3 can fit onto that row, cells 3 and 4 cannot. Cells 5, 6, 11 and 12 appear before cells 7, 8, 9 and 10 because the group is kept together, and cells 5 and 6 come before cells 7, 8, 9 and 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 selecting and merging two cells to create a header row.
Select the header cell, and click Toggle Header Row in the toolbar.
In the example below, cells 5 and 6 have been merged. Note how, despite the merge, 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 and 12). As 11 and 12 can fit underneath 5 & 6, the group is shrunk, and cell 7 is placed to the immediate right of the group.
4. 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.
5. Using responsive mode
To use responsive mode, add a template grid to the dashboard and place all contents within a cell. For best results, each element should use relative positioning.
6. Design notes
Responsive mode is designed to cleanly modify the layout of the dashboard when viewing on a device with a smaller display size or different orientation. 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.
6.1. Example dashboard
The dashboard below has been created using responsive design. When editing the dashboard 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.
When editing, the 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, it may be used in portrait mode. In this case, the dashboard layout is re-computed, and it is able to fit a layout of 2 across and 3 down.
On a smartphone, which has a much smaller screen, the layout can only fit a grid one cell wide.
7. See also