Required Client Libraries
- 2 minutes to read
The Web Dashboard uses the following client libraries:
Required Libraries
-
-
The recommended version is jQuery 3.5.1+.
- jQuery UI 1.12.1+
- knockout 3.5.0+
-
Ace is a code editor embedded into the Web Dashboard’s Expression Editor.
-
-
DevExtreme libraries are used to render dashboard items and various UI elements inside the Web Dashboard application.
DevExpress Analytics Components
Core library for DevExpress Analytics Components (Dashboards and Reporting).
Optional Libraries
-
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.
Read more about Globalize modules and requirements in the Globalize documentation.
Integration
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 project:
Tip
See also: package.json configuration
Bundle the resources and then 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.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.min.js", "node_modules/jquery-ui-dist/jquery-ui.min.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 } ]Note
See the following topic for information on how to add scripts when you use Globalize to format dates, numbers, and currencies: Localize ASP.NET Core Dashboard Control.
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.
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.