Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Web Dashboard > Required Client Libraries
A newer version of this page is available. .
All docs
V20.1
Dashboard
Get Started
Basic Concepts and Terminology
Common Features
WinForms Designer
WinForms Viewer
Web Dashboard
Prerequisites
Supported Browsers
Required Client Libraries
Web Dashboard Technical Overview
HTML JavaScript Dashboard Control
ASP.NET MVC Dashboard Extension
ASP.NET Core Dashboard Control
ASP.NET Web Forms Dashboard Control
Create Dashboards on the Web
Mobile Layout
Error Logging
Security Considerations
Microsoft Azure Specifics
UI Elements
Dialogs and Wizards
Manage Dashboard Parameters
Client-Side Customization
WPF Viewer
Visual Studio Integration
Localization
Redistribution and Deployment
Video Tutorials
Migration Guides
Examples
End-User Documentation
.NET Framework API Reference
.NET Core API Reference
HTML JS Control API Reference
ASP.NET Client API Reference
Download CHM

Required Client Libraries

  • 6 minutes to read

This document provides information on the client libraries the Web Dashboard requires.

Required Libraries Overview

The Web Dashboard uses the following libraries:

Required

Optional

  • globalize 1.0+

    You can use Globalize as Intl alternative. The Web Dashboard uses the core Globalize script and four Globalize modules (message, number, date, and currency), as well as certain cldrjs scripts.

        <script src="Scripts/cldrjs/cldr.js"></script>
    <script src="Scripts/cldrjs/cldr.event.js"></script>
    <script src="Scripts/globalize/cldr.supplemental.js"></script>

    <script src="Scripts/globalize/globalize.js"></script>
    <script src="Scripts/globalize/globalize.message.js"></script>
    <script src="Scripts/globalize/globalize.number.js"></script>
    <script src="Scripts/globalize/globalize.currency.js"></script>
    <script src="Scripts/globalize/globalize.date.js"></script>

    Read more about Globalize modules and requirements in the Globalize documentation.

    The basic cldr content is included in the library. However, for locales other than “en” (or currencies other than “USD”), cldr content should be loaded additionally (read more in the Globalize documentation).

    Tip

    See also: Use Globalize to Format Dates, Numbers, and Currencies.

Refer to the following sections to learn how to attach the libraries listed above:

Wrappers

Automatic Integration

For the ASP.NET Web Forms Dashboard Control or ASP.NET MVC Dashboard Extension, add the “resources” section to the application’s Web.config file to include client-side libraries on a web page:

<devExpress>
    <!-- ... -->
    <resources>
        <add type="ThirdParty" />
        <add type="DevExtreme" />
    </resources>
</devExpress>

Note

The DevExpress Analytics Components library is attached automatically when you use wrappers.

Manual Integration

You can prevent a control from loading libraries automatically (for example, when the libraries are already referenced on the web page).

ASP.NET Web Forms Dashboard Control and ASP.NET MVC Dashboard Extension

  1. Declare an empty <resources> section in the Web.config file:

    <devExpress>
    <!-- ... -->
    <resources>
    </resources>
</devExpress>

  2. Copy the “Ace” and “DevExtreme” folders to the project from the following locations:

    • CSS files - C:\Program Files (x86)\DevExpress 20.1\Components\Sources\DevExpress.Web.Resources\Css\
    • Scripts - C:\Program Files (x86)\DevExpress 20.1\Components\Sources\DevExpress.Web.Resources\Scripts\

    Note

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

  3. Attach the following scripts and stylesheets to the <head> section of the page that contains the Web Dashboard.

    <html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://knockoutjs.com/downloads/knockout-3.5.0.js"></script>

    <script src="Scripts/Ace/ace.js"></script>
    <script src="Scripts/Ace/ext-language_tools.js"></script>
    <script src="Scripts/Ace/theme-dreamweaver.js"></script>
    <script src="Scripts/Ace/theme-ambiance.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/event.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.0/cldr/supplemental.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/message.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/number.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/date.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.4.2/globalize/currency.js"></script>
    <script src="https://unpkg.com/devextreme-cldr-data/supplemental.js" charset="UTF-8"></script>
    <script src="https://unpkg.com/devextreme-cldr-data/en.js" charset="UTF-8"></script>

    <link href="CSS/DevExtreme/dx.common.css" rel="stylesheet" />
    <link href="CSS/DevExtreme/dx.light.css" rel="stylesheet" />
    <script src="Scripts/DevExtreme/dx.all.js"></script>
