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
You can use the DashboardBuilder.WorkingMode property to specify the mode on the server side when configuring the Web Dashboard.
<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 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 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>
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.
