Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Dashboard > Getting Started > Build End-User Dashboard Designer Applications > Create an HTML5 JavaScript Designer
A newer version of this page is available. .
All docs
V17.2
Dashboard
Getting Started
Build End-User Dashboard Applications using the Template Gallery
Build End-User Dashboard Designer Applications
Create a WinForms Designer
Create an ASP.NET Designer
Create an ASP.NET MVC Designer
Create an HTML5 JavaScript Designer
Create an ASP.NET Core Designer (CTP)
Build End-User Dashboard Viewer Applications
Create a Dashboard in the Designer Application
Create a Dashboard in Visual Studio
Included Components
Basic Concepts and Terminology
Main Features
Building the Designer and Viewer Applications
Creating Dashboards
Examples
Design-Time Features
Video Tutorials
End-User Documentation
Localization
Redistribution and Deployment
Member Tables
API Reference

Create an HTML5 JavaScript Designer

  • 3 minutes to read

This tutorial shows how to embed the JavaScript Dashboard control into a new ASP.NET MVC application. For instructions on how to integrate this extension into an existing project, see the HTML5 JavaScript Dashboard Control.

Note

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

Watch the video: Client-Side Web Designer & Viewer

See demo: HTML5 JavaScript Web Dashboard demo

Steps 1-8. Create an ASP.NET MVC Application

  1. Run Visual Studio.
  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

  5. Go to the Global.asax file and call the RouteCollectionExtension.MapDashboardRoute method in Application_Start:

    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 locate the nwind.mdb database using the following path:

    C:\Users\Public\Documents\DevExpress Demos 17.2\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

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

Steps 9-13. Add and Configure the JavaScript Dashboard Control

  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.

  2. Add the Content folder to the project. Then, right-click this folder and add stylesheets and scripts using this path:

    C:\Program Files (x86)\DevExpress 17.2\Components\Sources\DevExpress.Dashboard\DevExpress.Dashboard.Web\Scripts\Bundle

    The following files are required for this lesson:

    • dx.dashboard-control.bundle.light.css
    • dx.dashboard-control.third-party.min.js
    • dx.dashboard-control.bundle.min.js

    Note

    If you are using a trial version of DevExpress components, you can download script files from the T532254 KB article.

  3. Open the created Index.html file and attach the added stylesheet and scripts to the project inside the <head> section in the following order:

    <head>
    <!-- ... -->
    <link href="/Content/dx.dashboard-control.bundle.light.css" rel="stylesheet" />
    <script src="/Content/dx.dashboard-control.third-party.min.js"></script>
    <script src="/Content/dx.dashboard-control.bundle.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 all the scripts added in step 11:

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

Step 14. Create a Dashboard

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

    GettingStarted_L1_Build

    Your application should look as follows:

    WebDesigner-NoDashboard

    For instructions on how to create your first dashboard in the Web Designer, go to Create a Dashboard using the Web Dashboard.