Create an HTML JavaScript Dashboard Application (Global Namespaces)

Aug 03, 2020
6 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 tutorial shows how to embed the JavaScript Dashboard control into a new ASP.NET MVC application using the approach with global namespaces. When you use this approach, the HTML JavaSCript 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.

Tip

Download the completed project: How to create the HTML JavaScript Web Dashboard application (Runtime sample)

Watch the video: Client-Side Web Designer & Viewer

See demo: HTML JavaScript Web Dashboard demo

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).

Step 1. Add and Configure the JavaScript Dashboard

In Visual Studio, create a new project and select ASP.NET Web Application (.NET Framework) on the start page as the project template.
Select the Empty template and enable the MVC checkbox to add folders and core references for MVC. Click OK.
Right-click the project, select Add | HTML Page and change its name to index. Right-click the created index.html file and select Set As Start Page.

Note

Visual Studio 2017 or 2019 has integrated support of npm and allows you to interact with npm natively. For previous supported versions, use the Node.js Tools extension from the Marketplace: for Visual Studio 2012, for Visual Studio 2013, and for 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": "20.1-next",
        "@devexpress/analytics-core":"20.1-next",
        "devexpress-dashboard": "20.1-next", 
        "jquery-ui-dist": "1.12.1"
    },
}

Right-click the package.json file and select Restore Packages.

Open the created index.html file and attach the following stylesheet and scripts to the project inside the <head> section:

<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/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 20.1\Components\Sources\DevExpress.Web.Resources\Css\DevExtreme and place it to the directory that contains the DevExtreme CSS files.

Place a <div> element with the specified identifier and position inside the <body> section:

HTML

<body>
   <div id="web-dashboard" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0">
   </div>
</body>

In the <head> section, add the following script after the stylesheets and scripts from step 4. The endpoint property specifies the URL used to interact with a backend (to send data requests to a server).

HTML

<head>
    <!-- ...-->
    <script>
        window.onload = function () {
            DevExpress.Dashboard.ResourceManager.embedBundledResources();            
            var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
                // Specifies a URL where the Web Dashboard's server side is hosted.
                endpoint: "/api/dashboard"                
            });
            dashboardControl.render();
        };
    </script>
</head>

Step 2. Create an ASP.NET MVC Server Application

In the Solution Explorer, right-click References and select Add Reference… in the context menu. In the Reference Manager, go to Assemblies | Extensions and add the following references:
- DevExpress.Dashboard.Core
- DevExpress.Dashboard.Web
- DevExpress.Dashboard.Web.Mvc5
- DevExpress.DataAccess

Go to the Global.asax file and call the RouteCollectionExtension.MapDashboardRoute method in Application_Start. Set “api/dashboard” as a route prefix:

C#
VB.NET

using DevExpress.DashboardWeb.Mvc;
// ...

        protected void Application_Start()  {
            // ...
            RouteTable.Routes.MapDashboardRoute("api/dashboard");
        }

Imports DevExpress.DashboardWeb.Mvc
' ...

    Protected Sub Application_Start()
        ' ...
        RouteTable.Routes.MapDashboardRoute("api/dashboard")
    End Sub

Create a new Dashboards folder inside App_Data. Then, call the DashboardConfigurator.SetDashboardStorage method to store dashboard XML files in the created folder.

C#
VB.NET

using DevExpress.DashboardWeb;
// ...

        protected void Application_Start()  {
            // ...
            DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage("~/App_Data/Dashboards"));
        }

Imports DevExpress.DashboardWeb
' ...

    Protected Sub Application_Start()
        ' ...
        DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/Dashboards"))
    End Sub

Right-click the App_Data folder, select Add | Existing Item and add the nwind.mdb database from the following path:

C:\Users\Public\Documents\DevExpress Demos 20.1\Components\Data\nwind.mdb
Specify a connection string to the added database within the project’s Web.config file as shown below.
- XML
```
<configuration>
  <connectionStrings>
      <add name="nwindConnection" connectionString="XpoProvider=MSAccess; Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|\nwind.mdb;" />
  </connectionStrings>
</configuration>
```
Note
The connection string should contain the XpoProvider parameter that depends on the database type. See Register Default Data Connections for details on how to specify connection strings for different database types.

Go to the Global.asax file. Pass the ConfigFileConnectionStringsProvider instance as the SetConnectionStringsProvider method’s parameter to allow end users to create new data sources based on connection strings from the Web.config file:

C#
VB.NET

using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Web;
// ...

    protected void Application_Start()  {
        // ...
        DashboardConfigurator.Default.SetConnectionStringsProvider(new ConfigFileConnectionStringsProvider());  
    }

Imports DevExpress.DashboardWeb
Imports DevExpress.Dashboard.DataAccess

    Protected Sub Application_Start()
    ' ...
    DashboardConfigurator.Default.SetConnectionStringsProvider(New DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider())
  End Sub

Step 3. Create a Dashboard

The designer application is now ready. Build and run the project.

GettingStarted_L1_Build

Your application should look as follows:

WebDesigner-NoDashboard

Go to Create a Dashboard using the Web Dashboard for instructions on how to create your first dashboard in the Web Designer.

Step 4. Switch to Viewer Mode

When you create and save a dashboard, you can switch your Dashboard Designer application to Viewer mode.

In a client-side project, open the index.html file.

In the DashboardControl’s constructor, add the workingMode option and set it to “ViewerOnly”.

HTML

<head>
    <!-- ...-->
    <script>
        window.onload = function () {
            DevExpress.Dashboard.ResourceManager.embedBundledResources();            
            var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
                endpoint: "/api/dashboard",
                workingMode: "ViewerOnly"    // Enables the Viewer mode.             
            });
            dashboardControl.render();
        };
    </script>
</head>

Run the application. The HTML JavaScript Dashboard displays the dashboard stored on the server side.

Next Steps

Create Dashboards on the Web

Describes how to create and configure dashboards in the Web Dashboard.
HTML JavaScript Dashboard Control

Provides instructions on how to use the client-side JavaScript DashboardControl.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Requirements

Step 1. Add and Configure the JavaScript Dashboard

Step 2. Create an ASP.NET MVC Server Application

Step 3. Create a Dashboard

Step 4. Switch to Viewer Mode

Next Steps