Create an Angular Dashboard Application
- 6 minutes to read
Important
If you are not familiar with the 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 that targets .NET Core 3.1.
Prerequisites
- Node.js 8+
- Angular CLI 6+
- .NET Core SDK
- Visual Studio (the minimum required version based on the target .NET Core SDK version)
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 a Client Application
In the command prompt, create an Angular application:
ng new dashboard-angular-app --strict=false
For Angular CLI v11 and earlier, remove the --strict=false flag from the command.
Navigate to the created folder after the project is created:
cd dashboard-angular-app
Install the following npm packages:
npm install devexpress-dashboard@21.2.15 devexpress-dashboard-angular@21.2.15 @devexpress/analytics-core@21.2.15 devextreme@21.2.15 devextreme-angular@21.2.15 --save
You can find all the libraries in the node_modules folder after the installation is completed.
In the src/app/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 { }
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>
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");
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 the Application
Create a custom server application to show your data. In Visual Studio, create an ASP.NET Core 3.1 application. Select the Empty template, name it asp-net-core-server.
Install NuGet Packages
In the project, open the NuGet Package Manager and set the package source to All. Install the following npm package: DevExpress.AspNetCore.Dashboard.
Configure the Dashboard Controller
In the root directory, create an empty MVC Controller named DefaultDashboardController. Inherit the DashboardController:
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.AspNetCore.DataProtection;
namespace AspNetCoreDashboardBackend {
public class DefaultDashboardController : DashboardController {
public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider dataProtectionProvider = null)
: base(configurator, dataProtectionProvider) {
}
}
}
Configure the Server
In your application, create the App_Data/Dashboards folder that will store dashboards.
Replace the content of the Startup.cs file with the code below to configure the following parameters:
- Configure CORS policy.
- Add and use services for DevExpress Controls.
- Map the dashboard route.
- Add a JSON data Source to a data source storage.
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 {
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
Configuration = configuration;
FileProvider = hostingEnvironment.ContentRootFileProvider;
}
public IConfiguration Configuration { get; }
public IFileProvider FileProvider { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services) {
// Configures services to use the Web Dashboard Control.
services
.AddCors(options => {
options.AddPolicy("CorsPolicy", builder => {
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.WithHeaders("Content-Type");
});
})
.AddDevExpressControls()
.AddControllers();
services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
DashboardConfigurator configurator = new DashboardConfigurator();
configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
configurator.SetDataSourceStorage(CreateDataSourceStorage());
configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
return configurator;
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
// Registers the DevExpress middleware.
app.UseDevExpressControls();
app.UseRouting();
app.UseCors("CorsPolicy");
app.UseEndpoints(endpoints => {
// Maps the dashboard route.
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard", "DefaultDashboard");
// Requires CORS policies.
endpoints.MapControllers().RequireCors("CorsPolicy");
});
}
public DataSourceInMemoryStorage CreateDataSourceStorage() {
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
DashboardJsonDataSource jsonDataSourceSupport = new DashboardJsonDataSource("Support");
jsonDataSourceSupport.ConnectionName = "jsonSupport";
jsonDataSourceSupport.RootElement = "Employee";
dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSourceSupport.SaveToXml());
DashboardJsonDataSource jsonDataSourceCategories = new DashboardJsonDataSource("Categories");
jsonDataSourceCategories.ConnectionName = "jsonCategories";
jsonDataSourceCategories.RootElement = "Products";
dataSourceStorage.RegisterDataSource("jsonDataSourceCategories", jsonDataSourceCategories.SaveToXml());
return dataSourceStorage;
}
private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
if (e.ConnectionName == "jsonSupport") {
Uri fileUri = new Uri(FileProvider.GetFileInfo("App_data/Support.json").PhysicalPath, UriKind.RelativeOrAbsolute);
JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
jsonParams.JsonSource = new UriJsonSource(fileUri);
e.ConnectionParameters = jsonParams;
}
if (e.ConnectionName == "jsonCategories") {
Uri fileUri = new Uri(FileProvider.GetFileInfo("App_data/Categories.json").PhysicalPath, UriKind.RelativeOrAbsolute);
JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
jsonParams.JsonSource = new UriJsonSource(fileUri);
e.ConnectionParameters = jsonParams;
}
}
}
}
Start the Server
Open the asp-net-core-server folder and run the following command:
dotnet run
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>
Use the command below to launch the application.
npm start
Open http://localhost:4200/ in your browser to see the result. The client Web Dashboard app uses data from the newly created server (http://localhost:5000/api/dashboard).
Step 3. Switch to Viewer Mode
Once you create and save a dashboard, you can switch your Dashboard Designer to Viewer mode. 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
-
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.