The requested page is not available for the requested platform. You are viewing the content for Default platform.

Create an HTML JavaScript Dashboard Application (Global Namespaces)

  • 6 min 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.

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

  1. In Visual Studio, create a new project and select ASP.NET Web Application (.NET Framework) on the start page as a project template.
  2. Select the Empty template and enable the MVC checkbox to add folders and core references for MVC. Click OK.

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

  1. Right-click the project, click Add | New Item... and add npm Configuration File to the project.

  2. Open the created package.json file and add the latest version of the following packages:

    {
        // ...
        "dependencies": {
            "devextreme": "19.2-next",
            "@devexpress/analytics-core":"19.2-next",
            "devexpress-dashboard": "19.2-next", 
            "jquery-ui-dist": "1.12.1""
        },
    }
    

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

  3. 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 19.2\Components\Sources\DevExpress.Web.Resources\Css\DevExtreme and place it to the directory that contains the DevExtreme CSS files.
  4. Place a <div> element with the specified identifier and position inside the <body> section:

    <body>
       <div id="web-dashboard" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0">
       </div>
    </body>
    
  5. 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).

    <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

  1. 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
  2. Go to the Global.asax file and call the RouteCollectionExtension.MapDashboardRoute method in Application_Start. Set "api/dashboard" as a route prefix:

    using DevExpress.DashboardWeb.Mvc;
    // ...
    
            protected void Application_Start()  {
                // ...
                RouteTable.Routes.MapDashboardRoute("api/dashboard");
            }
    
  3. Create a new Dashboards folder inside App_Data. Then, call the DashboardConfigurator.SetDashboardStorage method to store dashboard XML files in the created folder.

    using DevExpress.DashboardWeb;
    // ...
    
            protected void Application_Start()  {
                // ...
                DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage("~/App_Data/Dashboards"));
            }
    
  4. 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 19.2\Components\Data\nwind.mdb

  5. Specify a connection string to the added database within the project's Web.config file as shown below.

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

  6. 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:

    using DevExpress.DashboardWeb;
    using DevExpress.DataAccess.Web;
    // ...
    
        protected void Application_Start()  {
            // ...
            DashboardConfigurator.Default.SetConnectionStringsProvider(new ConfigFileConnectionStringsProvider());  
        }
    

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 the Viewer Mode

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

  1. In a client-side project, open the index.html file.
  2. In the DashboardControl's constructor, add the workingMode option and set it to "ViewerOnly".

    <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>
    
  3. Run the application. The HTML JavaScript Dashboard displays the dashboard stored on the server side.

Next Steps