Designer and Viewer Modes in Angular

• May 27, 2024
• 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 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.

Specify Designer or Viewer Mode on the Server

The way you can specify the working mode on the server side depends on the used backend. Refer to the topics below for more information:

• ASP.NET Core Dashboard Control - Designer and Viewer Modes
• ASP.NET MVC Dashboard Extension - Designer and Viewer Modes

Specify Designer or Viewer Mode on the Client

Set the workingMode property to change the working mode:

<dx-dashboard-control [workingMode]="ViewerOnly"></dx-dashboard-control>

You can dynamically bind the workingMode property. The following code shows how to use from the source-to-view data-binding to switch between working modes when users click a button. The button text depends on the current working mode.

app.module.ts

// ...
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';
import { DxButtonModule } from 'devextreme-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    DxDashboardControlModule,
    DxButtonModule
  ],
  // ...
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "dashboard-angular-app";
  workingMode: string = "Designer";
  get workingModeText() {
    return "Switch to " + this.toggleMode(this.workingMode);
  }

  changeWorkingMode() {    
    this.workingMode = this.toggleMode(this.workingMode);
  }
  toggleMode(mode) {
    return mode === "Viewer" ? "Designer" : "Viewer";
  }
}

app.component.html

<dx-button
  stylingMode="contained"
  [text]="workingModeText"
  type="normal"
  (onClick)="changeWorkingMode()"
>
</dx-button>
<dx-dashboard-control 
  style="display: block;width:100%;height:800px;" 
  endpoint="https://demos.devexpress.com/services/dashboard/api"
  [workingMode]="workingMode"
>
</dx-dashboard-control>

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.