Required Client Libraries

  • 2 minutes to read

The Web Dashboard uses the following client libraries:

Required Libraries

Integration

Add the following scripts and stylesheets:

  • The ThirdParty and DevExtreme scripts.
  • The DevExpress Analytics Components that is a core library for Dashboards and Reporting.
  • The dx-dashboard script that is the JavaScript dashboard control.
  1. Install the npm packages:

    • devexpress-dashboard
    • @devexpress/analytics-core
    • jquery-ui-dist
  2. Attach the resources to the <head> section of a page where the Web Dashboard is rendered:

    <head>
    <!-- ... -->
        <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/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 (x86)\DevExpress 21.2\Components\Sources\DevExpress.Web.Resources\Css\DevExtreme and place it to the directory that contains the DevExtreme CSS files.
See Also