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 Web Dashboard loads the extensions required to design dashboards. A user can switch the Web Dashboard 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 Web Dashboard also loads the extensions required to design dashboards. A user can switch the Web Dashboard 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 afffect server settings. See the following topic for information on how to protect your data: Working Mode Access Rights.
Specify Designer or Viewer Mode on the Server
You can use the DashboardBuilder.WorkingMode property to specify the mode on the server when you configure the Web Dashboard.
In Viewer mode, you have access to the client API and can modify dashboards from storage. The clientAPI also allows you to switch between Viewer and Designer modes. For information on how to protect dashboards stored on a server, see the following topic: Security Considerations.
<div style="position: absolute; left:0;top:0;right:0;bottom:0;">
@(Html.DevExpress().Dashboard("clientDashboardDesigner1")
.Width("100%")
.Height("100%")
.WorkingMode(WorkingMode.ViewerOnly)
)
</div>
Switch Between Designer or Viewer Modes on the 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 on the client-side using the onclick event of the added button.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - AspNetCoreWebDashboard</title>
@Html.DevExpress().StyleSheets()
<script>
function switchMode() {
var button = document.getElementById("button1");
var workingMode = clientDashboardDesigner1.isDesignMode();
if (workingMode == true) {
clientDashboardDesigner1.switchToViewer();
button.value ="Switch to Designer";
}
else {
clientDashboardDesigner1.switchToDesigner();
button.value ="Switch to Viewer";
}
}
</script>
</head>
<body>
<div style="left:0;top:0;">
<input type="button" id="button1" value="Switch to Viewer" onclick="switchMode()" />
</div>
<div style="position: absolute; left:0;top:30px;right:0;bottom:0;">
@(Html.DevExpress().Dashboard("clientDashboardDesigner1")
.Width("100%")
.Height("100%")
.WorkingMode(WorkingMode.Designer)
)
</div>
@Html.DevExpress().Scripts()
</body>
</html>
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.
