Create an Angular Dashboard Application

• Jul 16, 2021
• 4 minutes to read

Important

If you are not familiar with basic concepts and patterns of Angular, please review the fundamentals before you continue: angular.io.

The Web Dashboard consists of client and server parts:

Client

The client is a JavaScript application that supplies users with a UI to design and interact with a dashboard. The DashboardControl is the underlying control. The client communicates with the server using HTTP requests.

Server

The server is an ASP.NET Core or ASP.NET MVC application that handles client data requests and provides access to data sources, dashboard storage and other backend capabilities.

The tutorial creates and configures a client Angular application that contains the Web Dashboard and a server ASP.NET Core application.

Run Demo View Example

Prerequisites

• Node.js 8+
• Angular CLI 6+

Requirements

• The script version on the client should match the library version on the server.
• Versions of the DevExpress npm packages should be identical.

Step 1. Configure the Client Dashboard Control in the Angular Project

1. Create a new angular application.

   ng new dashboard-app
   

   If you create a new app with Angular v12, add the --strict=false flag to the command.

   Navigate to the created folder after the project is created:

   cd dashboard-app
   

2. Install the following npm packages:

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

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

3. In the app.module.ts file, import the DxDashboardControlModule module.

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   import { DxDashboardControlModule } from 'devexpress-dashboard-angular';
   
   @NgModule({
     declarations: [
       AppComponent,
     ],
     imports: [
       BrowserModule,
       DxDashboardControlModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

4. Open the app.component.html file and replace its content with the following element to render the dashboard component:

   <dx-dashboard-control 
     style="display: block;width:100%;height:800px;" 
     endpoint='https://demos.devexpress.com/services/dashboard/api'>
   </dx-dashboard-control>
   

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

6. Use the command below to launch the application.

   npm start
   

   Open http://localhost:4200/ in your browser to see the result. The Web Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api).

Tip

Related Article: Dashboard Component for Angular

Step 2. Create a Server Application

Create a custom server application to show your data. Follow the steps below:

1. In Visual Studio, create an ASP.NET Core 3.1 application. Select the Empty template.

2. Create the App_Data/Dashboards folder that will store dashboards.

3. Replace the content of the Startup.cs file with the following code:

   using DevExpress.AspNetCore;
   using DevExpress.DashboardAspNetCore;
   using DevExpress.DashboardCommon;
   using DevExpress.DashboardWeb;
   using DevExpress.DataAccess.Json;
   using Microsoft.AspNetCore.Builder;
   using Microsoft.AspNetCore.Hosting;
   using Microsoft.Extensions.Configuration;
   using Microsoft.Extensions.DependencyInjection;
   using Microsoft.Extensions.FileProviders;
   using System;
   
   namespace AspNetCoreDashboardBackend {
       public class Startup {
           public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
               Configuration = configuration;
               FileProvider = hostingEnvironment.ContentRootFileProvider;
           }
   
           public IConfiguration Configuration { get; }
           public IFileProvider FileProvider { get; }
   
           public void ConfigureServices(IServiceCollection services) {
               services
                   // Configures CORS policies.                
                   .AddCors(options => {
                       options.AddPolicy("CorsPolicy", builder => {
                           builder.AllowAnyOrigin();
                           builder.AllowAnyMethod();
                           builder.WithHeaders("Content-Type");
                       });
                   })
                   // Adds the DevExpress middleware.
                   .AddDevExpressControls()
                   // Adds controllers.
                   .AddControllers()
                   // Configures the dashboard backend.
                   .AddDefaultDashboardController(configurator => {
                       configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
                       configurator.SetDataSourceStorage(CreateDataSourceStorage());
                       configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
                   });
           }
   
           public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
               // Registers the DevExpress middleware.            
               app.UseDevExpressControls();
               // Registers routing.
               app.UseRouting();
               // Registers CORS policies.
               app.UseCors("CorsPolicy");
               app.UseEndpoints(endpoints => {
                   // Maps the dashboard route.
                   EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
                   // Requires CORS policies.
                   endpoints.MapControllers().RequireCors("CorsPolicy");
               });
           }
           public DataSourceInMemoryStorage CreateDataSourceStorage() {
               DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();                        
               DashboardJsonDataSource jsonDataSource = new DashboardJsonDataSource("Customers");
               jsonDataSource.RootElement = "Customers";
               dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSource.SaveToXml());
               return dataSourceStorage;
           }
           private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
               if (e.DataSourceName.Contains("Customers")) {
                   Uri fileUri = new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json");
                   JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
                   jsonParams.JsonSource = new UriJsonSource(fileUri);
                   e.ConnectionParameters = jsonParams;            
               }
           }
       }
   }
   

4. Run the following command to start the server:

   dotnet run
   

5. To use this server in the client application, go to the app.component.html file. Set the following URL as an endpoint: http://localhost:5000/api/dashboard

   <dx-dashboard-control 
     style="display: block;width:100%;height:800px;" 
     endpoint='http://localhost:5000/api/dashboard'>
   </dx-dashboard-control>
   

   Tip

   Related Articles:

   • Server-Side Configuration (ASP.NET Core)
   • Cross-Origin Resource Sharing (CORS)

Step 3. Switch to Viewer Mode

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

1. Open the app.component.html file and set the workingMode property to ViewerOnly:

   <dx-dashboard-control 
     style="display: block;width:100%;height:800px;"
     endpoint='http://localhost:5000/api/dashboard'
     workingMode='ViewerOnly'>
   </dx-dashboard-control>
   

   Tip

   Related Article: Property Binding

Next Steps

• Create Dashboards on the Web

  Describes how to create and configure dashboards in the Web Dashboard control.

• Dashboard Component for Angular

  Contains instructions on how to use Dashboard Component for Angular.