Designer and Viewer Modes in ASP.NET MVC

• Feb 27, 2023
• 3 minutes to read

The Web Dashboard can function 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. 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.

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

You can use the DashboardExtensionSettings.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 the Client

You can use the client-side DashboardControl.switchToViewer and DashboardControl.switchToDesigner methods to switch between modes.

Use the DashboardControl.isDesignMode method to check whether the Web Dashboard works in designer mode.

This example shows how to switch between the ASP.NET MVC Dashboard extension’s Designer and Viewer modes on the client-side if you handle the onclick event of the added button.

• The SettingsBase.Name property identifies the control’s unique identifier name. The ASPxClientDashboard.GetDashboardControl method is used to access the DashboardControl API.
• The DashboardControl.isDesignMode method checks whether the Web Dashboard works in designer mode.
• The DashboardControl.switchToDesigner and DashboardControl.switchToViewer methods are used to switch between modes.

View Example

Razor (C#)

<div id="#Button1 " style="position: absolute; left: 5px; right: 0; top:5px; bottom:40px;">
    @Html.DevExpress().Button(settings => {
    settings.Name = "btnSwitchMode";
    settings.Text = "Switch to Viewer";
    settings.ClientSideEvents.Click = "function(s) { switchMode(s); }";
}).GetHtml()
</div>
<div id="#Dashboard" style="position: absolute; left: 0; right: 0; top:40px; bottom:0;">
    @Html.DevExpress().Dashboard(settings => {
    settings.Name = "webDashboard";
    settings.ControllerName = "DefaultDashboard";
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);
}).GetHtml()
</div>

Razor (VB)

<div id="#Button1 " style="position: absolute; left: 5px; right: 0; top:5px; bottom:40px;">
    @Html.DevExpress().Button(Sub(settings)
        settings.Name = "btnSwitchMode"
        settings.Text = "Switch to Viewer"
        settings.ClientSideEvents.Click = "function(s) { switchMode(s); }"
    End Sub).GetHtml()
</div>
<div id="#Dashboard" style="position: absolute; left: 0; right: 0; top:40px; bottom:0;">
    @Html.DevExpress().Dashboard(Sub(settings)
      settings.Name = "webDashboard"
      settings.ControllerName = "DefaultDashboard"
      settings.Width = Unit.Percentage(100)
      settings.Height = Unit.Percentage(100)
    End Sub).GetHtml()
</div>

When a user clicks to the button that switches modes, the following function is called:

function switchMode(sender) {
    var control = webDashboard.GetDashboardControl();

    if (control.isDesignMode()) {
        control.switchToViewer();
        btnSwitchMode.SetText('Switch to Designer');
    }
    else {
        control.switchToDesigner();
        btnSwitchMode.SetText('Switch to Viewer');
    }
}

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.