Create Custom Extensions for the Web Dashboard

• Apr 21, 2023
• 4 minutes to read

You can write a custom script and register it in a Web Dashboard component to extend the Web Dashboard functionality if the integrated extensions do not suit your needs. This includes new buttons with custom functions in the dashboard menu, custom properties for existing dashboard items, and new custom dashboard items.

This article is an overview of how to create and use custom extensions.

Common Steps

Follow the steps below to add additional functionality to the Web Dashboard component:

1. Create an extension.
2. Attach its code to a page that contains the Web Dashboard component.
3. Register this extension in the Web Dashboard component.

Create an Extension

In the JavaScript file, create a new class that implements the IExtension interface. It should contain a constructor amd start and stop method calls. The start() method is called when you register the dashboard extension, and the stop() method contains the code that is executed when you unregister the extension.

class SimpleCustomExtension {
    dashboardControl; 
    name = "simple-custom-extension";

    constructor(dashboardControl) {
        this.dashboardControl = dashboardControl;
    }

    start() {
        // The code that is executed when you register the extension.
    }

    stop() {
        // The code that is executed when you unregister the extension.
    }
}

The following code shows how to implement a simple extension. When you register this extension, it adds an item to the dashboard menu. The constructor defines this newly created item. When you click this item, the opened dashboard’s ID is shown in a toast message. When you unregister this extension, it removes the newly added item from the dashboard menu.

class ShowDashboardIdExtension {
    toolbox;
    menuItem;
    dashboardControl; 
    name = "show-dashboard-id-extension";

    constructor(dashboardControl) {
        this.dashboardControl = dashboardControl;
        this.menuItem = {
            id: this.name,
            title: "Dashboard ID",
            click: this.showDashboardID.bind(this),
            selected: ko.observable(false),
            disabled: ko.computed(function () { return !this.dashboardControl.dashboard(); }, this),
            index: 113,
            hasSeparator: true,
            data: this
        };
    }
    showDashboardID() {
        if (this.toolbox) {
            DevExpress.ui.notify("Dashboard ID is '" + this.dashboardControl.getDashboardId() + "'");
        }
    }

    start() {
        this.toolbox = this.dashboardControl.findExtension("toolbox");
        this.toolbox && this.toolbox.menuItems.push(this.menuItem);
    }

    stop() {
        this.toolbox && this.toolbox.menuItems.remove(this.menuItem);
    }
}

Attach the Extension’s Code and Register the Extension

After you create an extension, attach its file to the page that contains the Web Dashboard component and pass the new extension instance to the DashboardControl.registerExtension method before the control is rendered:

dashboardControl.registerExtension(new ShowDashboardIdExtension(dashboardControl))

See the following topics for information on how to attach code and register a new extension depending on the used platform:

• Manage Extensions in ASP.NET Core
• Manage Extensions in ASP.NET MVC
• Manage Extensions in ASP.NET Web Forms
• Manage Extensions in Angular
• Manage Extensions in React
• Manage Extensions in Vue
• Manage Extensions in the JavaScript Dashboard Control
• JavaScript Customization of Dashboard Component (BLazor)

Example: “Save As” and “Delete” Extensions

This example shows how to implement the custom extensions that add the Save As and Delete menu items to the Web Dashboard’s UI:

• The Save As menu item allows users to save the current dashboard with a new name.
• The Delete menu item deletes the opened dashboard from the dashboard storage.

The image below shows the resulting implementation:

Download the example based on the platform:

View Example: ASP.NET Core View Example: ASP.NET MVC View Example: ASP.NET Web Forms

What’s Next

Create a Custom Property

Custom properties allow you to store custom settings in a dashboard definition. You can read these settings and use these values to implement and embed your functionality into the Web Dashboard. To update the control according to a custom property’s value, implement an extension.

This example shows how to edit Ranges for the Gauge dashboard item. This functionality is not available in the built-in Gauge settings. You need to use custom properties to save and apply range settings.

View Example: ASP.NET Web Forms

Refer to the following article for information about custom properties: Create Custom Properties in the Web Dashboard.

Create Custom Items

In addition to built-in dashboard items, you can implement and embed custom items into the Web Dashboard. A custom item is a JavaScript extension that supports data shaping, interactivity, export, and other item features.

The example shows how to create custom items from the step-by-step Custom Item tutorials.

Download the example based on the platform:

View Example: ASP.NET Core View Example: React

Refer the following section for details about custom items: Create Custom Properties in the Web Dashboard.