Designer and Viewer Modes
- 2 minutes to read
The Web Dashboard control can act as a Designer or Viewer. The following modes are available:
| Mode | Description |
|---|---|
| Designer | The Web Dashboard acts as a Dashboard Designer and allows end-users to create, edit and save dashboards. Note that in this case, you can switch to the Viewer mode on the client side. |
| Viewer | The Web Dashboard acts as a Dashboard Viewer and allows you to display dashboards to end-users. Note that in this case, you can switch to the Designer mode on the client side. |
| ViewerOnly | The Web Dashboard acts as a Dashboard Viewer without the capability to switch to the Designer mode on the client side. In this mode, the Web Dashboard does not load the extensions required for designing dashboards. |
- Specify Working Mode on Server
- Specify Working Mode on Client
- Switch Between Working Modes on Client
- Enable End Users to Switch Between Working Modes
Specify Working Mode on Server
Specifying the working mode on a server side depends on a used back end. Learn how to do this in the topics below:
- ASP.NET MVC Dashboard Extension | Designer and Viewer Modes
- ASP.NET Core Dashboard Control | Designer and Viewer Modes
Specify Working Mode on Client
To specify the initial working mode on the client side, use the workingMode option:
<head>
<!-- ...-->
<script>
window.onload = function () {
DevExpress.Dashboard.ResourceManager.embedBundledResources();
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
endpoint: "/dashboardControl",
workingMode: "ViewerOnly"
});
dashboardControl.render();
};
</script>
</head>
Switch Between Working Modes on Client
You can switch between modes using the client-side DashboardControl.switchToViewer and DashboardControl.switchToDesigner methods.
This example shows how to switch between the Web Dashboard’s working modes in the button’s onclick event handler.
<head>
<!-- -->
</head>
<body>
<div style="left:0;top:0;"><input type="button" id="button1" value="Switch to Viewer" onclick="switchWorkingMode()" /></div>
<div id="web-dashboard" style="position: absolute; left:0;top:30px;right:0;bottom:0;"></div>
<script>
function switchWorkingMode() {
var button = document.getElementById("button1");
var workingMode = dashboardControl.isDesignMode();
if (workingMode == true) {
dashboardControl.switchToViewer();
button.value = "Switch to Designer";
}
else {
dashboardControl.switchToDesigner();
button.value = "Switch to Viewer";
}
}
</script>
</body>
Enable End Users to Switch Between Working Modes
You can allow end users to switch between the Designer and Viewer by enabling the Dashboard Panel.
