DashboardPanelExtension Class

The Dashboard Panel extension that displays a list of available dashboards and lets you switch between the designer and viewer modes.

Declaration

export class DashboardPanelExtension implements IExtension

Remarks

Use the following code to enable the Dashboard Panel, register the DashboardPanelExtension extension:

dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));

You can see preview the dashboard panel in the DevExpress Web Dashboard Demo.

Implements

constructor(dashboardControl)

Initializes a new instance of the DashboardPanelExtension class.

Declaration

constructor(dashboardControl: DashboardControl, options?: DashboardPanelExtensionOptions)

Parameters

Type Name Description
DashboardControl dashboardControl

A Web Dashboard control that owns the extension.

DashboardPanelExtensionOptions options

A DashboardPanelExtensionOptions object that contains the extension options.

Properties

allowSwitchToDesigner Property

Specifies whether or not the Dashboard Panel allows end-users to switch the Web Dashboard from the Viewer to Designer mode.

Declaration

allowSwitchToDesigner: KnockoutObservable<boolean>

Property Value

Type Description
KnockoutObservable<boolean>

true, if the Dashboard Panel allows end-users to switch from the Viewer to Designer mode; otherwise, false.

Remarks

When the allowSwitchToDesigner property is set to true, the Dashboard Panel displays the Edit in Designer button that allows an end-user to edit the currently selected dashboard.

Note

The allowSwitchToDesigner option is not in effect when the Web Dashboard operates in the ViewerOnly mode.

availableDashboards Property

Gets an array of dashboards displayed in the Dashboard Panel.

Declaration

availableDashboards: KnockoutObservableArray<DashboardInfo>

Property Value

Type Description
KnockoutObservableArray<DashboardInfo>

An array of the DashboardInfo objects that contain information about dashboards displayed in the Dashboard Panel.

Remarks

To display the actual list of dashboards available in the dashboard storage, use the updateDashboardsList method.

designerToViewerAction Property

Declaration

designerToViewerAction: SequenceAction

Property Value

Type Description
SequenceAction

hidePanelAsync Property

Hides the Dashboard Panel asynchronously.

Declaration

hidePanelAsync: (options: WorkingModeSwitchingOptions) => JQueryPromise<{}>

Property Value

Type Description
(options: WorkingModeSwitchingOptions) => JQueryPromise<__type>

The WorkingModeSwitchingOptions object that returns a JQuery promise.

Remarks

The code below hides the Dashboard Panel asynchronously and then adjusts the left indent of the DashboardControl using the surfaceLeft property.

function hideDashboardPanel() {
    var dashboardPanelExtension = dashboardControl.findExtension('dashboard-panel');
    dashboardPanelExtension.hidePanelAsync({}).done(function (e) {
          dashboardControl.surfaceLeft(e.surfaceLeft);
    });
}

name Property

Specifies a unique extension name.

Declaration

name: string

Property Value

Type Description
string

A unique extension name. The return value is 'dashboard-panel'.

Remarks

Warning

Do not change a unique name of the extension registered in the Web Dashboard in order to avoid exceptions.

panelWidth Property

Specifies the Dashboard Panel's width.

Declaration

panelWidth: number

Property Value

Type Description
number

An integer value that specifies the Dashboard Panel's width (in pixels).

selectedItemKeys Property

Declaration

selectedItemKeys: KnockoutObservableArray<string>

Property Value

Type Description
KnockoutObservableArray<string>

showPanelAsync Property

Invokes the Dashboard Panel asynchronously.

Declaration

showPanelAsync: (options: WorkingModeSwitchingOptions) => JQueryPromise<{}>

Property Value

Type Description
(options: WorkingModeSwitchingOptions) => JQueryPromise<__type>

The WorkingModeSwitchingOptions object that returns a JQuery promise.

Remarks

The code below invokes the Dashboard Panel asynchronously and then adjusts the left indent of the DashboardControl using the surfaceLeft property.

function showDashboardPanel() {
    var dashboardPanelExtension = dashboardControl.findExtension('dashboard-panel');
    dashboardPanelExtension.showPanelAsync({}).done(function (e) {
        dashboardControl.surfaceLeft(e.surfaceLeft);
    });
}

switchToDesigner Property

Switches the Web Dashboard to the Designer mode.

Declaration

switchToDesigner: () => void

Property Value

Type Description
() => void

Remarks

Use the switchToViewer method to switch the Web Dashboard to the Viewer mode.

switchToViewer Property

Switches the Web Dashboard to the Viewer mode.

Declaration

switchToViewer: () => void

Property Value

Type Description
() => void

Remarks

Use the switchToDesigner method to switch the Web Dashboard to the Designer mode.

viewerToDesignerAction Property

Declaration

viewerToDesignerAction: SequenceAction

Property Value

Type Description
SequenceAction

visible Property

Specifies whether the Dashboard Panel is visible.

Declaration

visible: KnockoutObservable<boolean>

Property Value

Type Description
KnockoutObservable<boolean>

true, to display the Dashboard Panel; otherwise, false.

Methods

start Method

Contains code that is executed when you register the dashboard extension.

Declaration

start(): void

Remarks

See start to learn more.

stop Method

Contains code that is executed when you unregister the dashboard extension.

Declaration

stop(): void

Remarks

See stop to learn more.

updateDashboardsList Method

Updates the dashboard list based on the dashboards available in the dashboard storage.

Declaration

updateDashboardsList(): void

Remarks

You can obtain the list of available dashboards using the availableDashboards property.