Add Web Dashboard to a JavaScript Application
- 3 minutes to read
This article assumes that you implement a client-server architecture. An ASP.NET Core or an ASP.NET MVC application serves as the backend (server side). The client (frontend) application includes all the necessary styles, scripts and HTML-templates. Note that client scripts, libraries on the server side, and devexpress npm packages should have matching version numbers.
This topic describes how to add the Web Dashboard control to the web page for JavaScript applications (JQuery, Knockout, etc). When you use this approach, the Web Dashboard control comes in a pre-assembled dx-dashboard.js bundle. You need to get the scripts and dependencies from the npm package and manually add them to the page.
Get Started: 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.
- All installed DevExpress npm packages should have matching versions.
Add a Container
First, you need to place the DashboardControl in a container, which is a <div> HTML element. Add <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.
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-dist": "24.1-stable",
"@devexpress/analytics-core":"24.1-stable",
"devexpress-dashboard": "24.1-stable"
}
}
Right-click the package.json file and select Restore Packages.
Attach the JavaScript Files and Style Sheets
In the HTML markup, attach the stylesheets and scripts the Web Dashboard requires inside the <head> section in the following order:
<head>
<!-- ... -->
<link href="/node_modules/ace-builds/css/ace.css" rel="stylesheet" />
<link href="/node_modules/ace-builds/css/theme/dreamweaver.css" rel="stylesheet" />
<link href="/node_modules/ace-builds/css/theme/ambiance.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/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\DevExpress 24.1\Components\Sources\DevExpress.Web.Resources\Css\DevExtremeand 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.
<html>
<!-- ... -->
<script>
window.onload = function () {
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
// Specifies a URL where the Web Dashboard's server side is hosted. See the MapDashboardRoute method in Global.asax.cs.
endpoint: "/api/dashboard"
});
dashboardControl.render();
};
</script>
</head>