</head>
...
</html>

Tip

You can download scripts from npm. For this, use the following packages:

Refer to package.json configuration for details on how to install npm packages to the Visual Studio application.

Note

You should register the dashboard scripts and stylesheets after you register the DevExtreme and third-party resources.

ASP.NET Core Dashboard

  1. Use the MvcServiceCollectionExtensions.AddDevExpressControls method without parameters to provide the middleware that is assembled into an application pipeline to handle requests and responses:

    using DevExpress.DashboardAspNetCore;
using DevExpress.AspNetCore;
using DevExpress.DashboardWeb;

// ...

public void ConfigureServices(IServiceCollection services) {
    // ...
    services.AddDevExpressControls();
}

  2. Install the latest version of the npm packages listed below in your project:

    Tip

    See also: package.json configuration

  3. Bundle the resources before add them to the View page. Install the BuildBundlerMinifier NuGet package and create the bundleconfig.json file with the following content:

    [
    {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
            "node_modules/devextreme/dist/css/dx.common.css",
            "node_modules/devextreme/dist/css/dx.light.css",
            "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
            "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
            "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
            "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css"
        ],
        "minify": { "enabled": false, "adjustRelativePaths": false }
    },
    {
        "outputFileName": "wwwroot/js/site.min.js",
        "inputFiles": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/jquery-ui-dist/jquery-ui.js",
            "node_modules/knockout/build/output/knockout-latest.js",
            "node_modules/ace-builds/src-min-noconflict/ace.js",
            "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
            "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
            "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
            "node_modules/devextreme/dist/js/dx.all.js",
            "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
            "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
            "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"
        ],
        "minify": {
            "enabled": false
        },
        "sourceMap": false
    }
]

  4. Attach the bundled resources to the page.

    <!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Dashboard Web Application</title>
    <!-- Attach the bundled CSS files and scripts. -->
    <link href="css/site.min.css" rel="stylesheet" />
    <script src="js/site.min.js"></script>
    <!-- ... -->
</head>
<body>
    @RenderBody()
</body>
</html>

    Important

    You should register the dashboard scripts and stylesheets after you register the DevExtreme and third-party resources.

  5. Create the libman.json file in the root directory of the project and add the following LibMan configuration to copy icon fonts to the application’s static content folder:

    {
"version": "1.0",
"defaultProvider": "filesystem",
"libraries": [
    {
    "library": "node_modules/devextreme/dist/css/icons/",
    "destination": "wwwroot/css/icons/",
    "files": [
        "dxicons.ttf",
        "dxicons.woff",
        "dxicons.woff2"
    ]
    }
]
}

    Note

    This step requires the Microsoft.Web.LibraryManager.Build NuGet package to be installed.

Modular Approach

For modular approach, the HTML JavaScript Dashboard control requires the devexpress-dashboard npm package with the following dependencies:

  • jquery
  • knockout
  • @types/jquery
  • @devexpress/analytics-core
  • devextreme

Tip

See also:

Global Namespaces

For an approach with global namespaces, add the following scripts and stylesheets:

  • ThirdParty and DevExtreme scripts used in wrappers.
  • DevExpress Analytics Components that is a core library for Dashboards and Reporting.
  • dx-dashboard script that is the HTML JavaScript dashboard.

  1. Install the npm packages:

  2. Attach the resources to the <head> section of a page where the Web Dashboard is rendered:

    <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.1\Components\Sources\DevExpress.Web.Resources\Css\DevExtreme and place it to the directory that contains the DevExtreme CSS files.

Tip

See also: Client-Side Configuration (Global Namespaces)