Dashboard Panel

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

Desktop View

Mobile Layout

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) {
    // ...
    var dashboardControl = sender.GetDashboardControl();
    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.

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

See Working with Extensions to learn more about extensions.

See Also