Create an Angular Dashboard Application

Feb 16, 2024
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 6.

View Example

Prerequisites

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

Navigate to the created folder after the project is created:

cd dashboard-angular-app

Install the following npm packages:

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

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

In the src/app/app.component.ts file, import the DxDashboardControlModule module.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule, 
    RouterOutlet, 
    DxDashboardControlModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'dashboard-angular-app';
}

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/ace-builds/css/ace.css");  
@import url("../node_modules/ace-builds/css/theme/dreamweaver.css");  
@import url("../node_modules/ace-builds/css/theme/ambiance.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 server application to show your data. In Visual Studio, create an ASP.NET Core Empty application with .NET 6 as a target framework. 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 NuGet packages:

DevExpress.AspNetCore.Dashboard
Newtonsoft.Json (required for JSON Data Sources)

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)
            : base(configurator, dataProtectionProvider) {
        }
    }
}

Configure the Server

In your application, create the Data folder and add your data files to the folder. In this example, data is obtained from a JSON file. You can find sample data in the following repository:

View Example

Create the Data/Dashboards folder that will store dashboards.

Replace the content of the Program.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.DashboardAspNetCore;
using DevExpress.DashboardWeb.Native;
using DevExpress.DashboardWeb;
using Microsoft.Extensions.FileProviders;
using DevExpress.AspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DataAccess.Json;

var builder = WebApplication.CreateBuilder(args);

IFileProvider? fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration? configuration = builder.Configuration;

// Configures CORS policies.                
builder.Services.AddCors(options => {
    options.AddPolicy("CorsPolicy", builder => {
        builder.AllowAnyOrigin();
        builder.AllowAnyMethod();
        builder.WithHeaders("Content-Type");
    });
});

// Adds the DevExpress middleware.
builder.Services.AddDevExpressControls();
// Adds controllers.
builder.Services.AddControllersWithViews();

// Configures the dashboard backend.
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
    DashboardConfigurator configurator = new DashboardConfigurator();
    configurator.SetDashboardStorage(new DashboardFileStorage(fileProvider.GetFileInfo("Data/Dashboards").PhysicalPath));
    configurator.SetDataSourceStorage(CreateDataSourceStorage());
    configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
    configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
    return configurator;
});

void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
    if (e.ConnectionName == "jsonSupport") {
        Uri fileUri = new Uri(fileProvider.GetFileInfo("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("Data/categories.json").PhysicalPath, UriKind.RelativeOrAbsolute);
        JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
        jsonParams.JsonSource = new UriJsonSource(fileUri);
        e.ConnectionParameters = jsonParams;
    }
}

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;
}

var app = builder.Build();

// Registers the DevExpress middleware.            
app.UseDevExpressControls();

// Registers routing.
app.UseRouting();
// Registers CORS policies.
app.UseCors("CorsPolicy");

// Maps the dashboard route.
app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
// Requires CORS policies.
app.MapControllers().RequireCors("CorsPolicy");

app.Run();

In the Properties folder, open launchSettings.json. Modify the applicationUrl setting as shown below to use port 5001 for HTTPS and port 5000 for HTTP:

//...
"profiles": {
  "asp_net_core_server": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "applicationUrl": "https://localhost:5001;http://localhost:5000",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
 },
}

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='https://localhost:5001/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).

Tip

Related Articles:

Step 3. Switch to Viewer Mode

In Designer mode, the control loads the extensions required to design dashboards. Users can access the Data Source Wizard, preview underlying data, and modify dashboards from storage. Requests from the dashboard backend server can be sent to third-party resources. A user can also switch the control to Viewer mode.

After you created and saved a dashboard, switch your Dashboard Designer application to ViewerOnly mode to prevent users from modifying the dashboard and its data.

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>

Refer to the following topic for more information on how to switch the component’s properties: Property Binding.

Warning

Working mode does not influence server settings. Initially, the server works at the ClientTrustLevel.Full trust level. Verify trust level and specify the actions a client can initiate on the server. See the following topic for details: Working Mode Access Rights.

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.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Prerequisites

Requirements

Step 1. Configure a Client Application

Step 2. Create a Server Application

Create the Application

Install NuGet Packages

Configure the Dashboard Controller

Configure the Server

Start the Server

Step 3. Switch to Viewer Mode

Next Steps