Customize the Dashboard Configurator (ASP.NET Core Blazor)

• Aug 29, 2023
• 2 minutes to read

This topic describes how to access the DashboardConfigurator object that allows you to manage global dashboard options. For example, you can customize the dashboard storage or specify a connection string provider for SQL data sources.

Customize the Default Configurator

To access the dashboard configurator, define the DashboardsOptions.SetupDashboardConfigurator delegate in the IBlazorApplicationBuilder.Modules.AddDashboards method. If your application does not use the Application Builder, use parameters of the AddXafDashboards extension method.

The following example demonstrates how to specify a connection string provider that allows users to create new SQL data sources based on connection strings listed in MySolution.Blazor.Server\appsettings.json. Open MySolution.Blazor.Server\Startup.cs and adjust the code to match the snippet below:

using DevExpress.ExpressApp.Dashboards.Blazor;
using DevExpress.DashboardAspNetCore;
// ...
public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddXaf(Configuration, builder => {
            builder.UseApplication<YourSolutionNameBlazorApplication>();
            builder.Modules
                // ...
                .AddDashboards(options => {
                    options.DashboardDataType = typeof(DevExpress.Persistent.BaseImpl.DashboardData);
                    options.SetupDashboardConfigurator = (configurator, services) => {
                        var configuration = services.GetRequiredService<IConfiguration>();
                        configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
                    };
                });
            // ...
        })
    }
    // ...
}

Create a Custom Configurator

1. In the MySolution.Blazor.Server\Services folder, create a BlazorDashboardConfigurator descendant.
2. In the constructor of the newly created class, request the required services.

3. Declare a public method (for example, Setup) that initializes the configurator. Do not initialize your configurator in a constructor. After a dashboard configurator instance is created, the service provider initializes it, which can potentially overwrite the logic declared in a constructor.

   using DevExpress.DashboardAspNetCore;
   using DevExpress.ExpressApp.Dashboards.Blazor.Services;
   using Microsoft.Extensions.Configuration;
   
   public class CustomDashboardConfigurator : BlazorDashboardConfigurator {
       private readonly IConfiguration configuration;
       public CustomDashboardConfigurator(IConfiguration configuration) {
           this.configuration = configuration;
       }
       public void Setup() {
           SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
       }
   }
   

4. Register your custom configurator as a scoped service in the MySolution.Blazor.Server\Startup.cs file. In the delegate passed to the AddDashboards method, call the method that initializes this configurator (Setup in this example):

   using DevExpress.ExpressApp.Dashboards.Blazor;
   using DevExpress.ExpressApp.Dashboards.Blazor.Services;
   using DevExpress.DashboardAspNetCore;
   // ...
   public class Startup {
       // ...
       public void ConfigureServices(IServiceCollection services) {
           // ...
           services.AddScoped<BlazorDashboardConfigurator, CustomDashboardConfigurator>();
           services.AddXaf(Configuration, builder => {
               builder.UseApplication<YourSolutionNameBlazorApplication>();
               builder.Modules
                   // ...
                   .AddDashboards(options => {
                       options.DashboardDataType = typeof(DevExpress.Persistent.BaseImpl.DashboardData);
                       options.SetupDashboardConfigurator = (configurator, services) => {
                           ((CustomDashboardConfigurator)configurator).Setup();
                       };
                   });
               // ...
           })
       }
       // ...
   }