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:

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.

DashboardPanel_Main