Create an HTML JavaScript Dashboard Application (Modular Approach)

• Feb 12, 2020
• 5 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 uses a modular approach to create and configure a client part of the Web Dashboard application with Angular and a server that based on an ASP.NET Core 2.0+ application.

• Prerequisites
• Requirements
• Step 1. Configure the Client Dashboard Control in the Angular Project
• Step 2. Create a Server Application
• Step 3. Switch to the Viewer Mode
• Next Steps

Prerequisites

• Node.js 8+
• Angular CLI 6+

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. Configure the Client Dashboard Control in the Angular Project

1. Create a new angular application.

   ng new dashboard-app
   

   Navigate to the created folder after the project is created:

   cd dashboard-app
   

2. Install a dashboard package with required peerDependencies.

   npm install devextreme @devexpress/analytics-core devexpress-dashboard --save
   

   You can find all the libraries in the node_modules folder after the installation is completed.

3. In the console window, generate a new Dashboard component:

   ng generate component dashboard
   

4. Go to the project’s src/app/dashboard folder and replace the dashboard.component.html file’s content:

   <div class="dashboard-container" style="width: 100%;height: 100%;"></div>
   

5. In the same folder, replace the dashboard.component.ts file’s content with the code below to import the decorators and modules, and write the Dashboard component.

   import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
   import { DashboardControl, ResourceManager } from 'devexpress-dashboard';
   
   @Component({
     selector: 'app-dashboard',
     templateUrl: './dashboard.component.html',
     styleUrls: ['./dashboard.component.css']
   })
   
   export class DashboardComponent implements AfterViewInit, OnDestroy {
     private dashboardControl!: DashboardControl;
     constructor(private element: ElementRef) {
       ResourceManager.embedBundledResources();
     }
     ngAfterViewInit(): void {
       this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"), {
         // Specifies a URL of the Web Dashboard's server.
         endpoint: "https://demos.devexpress.com/services/dashboard/api",
         workingMode: "Designer",
       });
   
       this.dashboardControl.render();
     }
     ngOnDestroy(): void {
       this.dashboardControl && this.dashboardControl.dispose();
     }
   }
   

6. Go to the project’s src folder and open the styles.css file. Add the following global styles:

   @import url("../node_modules/jquery-ui/themes/base/all.css");
   @import url("../node_modules/devextreme/dist/css/dx.common.css");
   @import url("../node_modules/devextreme/dist/css/dx.light.css");
   @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
   @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
   @import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
   @import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");
   

7. Open the src/app folder, open the app.component.html file and insert the following code at the beginning of the file to add a component reference:

   <app-dashboard style="display: block;width:100%;height:800px;"></app-dashboard>
   <!-- ... -->
   

8. Use the command below to launch the application.

   ng serve --open
   

   Open http://localhost:4200/ in your browser to see the result. The application displays data from the preconfigured server (https://demos.devexpress.com/services/dashboard/api).

See Create a Dashboard with the Web Dashboard for instructions on how to create a dashboard in the Designer mode.

Step 2. Create a Server Application

You need to create and configure personal server if you want to work with your data. Follow the steps below to create a custom server for your Web Dashboard application:

1. Use the DevExpress Template Gallery to create the Dashboard ASP.NET Core Application and use it as a server for the Angular application.

   Tip

   You can perform steps 1 through 11 in the Create an ASP.NET Core 2.0+ Dashboard Application document as an alternative.

2. Enable cross-origin resource sharing (CORS) to configure corresponding permissions to access resources from a server. Use the AllowAnyOrigin method to allow CORS requests from all origins.

   public void ConfigureServices(IServiceCollection services) {
     services
       .AddCors(options => {
         options.AddPolicy("AllowAnyOrigin", builder => {
             builder.AllowAnyOrigin();
         });
       });
       // ...
   }
   
   public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
       // ...
       app.UseCors("AllowAnyOrigin");
       app.UseMvc(routes => { ... }  
   }
   

   Note

   To prohibit any client from getting access to your server with personal info, specify the client application’s URL directly. Use the WithOrigins method to set it up.

3. Open the Startup.cs file and set a route prefix in the MapDashboardRoute method. In this tutorial, it is api/dashboard:

   public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
       // ...
       app.UseCors("AllowAnyOrigin");
       app.UseMvc(routes => {
           routes.MapDashboardRoute("api/dashboard");
           routes.MapRoute(
               name: "default",
               template: "{controller=Home}/{action=Index}/{id?}");
       });
   }
   

4. Launch the server.

5. In the client application, go to the dashboard.component.ts file and change the endpoint property. The endpoint property value should consist of a base URL where the Web Dashboard’s server is hosted and the route prefix from step 2.3.

   // ...
   ngAfterViewInit(): void {
     this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"),  {
       endpoint: "{baseURL}/api/dashboard",
       workingMode: "Designer",
     });
   
     this.dashboardControl.render();
   }  
   

Step 3. Switch to the Viewer Mode

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

1. In a client-side project, open the dashboard.component.ts file.

2. In the DashboardControl’s constructor, set the workingMode property to ViewerOnly.

   ngAfterViewInit(): void {
     this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"),  {          
       endpoint: "{baseURL}/api/dashboard",
       workingMode: "ViewerOnly",
     });
   
     this.dashboardControl.render();
   }
   

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

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.