The requested page is not available for the requested platform. You are viewing the content for Default platform.

Client-Side Configuration (Global Namespaces)

  • 3 min to read

This approach is based on the client-server model. You need a server (backend) project 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.

The HTML JavaScript Dashboard control allows you to create dashboards in web applications. This topic describes how to add the HTML JavaScript Dashboard control to the web page using the approach with global namespaces.

Tip

To learn how to build the HTML JavaScript Dashboard application from scratch, see Create an HTML JavaScript Dashboard Application with an ASP.NET MVC Backend.

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 19.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 () {            
            DevExpress.Dashboard.ResourceManager.embedBundledResources();            
            var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
                endpoint: "https://demos.devexpress.com/services/dashboard/api"                
            });
            dashboardControl.render();
        };
    </script>
</head>
See Also