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. You can switch to Viewer mode on the client side from this mode. |
| Viewer | The Web Dashboard acts as a Dashboard Viewer and allows you to display dashboards to end users. You can switch to Designer mode on the client side from this mode. |
| ViewerOnly | The Web Dashboard acts as a Dashboard Viewer without the capability to switch to 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
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 Core Dashboard Control - Designer and Viewer Modes
- ASP.NET MVC Dashboard Extension - 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 () {
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
endpoint: "/dashboardControl",
workingMode: "ViewerOnly"
});
dashboardControl.render();
};
</script>
</head>
Switch Between Working Modes on Client
Call the client-side switchToViewer and switchToDesigner methods to switch between modes. Note that in ViewerOnly mode, the Web Dashboard does not load the extensions required for designing dashboards and you cannot switch to Designer mode on the client side.
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 if you enable the Dashboard Panel.
