Add Web Dashboard to a JavaScript Application

  • 4 minutes to read

This approach is based on the client-server model. You need a server (an ASP.NET Core or ASP.NET MVC backend) and a client (frontend) application that includes all the necessary styles, scripts and HTML-templates. Note that the script version on the client should match with libraries version on the server up to a minor version.

This topic describes how to add the Web Dashboard control to the web page for JavaScript applications (JQuery, Knockout, etc). When you use this approach, the Web Dashboard control comes in a pre-assembled dx-dashboard.js bundle. You need to get the scripts and dependencies from the npm package and manually add them to the page.

Requirements

  • The script version on the client should match with libraries version on the server up to a minor version.
  • Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

Add a Container

First, you need to place the DashboardControl in a container, which is a <div> HTML element. Add a <div> to the <body> tag of your page and make sure that this <div> has the ID attribute specified.

<body>
   <div id="web-dashboard" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0">
   </div>
</body>

Add the JavaScript Files and Style Sheets

The HTML JavaScript Dashboard control requires you to attach the stylesheet and scripts located in the npm package.

NOTE

Visual Studio 2017 and newer provides built-in npm support. For previous Visual Studio versions, use the Node.js Tools extension from the Marketplace: Visual Studio 2012, Visual Studio 2013, and Visual Studio 2015.

Right-click the project, click Add | New Item... and add npm Configuration File to the project.

Open the created package.json file and add the latest version of the following packages:

{
    // ...
    "dependencies": {
        "devextreme": "{version-number}",
        "@devexpress/analytics-core":"{version-number}",
        "devexpress-dashboard": "{version-number}", 
        "jquery-ui-dist": "{version-number}"
    },
}

Right-click the package.json file and select Restore Packages.

Attach the JavaScript Files and Style Sheets

In the HTML markup, attach the required stylesheet and scripts inside the <head> section in the following order:

<head>
    <!-- ... -->
    <link href="node_modules/devextreme/dist/css/dx.common.css" rel="stylesheet" />
    <link href="node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />

    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css" rel="stylesheet" />

    <link href="node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css" rel="stylesheet" />

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/jquery-ui-dist/jquery-ui.js"></script>

    <script src="node_modules/knockout/build/output/knockout-latest.js"></script>

    <script src="node_modules/ace-builds/src-min-noconflict/ace.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/theme-ambiance.js"></script>

    <script src="node_modules/devextreme/dist/js/dx.all.js"></script>

    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js"></script>
    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js"></script>

    <script src="node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"></script>
</head>

Web Dashboard comes with an icon library that provides font icons for all DevExtreme themes. The icons should be in the same folder as the DevExtreme CSS files.

  • For npm, the icons folder is node_modules/devextreme/dist/css/icons.
  • For manual scripts integration, copy the icons folder from C:\Program Files (x86)\DevExpress 20.2\Components\Sources\DevExpress.Web.Resources\Css\DevExtreme and place it to the directory that contains the DevExtreme CSS files.

Initialize the DashboardControl

In the <head> section, insert the following script after the scripts from the previous section. The endpoint property specifies the URL used to interact with a backend (to send data requests to a server). The value should consist of a base URL where the Web Dashboard's server side is hosted and a route prefix - a value that is set in the MVC / .NET Core MapDashboardRoute properties.

<head>
    <!-- ...-->
    <script>
        window.onload = function () {            
            var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
                endpoint: "https://demos.devexpress.com/services/dashboard/api"                
            });
            dashboardControl.render();
        };
    </script>
</head>
See Also