Hello Friends, In this article, we will learn how to integrate Dev-Express dashboard control in an angular application with .NET Core backend configuration.
Now First, we need to create API Project; In Visual Studio, create a new project and select ASP.NET Core Web Application on the start page, and then select Create.
In the NuGet Package Manager, install the following package:
DevExpress.AspNetCore.Dashboard
1. Open package manages settings.
2. Add a new item in the package source
Name: DevExpres
Source: https://nuget.devexpress.com/<https://nuget.devexpress.com/{your-feed-authorization-key}>/api
3. Open manage NuGet packages
4. Select package source
5. Add package “DevExpress.AspNetCore.Dashboard“.
Now add the below code in Startup.cs file under ConfigureServices method.
services.AddControllersWithViews();
services.AddRazorPages();
services
.AddCors(options =>
{
options.AddPolicy("CorsPolicy", builder =>
{
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.WithHeaders("Content-Type");
});
})
.AddDevExpressControls()
.AddControllers()
.AddDefaultDashboardController((configurator, serviceProvider) =>
{
configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
configurator.SetDataSourceStorage(CreateDataSourceStorage());
configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
});
Now, create a new method under Startup.cs file CreateDataSourceStorage for Dashboard data source
public DataSourceInMemoryStorage CreateDataSourceStorage()
{
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("Dashboard Data Source");
string baseURL = "https://localhost:44395/";
jsonDataSourceUrl.JsonSource = new UriJsonSource(new Uri($"{baseURL}api/home/dashboard"));
dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
return dataSourceStorage;
}
private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e)
{
}
Now, add the below code under Configure method of Startup.cs file
app.UseDevExpressControls();
app.UseCors("CorsPolicy");
app.UseAuthentication();
app.UseEndpoints(endpoints =>
{
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
endpoints.MapRazorPages();
// Requires CORS policies.
endpoints.MapControllers().RequireCors("CorsPolicy");
});
Finally, our Startup.cs look like below
public class Startup
{
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)
{
services.AddControllersWithViews();
// In production, the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
services.AddControllersWithViews();
services.AddRazorPages();
services
.AddCors(options =>
{
options.AddPolicy("CorsPolicy", builder =>
{
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.WithHeaders("Content-Type");
});
})
.AddDevExpressControls()
.AddControllers()
.AddDefaultDashboardController((configurator, serviceProvider) =>
{
configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
configurator.SetDataSourceStorage(CreateDataSourceStorage());
configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
if (!env.IsDevelopment())
{
app.UseSpaStaticFiles();
}
app.UseRouting();
app.UseDevExpressControls();
app.UseCors("CorsPolicy");
app.UseAuthentication();
app.UseEndpoints(endpoints =>
{
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
endpoints.MapRazorPages();
// Requires CORS policies.
endpoints.MapControllers().RequireCors("CorsPolicy");
});
app.UseSpa(spa =>
{
// To learn more about options for serving an Angular SPA from ASP.NET Core,
// see https://go.microsoft.com/fwlink/?linkid=864501
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: "start");
}
});
}
public DataSourceInMemoryStorage CreateDataSourceStorage()
{
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("Dashboard Data Source");
string baseURL = "https://localhost:44395/";
jsonDataSourceUrl.JsonSource = new UriJsonSource(new Uri($"{baseURL}api/home/dashboard"));
dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
return dataSourceStorage;
}
private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e)
{
}
}
Now, we are adding dashboard controls in the Angular application:
First, we need to install dashboard control using the following npm command:
npm install devexpress-dashboard@20.2-next devexpress-dashboard-angular@20.2-next @devexpress/analytics-core@20.2-next devextreme@20.2-next devextreme-angular@20.2-next --save
Import the Dashboard Module In the app.module.ts file, import the DxDashboardControlModule module.
// ...
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';
@NgModule({
imports: [
// ...
DxDashboardControlModule
],
// ...
})
export class AppModule { }
Now add the dashboard control in the app.component.html file.
<dx-dashboard-control style="display: block;width:100%;height:800px;" endpoint="/api/dashboard"
(onDashboardInitialized)="reloadData()" [workingMode]="workingMode">
</dx-dashboard-control>
Now add the below code in the app.component.ts file.
@ViewChild(DxDashboardControlComponent, { static: false }) dashboardComponent: DxDashboardControlComponent
workingMode: string = "ViewerOnly";
dashboardControl: any;
constructor(
private http: HttpClient
) { }
reloadData() {
if(this.dashboardComponent)
this.dashboardComponent.instance.reloadData();
}
Now add the following global styles to the styles.css file:
@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");
Now Run the application and see the output look likes below.
