Client-Side Configuration (Global Namespaces)
- 3 minutes to read
This approach is based on the client-server model. You need a server (backend) project and a client (frontend) application that includes all the necessary styles, scripts and HTML-templates. Note that the script version on the client should match with libraries version on the server up to a minor version.
The HTML JavaScript Dashboard control allows you to create dashboards in web applications. This topic describes how to add the HTML JavaScript Dashboard control to the web page using the approach with global namespaces.
Tip
To learn how to build the HTML JavaScript Dashboard application from scratch, see Create an HTML JavaScript Dashboard Application with an ASP.NET MVC Backend.
- Requirements
- Add a Container
- Add the JavaScript Files and Style Sheets
- Attach the JavaScript Files and Style Sheets
- Initialize the DashboardControl
Requirements
- The script version on the client should match with libraries version on the server up to a minor version.
- Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).
Add a Container
First, you need to place the DashboardControl in a container, which is a <div> HTML element. Add a <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.
Note
Visual Studio 2017 and newer provides built-in npm support. For previous Visual Studio versions, use the Node.js Tools extension from the Marketplace: Visual Studio 2012, Visual Studio 2013, and Visual Studio 2015.
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": "{version-number}",
"@devexpress/analytics-core":"{version-number}",
"devexpress-dashboard": "{version-number}",
"jquery-ui-dist": "{version-number}"
},
}
Right-click the package.json file and select Restore Packages.
Attach the JavaScript Files and Style Sheets
In the HTML markup, attach the required stylesheet and scripts inside the <head> section in the following order:
<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/devextreme-cldr-data/supplemental.js" charset="UTF-8"></script>
<script src="node_modules/devextreme-cldr-data/en.js" charset="UTF-8"></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>
The following script is used to set the English culture:
<script src="node_modules/devextreme-cldr-data/en.js" charset="UTF-8"></script>
Add scripts for other languages to support corresponding cultures:
<script src="node_modules/devextreme-cldr-data/en.js" charset="UTF-8"></script>
<script src="node_modules/devextreme-cldr-data/de.js" charset="UTF-8"></script>
<script src="node_modules/devextreme-cldr-data/fr.js" charset="UTF-8"></script>
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.
<head>
<!-- ...-->
<script>
window.onload = function () {
Globalize.locale('en');
DevExpress.Dashboard.ResourceManager.embedBundledResources();
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
endpoint: "{baseURL}/api/dashboard"
});
dashboardControl.render();
};
</script>
</head>
Specify one of the added locales in the Globalize.locale() method to change the culture:
window.onload = function () {
Globalize.locale('de');
// ...
dashboardControl.render();
};