Create an HTML JavaScript Dashboard Application (Modular Approach)

• Jul 04, 2019
• 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 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 and navigate to the created directory.

   ng new dashboard-app
   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. Go to the project folder and open the tsconfig.json file. Use paths to map the globalize and cldrjs modules.

   {
     "compilerOptions": {
     // ...        
       "paths": { 
         "jszip": [  
         "node_modules/jszip/dist/jszip.min.js"  
         ],  
         "globalize": [  
           "node_modules/globalize/dist/globalize"  
         ],  
         "globalize/*": [  
           "node_modules/globalize/dist/globalize/*"    
         ], 
         "cldr": [  
           "node_modules/cldrjs/dist/cldr"     
         ], 
         "cldr/*": [  
           "node_modules/cldrjs/dist/cldr/*"  
         ] 
       }   
     }
   }
   

   Note

   The path to mapped packages is a concatenation of the compilerOptions.baseUrl and compilerOptions.paths option values from the tsconfig.json and src/tcsonfig.app.json files. If compilerOptions.baseUrl is set to “./“, a TypeScript compiler tries to find a globalize module in the src/node_modules/globalize folder. To override this behavior, update paths in the tsconfig.json file and start them from ../, for example, “../node_modules/globalize/dist/globalize”.

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

   ng generate component dashboard
   

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

6. In the same folder, replace the dashboard.component.ts file’s content with the code below to import the required decorators and modules, and write the Dashboard component. The endpoint property specifies the server’s URL. The globalize library is used to display culture-specific data.

   import * as Globalize from 'globalize';
   declare var require: (e: string) => object;
   
   import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
   import { DashboardControl, ResourceManager, DashboardPanelExtension } 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) {
       this.initGlobalize();
       ResourceManager.embedBundledResources();
     }
     initGlobalize() {
       Globalize.load([
         require('devextreme-cldr-data/en.json'),
         //require('devextreme-cldr-data/de.json'),
         require('devextreme-cldr-data/supplemental.json')
       ]);
       Globalize.locale('en');
     }
     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();
     }
   }
   

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

8. Go to 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>
   <!-- ... -->
   

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