Responsive dashboard layout

The 12.1.1 release introduces a responsive layout feature for dashboards.

This feature enhances the authoring experience and usability across different devices by optimizing the dashboard layout for various screen sizes, including mobile devices. You can also use it for grouping the content and organizing visualizations.

To use a responsive layout, go to the Responsive tab when you create a new dashboard and select one of the available templates as seen in the following image:

Dashboard creation screen with the "Responsive" tab selected. Several responsive layout templates are available as options for creating a new dashboard.

Warning: The layout remains fixed after you select it and it's not possible to change it, even on different tabs. The feature also does not support mixed layout types.

The responsive dashboard layout feature comes with the following key capabilities:

Layout selection: You can now choose between responsive and non-responsive layouts when you create a new dashboard.
Adaptive widgets: If you change the position of a panel or resize the dashboard window, the widget automatically adapts its placement and alignment.
Intuitive resizing and swapping: Smart alignment algorithms facilitate smooth layout transitions, while an intuitive interface makes the authoring experience smoother and more efficient.
Drop zones for precise widget placement: Each layout cell supports five drop zones: top, right, bottom, left, and center. You can use these zones for more control over widget placement.
Cell deletion: Dashboards now differentiate between empty and populated cells for accurate deletion.
Data population: The feature mirrors data population from the non-responsive layouts, supports drag-and-drop function, and slot item selection. If you use the copy and paste or click-add-to functions, the feature uses a smart placement logic to make sure that it adds the content to empty cells. It can also split the data between existing cells.
Window resizing: You can now dynamically resize a dashboard and its layout automatically adapts to the new screen size. It includes transition to a single-column or two-column layouts on smaller screens for enhanced readability.
Printing to PDF files: You can print the dashboard to a .pdf file in View mode and in the New Page mode.
Nested dashboard widgets: You can use the nested dashboard widgets as standard widgets or as containers for grouping and organizing the content.

To successfully implement the responsive layout, you must make sure that the dashboard uses manifest version 12.1.1 or later and confirm widget boundaries by employing the layout grid. However, if the widgets do not render correctly, check the layout specification and verify the feature support.