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).
-
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.
Automatic Integration
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>
Note
The DevExpress Analytics Components library is attached automatically.
Manual Integration
You can prevent a control from loading libraries automatically (for example, when the libraries are already referenced on the web page).
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 20.2\Components\Sources\DevExpress.Web.Resources\Css\
- Scripts - C:\Program Files (x86)\DevExpress 20.2\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> <link href="CSS/DevExtreme/dx.light.css" rel="stylesheet" /> <script src="Scripts/DevExtreme/dx.all.js"></script> </head> ... </html>The order of script references is important. You should register the dashboard scripts and stylesheets after you register the DevExtreme and third-party resources.
Tip
You can download scripts from npm. For this, use the following packages:
Refer to package.json configuration for details on how to install npm packages for use in a Visual Studio application.