Designer and Viewer Modes
- 2 minutes to read
The Web Dashboard can act as a designer or viewer. The following modes are available:
- Designer
- The Web Dashboard works as a designer and allows users to create, edit, and save dashboards. In this mode, the control loads the extensions required to design dashboards. A user can switch the control to
Viewermode and can modify dashboards from storage on the client side. This is the default mode. - Viewer
- The Web Dashboard works as a viewer and displays dashboards to users. In this mode, the control also loads the extensions required to design dashboards. A user can switch the control to
Designermode. - ViewerOnly
- The Web Dashboard does not load the extensions required to design dashboards. Users cannot switch to
DesignerorViewermodes on the client. This mode affects only the Web Dashboard’s UI and does not affect server settings.
Specify Designer or Viewer Mode on the Server
The way you can specify the working mode on the server side depends on the backend type:
- ASP.NET Core Dashboard Control - Designer and Viewer Modes
- ASP.NET MVC Dashboard Extension - Designer and Viewer Modes
Specify Designer or Viewer Mode on the 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 Designer or Viewer Modes on the Client
Call the client-side switchToViewer and switchToDesigner methods to switch between modes.
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>
Switch Between Designer or Viewer Modes in the UI
You can enable the Dashboard Panel to allow users to switch between the Designer and Viewer.
Feedback