Dashboard Panel

• Sep 28, 2020

The Dashboard Panel is displayed on the Web Dashboard’s UI next to the Dashboard Surface and provides the following capabilities:

• Allows users to switch between dashboards available in the dashboard storage.
• Provides the capability to switch between the Designer and Viewer modes (the Edit in Designer/Viewer buttons).

Desktop View	Mobile Layout

Note that the Web Dashboard does not show the Dashboard Panel by default. To display it, register the DashboardPanelExtension using the DashboardControl.registerExtension method:

function onBeforeRender(sender) {
    // ...
    dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
}

You can also download and use a separate extension located on GitHub for more customization options: Dashboard Panel.

The dashboard panel allows you to add a screenshot (thumbnail) for each dashboard in a mobile layout. Follow the steps below to add thumbnails:

1. Create dashboard screenshots.

2. Create the DashboardThumbnail folder in your project and add the screenshots to this folder. Screenshots should have the same name as their corresponding dashboards.

   

3. Use the extension’s DashboardPanelExtensionOptions.dashboardThumbnail property to specify the path to the screenshots.

   JS

   function onBeforeRender(sender) {
     var control = sender.GetDashboardControl();
     control.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(control, { dashboardThumbnail: "./DashboardThumbnail/{0}.png" }));
   }
   

See Extensions Overview to learn more about extensions.