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 control loads the extensions required to design dashboards. A user can switch the control to Viewer mode 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 control also loads the extensions required to design dashboards. A user can switch the control to Designer mode.
ViewerOnly
The Web Dashboard does not load the extensions required to design dashboards. You can use this mode to protect dashboards stored on a server because users cannot switch to Designer or Viewer modes on the client.

Specify Designer or Viewer Mode on the Server

You can use the ASPxDashboard.WorkingMode property to specify the initial working mode on the server.

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.

Switch Between Designer and Viewer Modes on Client

Use the following two approaches to switch the working mode on the client:

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.

DashboardPanel_Main

Example

This example shows how to switch between the Web Dashboard‘s working modes on the client-side.

View Example

<div style="position: absolute; left: 80px; right: 0; top:0; bottom:30px;">
    <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Switch to Viewer" 
        ClientInstanceName="button"
        AutoPostBack="False">
        <ClientSideEvents Click="function(s, e) {
            var workingMode = webDashboard.GetWorkingMode();
            if (workingMode == 'designer') {
                webDashboard.SwitchToViewer();
                button.SetText('Switch to Designer');
            }
            else {
                webDashboard.SwitchToDesigner();
                button.SetText('Switch to Viewer');
            }
        }" />
    </dx:ASPxButton>
</div>
<div style="position: absolute; left: 0; right: 0; top:30px; bottom:0;">
    <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Width="100%" Height="100%" 
    ClientInstanceName="webDashboard" 
        onconfiguredataconnection="ASPxDashboard1_ConfigureDataConnection">
    </dx:ASPxDashboard>
</div>