Designer and Viewer Modes in Blazor

• Feb 27, 2023
• 2 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 component loads the extensions required to design dashboards. Users can access the Data Source Wizard and can preview underlying data. A user can switch the component 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 component also loads the extensions required to design dashboards. A user can switch the component 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.

You can specify the WorkingMode property in Razor markup to change the working mode:

Dashboard.razor

<DxDashboard style="height: 800px" Endpoint="api/dashboard" WorkingMode="@WorkingMode.ViewerOnly">
</DxDashboard>

The WorkingMode property also supports two-way binding. This means you can use the @bind attribute to implement binding between a component’s property and a data field.

The following code allows you to switch the working mode when a user clicks the button. The button text depends on the current working mode:

Dashboard.razor

<button id="workingModeSwitcher" @onclick="ChangeWorkingMode">    
    @ButtonText
</button>

<DxDashboard style="height: 800px" Endpoint="api/dashboard" @bind-WorkingMode="@workingMode">
</DxDashboard>

@code {
    WorkingMode workingMode = WorkingMode.Designer;

    public void ChangeWorkingMode() {
        workingMode = workingMode == WorkingMode.Designer ? WorkingMode.Viewer : WorkingMode.Designer;
    }

    public string ButtonText {
        get {
            string value = workingMode == WorkingMode.Designer ? "Viewer" : "Designer";
            string mode = "Switch to " + value;
            return mode;
        }
    }
}

As an alternative to two-way binding, you can handle the WorkingModeChanged event that fires after the working mode is changed.