Add sample CustomUIHandler (elsa-workflows#4729)

* add sample CustomUIHandler

* Refactor code by renaming and moving classes

Renamed 'VehiculeActivity', 'VehiculeUIHandler' to 'VehicleActivity', 'VehicleUIHandler' and moved them to their separate files. A debouncer was added to InputsTab in the WorkflowDefinitionEditor to limit the rate of firing refresh requests. Optimized codes by reducing unnecessary lines and improved consistency in the 'Program.cs' file.

---------

Co-authored-by: Jérémie DEVILLARD <[email protected]>
Co-authored-by: Sipke Schoorstra <[email protected]>

src/samples/aspnet/Elsa.Samples.AspNet.CustomUIHandler/Elsa.Samples.AspNet.CustomUIHandler.csproj

@@ -0,0 +1,19 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+ <PropertyGroup>
+ <TargetFramework>net8.0</TargetFramework>
+ <Nullable>enable</Nullable>
+ <ImplicitUsings>enable</ImplicitUsings>
+ </PropertyGroup>
+
+ <ItemGroup>
+ <ProjectReference Include="..\..\..\bundles\Elsa\Elsa.csproj" />
+ <ProjectReference Include="..\..\..\modules\Elsa.AzureServiceBus\Elsa.AzureServiceBus.csproj" />
+ <ProjectReference Include="..\..\..\modules\Elsa.EntityFrameworkCore.Sqlite\Elsa.EntityFrameworkCore.Sqlite.csproj" />
+ <ProjectReference Include="..\..\..\modules\Elsa.Http\Elsa.Http.csproj" />
+ <ProjectReference Include="..\..\..\modules\Elsa.Identity\Elsa.Identity.csproj" />
+ <ProjectReference Include="..\..\..\modules\Elsa.Liquid\Elsa.Liquid.csproj" />
+ <ProjectReference Include="..\..\..\modules\Elsa.Workflows.Api\Elsa.Workflows.Api.csproj" />
+ </ItemGroup>
+
+</Project>

src/samples/aspnet/Elsa.Samples.AspNet.CustomUIHandler/Program.cs

@@ -0,0 +1,44 @@
+using Elsa.EntityFrameworkCore.Modules.Management;
+using Elsa.EntityFrameworkCore.Modules.Runtime;
+using Elsa.Extensions;
+using Elsa.Samples.AspNet.CustomUIHandler;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddElsa(elsa =>
+{
+ elsa.UseWorkflowManagement(management => management.UseEntityFrameworkCore());
+ elsa.UseWorkflowRuntime(runtime => runtime.UseEntityFrameworkCore());
+ 
+ elsa.UseWorkflowsApi();
+ elsa.UseHttp();
+ elsa.UseJavaScript();
+ elsa.UseLiquid();
+ 
+ elsa.UseIdentity(identity =>
+ {
+ identity.UseAdminUserProvider();
+ identity.TokenOptions = options =>
+ {
+ options.SigningKey = "c7dc81876a782d502084763fa322429fca015941eac90ce8ca7ad95fc8752035";
+ options.AccessTokenLifetime = TimeSpan.FromDays(1);
+ };
+ });
+ 
+ elsa.UseDefaultAuthentication();
+ elsa.AddActivity<VehicleActivity>();
+});
+
+builder.Services.AddSingleton<VehicleUIHandler>();
+builder.Services.AddCors(cors => cors.AddDefaultPolicy(policy => policy.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin()));
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+app.UseHttpsRedirection();
+app.UseCors();
+app.UseAuthentication();
+app.UseAuthorization();
+app.UseWorkflowsApi();
+app.Map("/test",c=> c.UseWorkflows());
+app.Run();

src/samples/aspnet/Elsa.Samples.AspNet.CustomUIHandler/Properties/launchSettings.json

@@ -0,0 +1,38 @@
+{
+ "$schema": "http:https://json.schemastore.org/launchsettings.json",
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http:https://localhost:28369",
+ "sslPort": 44337
+ }
+ },
+ "profiles": {
+ "http": {
+ "commandName": "Project",
+ "dotnetRunMessages": true,
+ "launchBrowser": true,
+ "applicationUrl": "http:https://localhost:5078",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "https": {
+ "commandName": "Project",
+ "dotnetRunMessages": true,
+ "launchBrowser": true,
+ "applicationUrl": "https://localhost:7252;http:https://localhost:5078",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ }
+ }
+}

src/samples/aspnet/Elsa.Samples.AspNet.CustomUIHandler/RefreshUIHandler.cs

@@ -0,0 +1,19 @@
+using System.Reflection;
+using Elsa.Workflows.Contracts;
+
+namespace Elsa.Samples.AspNet.CustomUIHandler;
+
+/// <summary>
+/// Configures the specified property to refresh the UI when the property value changes.
+/// </summary>
+public class RefreshUIHandler : IPropertyUIHandler
+{
+ public ValueTask<IDictionary<string, object>> GetUIPropertiesAsync(PropertyInfo propertyInfo, object? context, CancellationToken cancellationToken = default)
+ {
+ IDictionary<string, object> result = new Dictionary<string, object>
+ {
+ { "Refresh", true }
+ };
+ return ValueTask.FromResult(result);
+ }
+}

src/samples/aspnet/Elsa.Samples.AspNet.CustomUIHandler/VehicleActivity.cs

@@ -0,0 +1,19 @@
+using Elsa.Workflows;
+using Elsa.Workflows.Attributes;
+using Elsa.Workflows.Models;
+using Elsa.Workflows.UIHints;
+
+namespace Elsa.Samples.AspNet.CustomUIHandler;
+
+/// <summary>
+/// A sample activity that let's you select a car brand.
+/// </summary>
+public class VehicleActivity : Activity<string>
+{
+ [Input(
+ Description = "The content type to use when sending the request.",
+ UIHint = InputUIHints.DropDown,
+ UIHandlers = [typeof(VehicleUIHandler), typeof(RefreshUIHandler)]
+ )]
+ public Input<string> Brand { get; set; } = default!;
+}

src/samples/aspnet/Elsa.Samples.AspNet.CustomUIHandler/VehicleUIHandler.cs

@@ -0,0 +1,25 @@
+using System.Reflection;
+using Elsa.Workflows.UIHints.Dropdown;
+
+namespace Elsa.Samples.AspNet.CustomUIHandler;
+
+/// <summary>
+/// A custom dropdown options provider to provide vehicle options for the Brand property of <see cref="VehicleActivity"/>.
+/// </summary>
+public class VehicleUIHandler : DropDownOptionsProviderBase
+{
+ private readonly Random _random = new();
+
+ protected override ValueTask<ICollection<SelectListItem>> GetItemsAsync(PropertyInfo propertyInfo, object? context, CancellationToken cancellationToken)
+ {
+ var items = new List<SelectListItem>
+ {
+ new("BMW", "1"),
+ new("Tesla", "2"),
+ new("Peugeot", "3"),
+ new(_random.Next(100).ToString(), "4")
+ };
+
+ return new(items);
+ }
+}