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

Required Client Libraries

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

Required Libraries Overview

The Web Dashboard requires the following libraries:

  • DevExtreme Libraries

    DevExtreme libraries are used to render dashboard items and various UI elements inside the Web Dashboard application.

  • Third-party Libraries

    • jQuery 3.3.1+
    • jQuery UI 1.12.1+
    • globalize 1.0+

      The Web Dashboard requires the core Globalize script and four Globalize modules (message, number, date, and currency), as well as certain cldrjs scripts.

          <script src="Scripts/globalize/cldr.js"></script>
          <script src="Scripts/globalize/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 needed for the Web Dashboard 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).

    • knockout 3.4.0+
    • ace.js 1.1.9+

      Ace is a code editor embedded into the Web Dashboard's Expression Editor.

  • DevExpress Analytics Components

    Core library for DevExpress Analytics Components (Dashboards and Reporting).

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

Wrappers

Automatic Integration

If you are using the ASP.NET Web Forms Dashboard Control or ASP.NET MVC Dashboard Extension, you can include client-side libraries on a web page by adding the "resources" section to the application's Web.config file:

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

For ASP.NET Core Dashboard, use the MvcServiceCollectionExtensions.AddDevExpressControls method to provide the Third-Party and DevExtreme middleware:

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

// ...

public void ConfigureServices(IServiceCollection services) {
    // ...
    services.AddDevExpressControls(settings => settings.Resources = ResourcesType.ThirdParty | ResourcesType.DevExtreme);
}

Manual Integration

You can prevent a control from automatically loading a library (for example, when it is already referenced on the web page) by doing the following:

  • Declaring an empty "resources" section in the Web.config file (if you are using the ASP.NET Web Forms Dashboard Control or ASP.NET MVC Dashboard Extension).

    <resources>
    </resources>
    
  • Using the MvcServiceCollectionExtensions.AddDevExpressControls method without parameters (if you are using the ASP.NET Core Dashboard):

    using DevExpress.DashboardAspNetCore;
    using DevExpress.AspNetCore;
    using DevExpress.DashboardWeb;
    
    // ...
    
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddDevExpressControls();
    }
    
  • Manually attaching the DevExtreme resources and the required third-party libraries (such as jQuery, Globalize, etc.) to the web page.

    <html>
    <head>
        <script src="Scripts/jquery-3.3.1.js"></script>
        <script src="Scripts/jquery-ui-1.11.3.min.js"></script>
        <script src="Scripts/knockout-3.4.0.js"></script>
    
        <script src="Scripts/globalize/cldr.js"></script>
        <script src="Scripts/globalize/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>
    
        <script src="Scripts/ace-build/ace.js"></script>
        <script src="Scripts/ace-build/ext-language_tools.js"></script>
        <script src="Scripts/ace-build/theme-dreamweaver.js"></script>
        <script src="Scripts/ace-build/theme-ambiance.js"></script>
    
        <link href="Css/dx.common.css" rel="stylesheet" />
        <link href="Css/dx.light.css" rel="stylesheet" />
        <script src="Scripts/dx.all.js"></script> 
    </head>
    ...
    </html>
    
    Note

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

    Tip

    You can find the required DevExtreme resources in the following locations:

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

Modular Approach

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

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

See Client-Side Configuration (Angular) to learn how to configure the HTML JavaScript dashboard when you use the JavaScript modular approach.

Global Namespaces

If you use an approach with global namespaces, install the devexpress-dashboard npm package and add the following scripts and stylesheets manually:

  • 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.
<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/cldrjs/dist/cldr.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/event.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/supplemental.js"></script>
    <script src="node_modules/cldrjs/dist/cldr/unresolved.js"></script>

    <script src="node_modules/globalize/dist/globalize.js"></script>
    <script src="node_modules/globalize/dist/globalize/message.js"></script>
    <script src="node_modules/globalize/dist/globalize/number.js"></script>
    <script src="node_modules/globalize/dist/globalize/currency.js"></script>
    <script src="node_modules/globalize/dist/globalize/date.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>

See Client-Side Configuration (Global Namespaces) to learn how to configure the HTML JavaScript dashboard when you use an approach with global namespaces.