Designer and Viewer Modes

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

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 () {
            DevExpress.Dashboard.ResourceManager.embedBundledResources();            
            var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
                endpoint: "/dashboardControl",
                workingMode: "ViewerOnly"            
            });
            dashboardControl.render();
        };
    </script>
</head>

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 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 by enabling the Dashboard Panel.

DashboardPanel_Main