Create an HTML JavaScript Dashboard Application (Modular Approach)
- 4 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 (Angular) to create and configure a client part of the Web Dashboard application and a server based on an ASP.NET Core application.
Prerequisites
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
Create a new angular application.
ng new dashboard-app
Navigate to the created folder after the project is created:
cd dashboard-app
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.
In the console window, generate a new Dashboard component:
ng generate component dashboard
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>
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(); } }
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");
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> <!-- ... -->
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
Create a custom server application to show your data. Follow the steps below:
- Create the ASP.NET Core Dashboard Application with one of the following methods to use it as the server for the Angular application:
- Create an ASP.NET Core Dashboard Application using the Template Gallery
- Create an ASP.NET Core Dashboard Application using the .NET Core CLI Tools
- Create an ASP.NET Core Dashboard Application (Steps 1-12)
Enable cross-origin resource sharing (CORS) to configure corresponding permissions to access resources from the 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.
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?}"); }); }
Launch the server.
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 Viewer Mode
Once you create and save a dashboard, you can switch your Dashboard Designer to Viewer mode.
- In a client-side project, open the dashboard.component.ts file.
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(); }
Run the application. The HTML JavaScript Dashboard displays the dashboard stored on the server.
Next Steps
-
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.