Custom Field Types input date #3943

alonafish · 2023-04-23T09:01:11Z

alonafish
Apr 23, 2023

I've build a custom activity that one of its inputs are Start date and End date.
I've tried to implement custom input control type of Date Html Input based on Custom Field Types.

_Host.cshtml

@page "/"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Elsa Workflows</title>
    <link rel="icon" type="image/png" sizes="32x32" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-16x16.png">
    <link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/fonts/inter/inter.css">
    <link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.css">
    <script src="/_content/Elsa.Designer.Components.Web/monaco-editor/min/vs/loader.js"></script>
    <script type="module" src="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.esm.js"></script>
</head>
<body>
    <elsa-studio-root server-url="https://localhost:7283/" monaco-lib-path="_content/Elsa.Designer.Components.Web/monaco-editor/min">
        <elsa-studio-dashboard></elsa-studio-dashboard>
    </elsa-studio-root>
</body>
<script type="text/javascript" language="javascript">

    function MyCustomInputDriver(elsaStudio) {

        // Get convenience methods.
        const { getOrCreateProperty, htmlToElement } = elsaStudio;

        // Implement the display method, which receives the activity model and the property for which the editor must be rendered.
        this.display = (activity, property) => {
            // Get the property model.
            const propertyModel = getOrCreateProperty(activity, propertyDescriptor.name);

            // Get the configured default syntax name.
            const defaultSyntax = propertyDescriptor.defaultSyntax || 'Literal';

            // Get the current property value for the default syntax.
            const currentValue = propertyModel.expressions[defaultSyntax] || '';

            // Create a property editor element (for displaying label, hint and syntax toggle).
            // This will wrap our custom control.
            const propertyEditor = document.createElement('elsa-property-editor');

            // Our custom input element control. Can be anything you want.
            // Using HTML string to easily construct an actual element object.
            // Better yet would be to implement a component with Stencil, Angular or React if you;re using any of these frameworks.
            const inputHtml =
                `<input type="text" name="dateInput">`;

            // Create an actual input element from the HTML string.
            const inputElement = htmlToElement(inputHtml);

            // Add the custom input control element to the property editor as a child.
            propertyEditor.append(inputElement);

            // Initialize the property editor.
            propertyEditor.propertyDescriptor = propertyDescriptor;
            propertyEditor.propertyModel = propertyModel;

            // Setup change handler for custom control that updates the property model.
            inputElement.addEventListener('change', (e) => {
                const input = e.currentTarget;
                propertyModel.expressions[defaultSyntax] = input.value;
            });

            // return the created custom control.
            return propertyEditor;
        };

        const elsaStudioRoot = document.querySelector('elsa-studio-root');
        elsaStudioRoot.addEventListener('initializing', e => {
            const elsaStudio = e.detail;
            elsaStudio.propertyDisplayManager.addDriver('my-custom-input', () => new MyCustomInputDriver(elsaStudio));
        });
    }

</script>
</html>

MyCustomActivity.cs

[Activity(
    Category = "My custom activity",
    Outcomes = new[] { OutcomeNames.Body }
)]
 public class MyCustomActivity: Activity
 {

     public MyCustomActivity(IAuditServiceProxyClient auditServiceProxyClient)
     {
           #services injection
     }

     #region Input
     [ActivityInput(Hint = "Audit start date",
                UIHint = "my-custom-input",
                DefaultSyntax = JavaScriptExpressionHandler.SyntaxName,
                SupportedSyntaxes = new[] { SyntaxNames.JavaScript, SyntaxNames.Liquid })]
     public DateTime? StartTime { get; set; }

     [ActivityInput(Hint = "Audit end date",
                UIHint = "my-custom-input",
                DefaultSyntax = JavaScriptExpressionHandler.SyntaxName,
                SupportedSyntaxes = new[] { SyntaxNames.JavaScript, SyntaxNames.Liquid })]
     public DateTime? EndTime { get; set; }
     #endregion Input

     [ActivityOutput(DefaultWorkflowStorageProvider = TransientWorkflowStorageProvider.ProviderName)]
     public IEnumerable<MyDto> Output { get; set; }

     public override async ValueTask<IActivityExecutionResult> ExecuteAsync(ActivityExecutionContext context)
     {
         #code
         return Outcome(OutcomeNames.Done);
     }
 }

I have a such error. And the input is not shown.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Field Types input date #3943

{{title}}

Replies: 0 comments

Select a reply

Custom Field Types input date #3943

alonafish Apr 23, 2023

Replies: 0 comments

alonafish
Apr 23, 2023