Client-Side API Overview

• May 19, 2020
• 2 minutes to read

The Web Dashboard consists of client and server parts:

• The client part supplies end-users with a user interface for designing a dashboard and interacting with it.
• The server part handles client data requests and provides various backend capabilities such as accessing data, storing dashboards, etc.

On the client side, the Web Dashboard utilizes the DashboardControl that provides a user interface for designing a dashboard and interacting with it. The DashboardControl class allows you to configure the control’s view and capabilities and provides different ways to customize the dashboard control on the client side.

For the HTML JavaScript control, configure the control before the it is rendered:

window.onload = function () {
    var dashboardControl = = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        // Here you configure the control's options.
    });    
    // Here you can customize a control.

    dashboardControl.render();
}

The DashboardControlOptions class contains the configuration options you can configure in the control’s constructor before the control is initialized:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        endpoint: "/api/dashboard",
        workingMode: "ViewerOnly",
        initialDashboardId: "dashboard1"
    });
}

You can use the DashboardControlOptions.extensions property to access registered extensions’ settings in the DashboardControl‘s constructor. The code sample below shows how to configure the DashboardExportExtensionOptions to disable export:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        endpoint: "/api/dashboard",
        extensions: {
            'dashboard-export': {
                allowExportDashboard: false,
                allowExportDashboardItems: false
            }
        });
    }
}

The code sample below shows how to handle the ItemCaptionToolbarUpdated event and add a custom button to the Chart’s dashboard item caption:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        endpoint: "/api/dashboard",   
        onItemBeginUpdate: function(e) {
            // ...
        },
        extensions: {
            'viewer-api': {
                onItemCaptionToolbarUpdated: function (e) {
                    if (e.itemName === "chartDashboardItem1") {
                        e.options.actionItems.push({
                            type: "button",
                            text: "Custom Button",
                            click: function () {
                                // ...
                            }
                        });
                    }
                }
            }
        },
    });
}

See Client-Side Customization for information on how you can customize the client part of the Web Dashboard control.