Designer and Viewer Modes in JavaScript Applications

Feb 27, 2023
2 minutes to read

The Web Dashboard can function as a designer or viewer. The following modes are available:

DesignerThe 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. Users can access the Data Source Wizard and can preview underlying data. A user can switch the control to Viewer mode and can modify dashboards from storage on the client side. Requests from the dashboard backend server can be sent to third-party resources. This is the default mode.ViewerThe 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 Designer mode.ViewerOnlyThe Web Dashboard does not load extensions required to design dashboards. Users cannot switch to Designer or Viewer modes on the client.

Note

The Model API is not effective when the Web Dashboard operates in Viewer or ViewerOnly modes.

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:

Specify Designer or Viewer Mode on the Client

To specify the initial working mode on the client side, use the workingMode option:

HTML

html

<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.

html

<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.