Required Client Libraries
- 5 minutes to read
This document provides information on the client libraries the Web Dashboard requires.
Required Libraries Overview
The Web Dashboard requires the following libraries:
-
DevExtreme libraries are used to render dashboard items and various UI elements inside the Web Dashboard application.
-
-
The recommended version is jQuery 3.5.1+.
- jQuery UI 1.12.1+
-
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.5.0+
-
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
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>
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 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
Declare an empty
<resources>
section in the Web.config file:<devExpress> <!-- ... --> <resources> </resources> </devExpress>
Copy the “Ace” and “DevExtreme” folders to the project from the following locations:
- CSS files - C:\Program Files (x86)\DevExpress 19.1\Components\Sources\DevExpress.Web.Resources\Css\
- Scripts - C:\Program Files (x86)\DevExpress 19.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.
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 and attach scripts from npm. For this, use the following packages:
- devexpress-dashboard
- @devexpress/analytics-core
- devextreme
- jquery-ui-dist
- globalize
- devextreme-cldr-data
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 Control
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(); }
Install the latest version of the npm packages listed below in your projects:
- devexpress-dashboard
- @devexpress/analytics-core
- devextreme
- jquery-ui-dist
- globalize
- devextreme-cldr-data
Tip
See also: package.json configuration
Bundle the required resources before attaching. 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/cldrjs/dist/cldr.js", "node_modules/cldrjs/dist/cldr/event.js", "node_modules/cldrjs/dist/cldr/supplemental.js", "node_modules/cldrjs/dist/cldr/unresolved.js", "node_modules/globalize/dist/globalize.js", "node_modules/globalize/dist/globalize/message.js", "node_modules/globalize/dist/globalize/number.js", "node_modules/globalize/dist/globalize/currency.js", "node_modules/globalize/dist/globalize/date.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 } ]
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.
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.