Dashboard Panel
- 2 minutes to read
The Dashboard Panel is displayed on the Web Dashboard’s UI next to the Dashboard Surface and allows users to do the following:
- Switch between dashboards available in the dashboard storage.
- Switch between the Designer and Viewer modes (the Edit in Designer/Viewer buttons).
Desktop View | Mobile Layout |
|---|---|
|
|
The dashboard panel is the DashboardPanelExtension. The Web Dashboard does not show the Dashboard Panel by default.
Display the Dashboard Panel
Note that the Web Dashboard does not show the Dashboard Panel by default. To display it, register the DashboardPanelExtension using the DashboardControl.registerExtension method:
// The dashboardControl variable is the obtained DashboardControl instance.
dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
See the following topic for information on how to get access to DashboardControl: Get Underlying DashboardControl.
You can also download and use a separate extension located on GitHub for more customization options: Dashboard Panel.
Add Thumbnails for a Mobile Layout
In a mobile layout, you can add a screenshot (thumbnail) for each dashboard. We recommend that you add thumbnails if you have a fixed set of dashboards, because you need to create the thumbnails manually and put them in the folder.
Follow the steps below to add thumbnails:
- Create and prepare dashboard screenshots.
Create a folder in your project and add the screenshots to this folder. Screenshots should have the same name as their corresponding dashboards.
Use the extension’s DashboardPanelExtensionOptions.dashboardThumbnail property to specify the path to the screenshots. In this example, the folder name is DashboardThumbnail. The
{0}variable corresponds to the dashboard name.// The dashboardControl variable is the obtained DashboardControl instance. dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl, { dashboardThumbnail: "./DashboardThumbnail/{0}.png" }));See the following topic for information on how to get access to
DashboardControl: Get Underlying DashboardControl.