› Dashboard Designer › Design for different screen resolutions › Design View layouts for mobile dashboards

Design View layouts for mobile dashboards

Follow the procedure below to create a View to use on mobile devices or on any device with a non-standard window size. You need to resize and position components clearly on the View, and then add a mobile menu and mobile filters.

Also, you can open any existing View and modify it accordingly.

  1. In Studio, create a new View.
    1. On the Documents Tree, right-click Views and select New View.
    2. Assign a unique, descriptive name to the View and click OK.
  2. Add required components (charts, grids) to the canvas. Configure them as usual.
  3. In the upper right corner of the canvas, click Change View Layout .
    The list of all existing View layouts appears with check boxes. Select the check boxes as applicable.
  4. To edit a particular layout, select it by clicking the name. The View reloads accordingly and you can start editing it. If you click Change View Layout again, the currently selected layout appears at the top of the list.
  5. Add a mobile menu. Drag a menu item from the View toolbar to the canvas.
  6. Create a menu as usual.
  7. In the Display tab of the wizard, under Menu Style, select Mobile Menu.
  8. Specify all configuration settings as required (title, dimensions, icon) and click OK. Select Use slide effect to apply a flowing motion effect when opening the menu.
    If you set 0 as a dimension, the menu takes 100% of the browser size.
  9. To hide the mobile menu, swipe it to the left or tap outside the menu. To reopen it, click the menu icon.
  10. Create mobile filters. To launch filters from the dashboard, you can use the following actionable components: Button, image, or label.
    1. Add a filter to the View. For group filters in one filter panel, set the incoming action for the filter and use the same group later as incoming filter group for the actionable component.
      Some of the filters, such as time window, aggregation driver, and more, have no incoming action wizard. In this case, in the Property Panel, find Filter groups and set the group. Click OK.
    2. Add a component to launch the filter panel, such as a button. A filter panel shows all filters that belong to the group.
    3. In the Action wizard for the button, select Filter panel.
    4. For the group, select the same group that is set as an incoming action group for the filter created above. Click OK and click the Save icon. Hide the filter from the View: In the Property Panel, find Visible, and clear the check box.
    5. To use the mobile filter panel, in the Actions menu, activate Preview mode.
      All available filters are displayed on the sliding menu on the left. To hide the menu, swipe it to the left or tap outside the menu. To reopen the filter panel, click the assigned button.
  11. Save the View.
  12. Open the View in the Preview/Viewer on a mobile device. You can click the button to launch filters.

Basic concepts

When you work with layouts in Studio, the changes either apply only to a particular View layout or to multiple layouts.

  1. When you work on a View and selected a layout , you start editing a particular View layout. When you save the changes, they are applied individually only for the particular layout. For each layout, you can adjust the following.
    1. Move and resize components.
    2. Change and set up anchors.
    3. Hide some component. To hide a component for a given layout, highlight the component, find Visible in the Property Panel, and clear the check box.
    4. Change View size.
  2. However, some changes apply to all layouts.
    1. Adding a new component. To hide any component, use the Visible check box in the Property Panel.
    2. Changing data for a component: All changes in the wizards and all textual changes.
  3. Appearance properties may be changed both individually for a layout or for all layouts. To apply changes to all layouts, in the Property Panel, click All appearances. To apply the changes only to a particular layout, click this icon again.