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)

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.

Step 1. Add and Configure the JavaScript Dashboard

  1. 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 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 devexpress-dashboard and jquery-ui-dist packages:

    {
    // ...
    "dependencies": {
        "devexpress-dashboard": "{version-number}", 
        "jquery-ui-dist": "{version-number}"
    },
    }
    

    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/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>
    
  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 () {
                Globalize.locale('en');
                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. Run Visual Studio 2012, 2013, 2015 or 2017.
  2. Select File | New | Project… to create a new project. In the invoked New Project dialog, select the Web section, and choose ASP.NET Web Application. Click OK.
  3. Leave the Empty template in the New ASP.NET Web Application dialog and enable the MVC checkbox. Click OK.
  4. Right-click References in the Solution Explorer 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
  5. 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");
            }
    
  6. 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"));
            }
    
  7. 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.1\Components\Data\nwind.mdb

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

    <connectionStrings>
        <add name="nwindConnection" connectionString="XpoProvider=MSAccess; Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|\nwind.mdb;" />
      </connectionStrings>
    
    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.

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