All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Designer and Viewer Modes

  • 2 minutes to read

The Web Dashboard control can act as a Designer or Viewer. The following modes are available:

Mode Description
Designer The Web Dashboard acts as a Dashboard Designer and allows end users to create, edit, and save dashboards. You can switch to Viewer mode on the client side from this mode.
Viewer The Web Dashboard acts as a Dashboard Viewer and allows you to display dashboards to end users. You can switch to Designer mode on the client side from this mode.
ViewerOnly The Web Dashboard acts as a Dashboard Viewer without the capability to switch to Designer mode on the client side. In this mode, the Web Dashboard does not load the extensions required for designing dashboards.

Specify Designer or Viewer Mode on 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:

Specify Designer or Viewer Mode on Client

Set the workingMode property to change the working mode:

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

The component supports data-binding to change the control's properties.

The following code shows how to use from the source-to-view data-binding to switch between working modes when you click a button. The button text depends on the current working mode.

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

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

Note that in ViewerOnly mode, the Web Dashboard does not load the extensions required to design dashboards. You cannot switch to Designer mode on the client side from this mode.

Enable End Users to Switch Between Working Modes

You can allow end users to switch between the Designer and Viewer if you enable the Dashboard Panel.

DashboardPanel_Main