Skip to main content
All docs
V22.1

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 component loads the extensions required to design dashboards. A user can switch the component 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 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 the extensions required to design dashboards. Users cannot switch to Designer or Viewer modes on the client. This mode affects only the Web Dashboard’s UI and does not affect server settings.

Specify Designer or Viewer Mode on the Server

The way you can specify the working mode on the server side depends on the backend type:

Specify Designer or Viewer Mode on the Client

Set the workingMode property to change the working mode:

<template>
    <div>
        <DxDashboardControl 
            style="height:800px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            workingMode="ViewerOnly"
        />
    </div>  
</template>

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

View Example

<template>
    <div>
        <DxButton 
            @click="onClick" 
            :text="buttonText"
        />
        <DxDashboardControl 
            style="height:800px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            :workingMode="workingModeProp"
        />
    </div>  
</template>

<script>
import DxButton from 'devextreme-vue/button';
import { DxDashboardControl } from 'devexpress-dashboard-vue';

export default {
    components: {
        DxDashboardControl,
        DxButton
    },
    data: function() {
        return {
            workingModeProp: "Designer"
        };
    },
    methods: {
        onClick() {
            this.workingModeProp =  this.workingModeProp === "Designer" ? "Viewer": "Designer"

        }
    },
    computed: {
      buttonText() {
        return `Switch to ${this.workingModeProp === "Designer" ? "Viewer": "Designer"}`; 
      }
    }
}
</script>

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