Skip to content

Layout and responsiveness

By default, dashboards are responsive. You can also customize how widgets layout will react to the size of the screen. Also, if the screen width is not sufficient, tabs will be shown as a dropdown selector.

Configuration

There are two types of widgets' layouts:

  • grid: this is the default layout. Widgets are on a "grid". You can have several widgets one beside each other, you can have empty space between widgets. This mode works well on desktop screen or tablets, but not on mobile phones.
  • list: in this mode, widgets are one above each other. Each widget takes 100% of the width of the screen.

The configuration of the layout is in the Layout / Print section.

There are three responsive mode to configure how the layout will adapt to the screen size:

  • Switch to list layout on mobile (default): in this mode, by default, the dashboard uses the grid layout but when the screen width is too small, it automatically switches to the list mode.
  • Keep the grid layout on mobile: in this mode, the layout is always grid even on small screen. This can be used only for very specific dashboards.
  • Always use list layout: in this mode, the dashboard use the list mode whatever the size of the screen.

Redirecting to a particular dashboard according to screen resolution

Responsiveness is not a one-size-fits-all solution. In case our dashboard has a lot of large tables and advanced widgets, it may not fit perfectly to a mobile device usage. In this situation, it could be a better option to show only a few critical KPIs. A good approach for this issue is to redirect the user to a dashboard specifically designed for mobile devices.

This is achieved by inserting this snippet of code within the dashboard header:

<script type="text/javascript">
if (screen.width <= 600) {
    document.location = "https://app.serenytics.com/viewer/mobile_specific_dashboard_UUID";
}
</script>

Dynamically show & hide widgets

When you are in List layout, you can define if a widget is visible or not through variables.

If you have a variable named srn_visibility_widget_ID_WIDGET (e.g. srn_visibility_widget_13 for widget 13) and its value is hidden then it won't be shown in the dashboard.

Of course, you can add buttons that are linked to such variables in order to create dashboards where the user can show or hide some widgets.

This option only works in List layout.