Supply Dashboard Parameters (ASP.NET Core Blazor)

• Aug 23, 2024
• 3 minutes to read

Dashboard parameters are dynamic values that can replace constants in filter expressions, calculated fields and other cases. Use one of the techniques described below to supply these values in code.

Review the following table for a summary of all methods that can supply parameter values to Dashboards:

Method	Sets Initial Values	User-editable	Can Change Current Dashboard Object *	Sets Values on Demand
Custom Dashboard State Service	Yes	Yes	Yes	No
The CustomParameters Event	Yes	No	Yes	No
The InitialDashboardState Property	Yes	Yes	No	No
Dashboard’s Client-Side API	No	Yes	Yes	Yes

* For example, this happens if you use Split Layout or Next/Previous Object Actions. On the other hand, the current Dashboard object does not change when you add a dashboard to navigation.

Use a Custom Dashboard State Service

You can supply dashboard parameters with the initial dashboard state if you implement a custom dashboard state service:

File: MySolution.Blazor.Server\Services\CustomDashboardStateService.cs

C#

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using System.Xml.Linq;

public class CustomDashboardStateService : IDashboardStateService {
    public DashboardState GetState(string dashboardId, XDocument dashboardDocument) {
        var dashboard = new Dashboard();
        dashboard.LoadFromXDocument(dashboardDocument);
        DashboardState dashboardState = new DashboardState();
        dashboardState.Parameters.Add(new DashboardParameterState("StringParameter", "StringValue", typeof(string)));
        if (dashboard.Parameters.Contains(p => p.Name == "IntParameter")) {
            dashboardState.Parameters.Add(new DashboardParameterState("IntParameter", 123, typeof(int)));
        }
        return dashboardState;
    }
}

To use the dashboard state service, register it with the dashboard configurator:

File: MySolution.Blazor.Server\Startup.cs

C#

using DevExpress.ExpressApp.Dashboards.Blazor;
using DevExpress.DashboardAspNetCore;
// ...
public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddXaf(Configuration, builder => {
            builder.UseApplication<MySolutionBlazorApplication>();
            builder.Modules
                // ...
                .AddDashboards(options => {
                    options.DashboardDataType = typeof(DashboardData);
                    options.SetupDashboardConfigurator = (dashboardConfigurator, services) => {
                        dashboardConfigurator.SetDashboardStateService(new CustomDashboardStateService());
                    };
                });
            // ...
        })
    }
    // ...
}

Use the CustomParameters Event

You can use the DashboardConfigurator‘s CustomParameters event to supply parameter values.

File: MySolution.Blazor.Server\Startup.cs

C#

using DevExpress.ExpressApp.Dashboards.Blazor;
using DevExpress.DashboardAspNetCore;
// ...
public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddXaf(Configuration, builder => {
            builder.UseApplication<MySolutionBlazorApplication>();
            builder.Modules
                // ...
                .AddDashboards(options => {
                    options.DashboardDataType = typeof(DashboardData);
                    options.SetupDashboardConfigurator = (dashboardConfigurator, services) => {
                        dashboardConfigurator.CustomParameters += (s, e) => {
                            var stringParameter = e.Parameters.FirstOrDefault(p => p.Name == "StringParameter");
                            if (stringParameter is not null) {
                                stringParameter.Value = "StringValue";
                            }
                        };
                    };
                });
            // ...
        })
    }
    // ...
}

For more information about Dashboard Configurator, refer to the following topic: Customize the Dashboard Configurator (ASP.NET Core Blazor).

Use the InitialDashboardState Property

You can use the DxDashboardModel.InitialDashboardState property to supply parameters with the initial dashboard state and set the initial dashboard state conditionally for a specific view.

File: MySolution.Blazor.Server\Controllers\InitialDashboardStateController.cs

C#

using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Dashboards.Blazor.Components;
using DevExpress.Persistent.Base;

public class InitialDashboardStateController : ObjectViewController<DetailView, IDashboardData> {
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<BlazorDashboardViewerViewItem>(this, viewItem => {
            var dashboardState = new DashboardState();
            dashboardState.Parameters.Add(new DashboardParameterState("StringParameter", "StringValue", typeof(string)));
            dashboardState.Parameters.Add(new DashboardParameterState("IntParameter", 123, typeof(int)));
            viewItem.ComponentModel.InitialDashboardState = dashboardState.SaveToJson();
        });
    }
}

Use the Client-Side JavaScript API

You can use this technique to set dashboard parameters in response to an event (such as an Action execution).

1. Define a JavaScript function that sets dashboard state based on the parameter values passed to it:

   File: MySolution.Blazor.Server\Pages\_Host.cshtml

   JavaScript

   <script>
       window.setDashboardParameters = function (parameters) {
           const dashboardControl = window.xafBlazorDashboard.getDashboardControl();
           if (dashboardControl) {
               dashboardControl.setDashboardState({ Parameters: parameters });
           }
       }
   </script>
   

2. Add a controller that invokes the function above when a condition is met (for example, when a user executes an Action):

   File: MySolution.Blazor.Server\Controllers\SetDashboardParametersController.cs

   C#

   using DevExpress.ExpressApp;
   using DevExpress.ExpressApp.Actions;
   using Microsoft.JSInterop;
   
   public class SetDashboardParametersController : ObjectViewController<DetailView, IDashboardData> {
       public SetDashboardParametersController() {
           var simpleAction = new SimpleAction(this, "SetDashboardParameters", null);
           simpleAction.Execute += SimpleAction_Execute;
       }
       private void SimpleAction_Execute(object sender, SimpleActionExecuteEventArgs e) {
           var jsRuntime = Application.ServiceProvider.GetRequiredService<IJSRuntime>();
           jsRuntime.InvokeVoidAsync("window.setDashboardParameters", 
               new Dictionary<string, object> {
                   { "StringParameter", "StringValue" },
                   { "IntParameter", 123 } });
       }
   }