WIP: Add JSON expression handler

src/core/Elsa.Core/Expressions/JsonHandler.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Threading;
+using System.Threading.Tasks;
+using Elsa.Services.Models;
+using Newtonsoft.Json;
+
+namespace Elsa.Expressions
+{
+    public class JsonHandler : IExpressionHandler
+    {
+        public const string SyntaxName = "Json";
+        public string Syntax => SyntaxName;
+
+        public Task<object?> EvaluateAsync(string expression, Type returnType, ActivityExecutionContext context, CancellationToken cancellationToken)
+        {
+            var value = JsonConvert.DeserializeObject(expression, returnType);
+            return Task.FromResult(value)!;
+        }
+    }
+}

src/core/Elsa.Core/Extensions/ElsaServiceCollectionExtensions.cs

@@ -121,6 +121,7 @@ namespace Microsoft.Extensions.DependencyInjection
             services
                 .TryAddProvider<IExpressionHandler, LiteralHandler>(ServiceLifetime.Singleton)
                 .TryAddProvider<IExpressionHandler, VariableHandler>(ServiceLifetime.Singleton)
+                .TryAddProvider<IExpressionHandler, JsonHandler>(ServiceLifetime.Singleton)
                 .AddScoped<IExpressionEvaluator, ExpressionEvaluator>();
 
             // Workflow providers.

src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-check-list-property/elsa-check-list-property.tsx

@@ -1,5 +1,6 @@
 import {Component, h, Prop, State} from '@stencil/core';
 import {ActivityDefinitionProperty, ActivityPropertyDescriptor} from "../../../../models";
+import {parseJson} from "../../../../utils/utils";
 
 @Component({
   tag: 'elsa-check-list-property',
@@ -16,8 +17,8 @@ export class ElsaSingleLineProperty {
   monacoEditor: HTMLElsaMonacoElement;
 
   async componentWillLoad() {
-    const expression = this.propertyModel.expression || '';
-    this.currentValues = expression.split(',');
+    const expression = this.propertyModel.expression || '[]';
+    this.currentValues = parseJson(expression) ?? [];
   }
 
   onCheckChanged(e: Event) {
@@ -38,9 +39,9 @@ export class ElsaSingleLineProperty {
     const fieldName = propertyName;
     const fieldLabel = propertyDescriptor.label || propertyName;
     const fieldHint = propertyDescriptor.hint;
-    const property = this.propertyModel;
     const options = propertyDescriptor.options as Array<any>;
-    const values = this.currentValues;
+    const values = this.currentValues.map(x => x ? x.trim() : '').filter(x => x.length > 0);
+    const valuesJson = JSON.stringify(values);
 
     return (
       <div>
@@ -67,7 +68,7 @@ export class ElsaSingleLineProperty {
         </div>
 
         {fieldHint ? <p class="mt-2 text-sm text-gray-500">{fieldHint}</p> : undefined}
-        <input type="hidden" name={fieldName} value={values.join(',')}/>
+        <input type="hidden" name={fieldName} value={valuesJson}/>
       </div>
     )
   }

src/designer/elsa-workflows-studio/src/property-display-drivers/check-list-driver.tsx

@@ -18,6 +18,6 @@ export class CheckListDriver implements PropertyDisplayDriver {
 
   update(activity: ActivityModel, property: ActivityPropertyDescriptor, form: FormData) {
     const value = form.get(property.name) as string;
-    setActivityModelProperty(activity, property.name, value, 'Literal');
+    setActivityModelProperty(activity, property.name, value, 'Json');
   }
 }

src/designer/elsa-workflows-studio/src/utils/utils.ts

@@ -119,6 +119,15 @@ export function getProperty(properties: Array<ActivityDefinitionProperty>, name:
   return property;
 }
 
+export function parseJson(json: string): any {
+  try {
+    return JSON.parse(json);
+  } catch (e) {
+    console.warn(`Error parsing JSON: ${e}`);
+  }
+  return undefined;
+}
+
 export function timeSince(time) {
   switch (typeof time) {
     case 'number':