HTML5 designer support

[Bykiev]

Hi,

I'm new to Elsa and I need to create a worflow process. I see Elsa is more promising than WWF, but I need an HTML5-based designer for ASP .NET Web API project. Is any plans to implement it?

[sfmskywalker]

Absolutely. The workflow designer provided by this project is implemented using JsPlumb, which itself leverages HTML5 and CSS3. On a project I worked on in the past, one of the customer's requirements was to have a web-based workflow designer. I didn't have the time back then to implement one, so we went with WF. But with this project, I can finally implement a workflow engine + web-based designer.

[Bykiev]

Thanks, do I understand correctly, currently I can use it in SPA application? Is any sample demonstrated it?

[sfmskywalker]

I see what you mean now - you want to rehost the designer in your own app. Although I did design the workflow editor to be reusable across asp.net core applications as an MVC component, I had not thought of providing a purely client-side component.

Currently, a lot of rendering logic happens serverside, such as the activity designer shapes and activity property editors.

I’ll give this scenario some thought. In the meantime, could you tell a little bit more about your requirements? For example, would you expect the designer to be a self contained reusable HTML component with an API so that you can read workflow data and feed it workflows that your stored some place?

[sfmskywalker]

I read your message again and noticed you mentioned ASP.NET Web API. Would the following work for you:

• Host the workflow designer either in your own custom ASP.NET Core application, or in a dedicated workflows manager ASP.NET Core application.
• Have the API project read & execute workflows.

If so, then that will work today. However I’m re-architecting the way activity designers are implemented by generating the forms UI automatically based on reflecting upon activity models. Depending on your timelines, you may want to wait implementing your own activities, which will break once I get my rework merged in.

I’m planning on writing a tutorial about hosting the workflow designer in your own ASP.NET Core application and hosting & executing workflows themselves in a separate ASP.NET Core application soon. Until then, the repo contains an examples folder showing how this works.

[Bykiev]

@sfmskywalker, thank you for your time.
I'd like to host a workflow designer inside my application, because it's quite complicated to support 2 applications for a small team (auth, views and etc). I can wait till the end of the year, workflow is on our roadmap and we have some time to review existing solutions. HTML-designer is must-have for our project, we're planning to host workflow engine inside WCF-service. As I can see State machine workflows are not supported yet?

[sfmskywalker]

If your application is ASP.NET Core, then you can certainly host the designer there - the workflow designer is implemented as an MVC component.

Hosting the workflow engine within a WCF-service will work nicely, since the engine is implemented as a set of .NET Standard 2.0 libraries.

As for State machine workflows, although I hadn't really thought of that, it is definitely currently supported.

To implement a state-machine workflow, you would only add triggers to your workflow (triggers are regular activities, but flagged as a trigger so that the designer can visually make a distinction between triggers and actions). When the activity that the state machine is currently at triggers, the workflow transitions to the next state (represented as an activity that is itself a trigger). This is also how long-running workflows would be implemented. Depending on your use case, you could implement a generic State activity that is a trigger, or implement more domain-specific state activities. As with any activity, triggers can have one or more outcomes (called "endpoints") that allow the state machine to transition into the next state.

That being said, I can think of a few improvements such that a workflow intended to be a state machine, actually looks more like a state machine. For example, right now a trigger activity is displayed with a little lightning bolt icon. But when looking at a state machine diagram, you probably don't want to see these icons.

Anyway, I hope this was helpful. Let me know if anything is unclear.

[Bykiev]

@sfmskywalker, thank you for detailed explanation!
So, you have no plans to support html desginer in the near future?

[sfmskywalker]

Well, it really kinda depends on what you mean exactly by "html designer". For instance, do you mean self-contained, client-side only component with zero dependencies on an ASP.NET Core backend service?

[sfmskywalker]

Let's say I implemented the designer as a ReactJS component, which itself makes AJAX calls to fetch data and HTML - would that work for your SPA app?

[Bykiev]

@sfmskywalker, it can be better if client side will be implemeted as html5-component using pure js (maybe using jquery), then anyone can create a wrapper for it's framework. So, first of all, we need to separate views from backend.

[sfmskywalker]

I gave this some more thought, and I think you're absolutely right. The core engine is already designed to be completely UI-agnostic, so that one could e.g. build not only a web-based designer, but also a desktop-based designer. Or even better: a web component / custom element.

As I am digging into this, I bumped into StencilJS. My understanding is that it's not a framework, but a component compiler that compiles your code down to standards-compliant web components.

The result would be that you can simply drop in the designer in your own SPA. The designer will expose methods to receive & return workflow data in JSON format, which is directly executable by the workflow engine. This way you can take full control on how and where you want to persist workflows. They could be downloaded to your local drive, stored online in some document db, or anywhere else that makes sense for you.

Thoughts?

[Bykiev]

@sfmskywalker, looking promising, although StencilJS is not widly used in production (I didn't see it before). I believe html designer is must-have, it'll add flexibility for this project. Current ASP.NET Core designer should be a stand-alone package shipped via NuGet and html designer via npm/bower.

[sfmskywalker]

The nice thing about StencilJS is that it generates an NPM distribution of the component library, i.e. users of the library don't depend on StencilJS - they just get vanilla JS.

I agree - we need an html designer distributed via npm/bower 👍
Current ASP.NET Core designer already is packaged as a NuGet 🏁

[sfmskywalker]

I started work on the HTML5-based workflow designer. The following is a sample index.html file that demonstrates embedding the designer. The designer works on its own, but in order to allow custom control over certain aspects such as the activity picker button location and others, I implemented those as separate components. We can then always provide a higher-level component that includes everything out of the box. Please have a look and lmk what you think: https://github.com/elsa-workflows/elsa-designer-html/blob/master/src/index.html

If you want to to try it out locally, all you'd have to do is clone this new repo and run:

npm install
npm run start

You should then see something like this:

Activity picker is also starting to work:

[sfmskywalker]

There's still a few details to be implemented, such as serialization of the workflow definitions from and to JSON/YAML, activity picker filtering by category, actually implementing a wide range of activities etc.

[Skrypt]

Me like this 😍

[Bykiev]

@sfmskywalker, awesome! Is delete workflow item isn't supported yet?

[sfmskywalker]

Not yet, but that will be there shortly together with being able to export and import json/yaml. Hopefully before the start of next week.

[sfmskywalker]

@Bykiev I just pushed an updated to the elsa-workflow-designer NPM package that supports deleting activities from the workflow as well as exporting workflows to JSON (the YAML, XML & Binary options don't actually work right now).

To delete an activity, simply right-click and click "delete":

Next feature is the ability to import a JSON file to resume editing. After that, I want to revisit the .NET Core workflow engine and simplify a few things.

Although there are still a ton of details to be implemented and documented, at least you should now be able to re-host the workflow designer in your own app and manage persistence of workflow data yourself (your users probably don't want to actually download JSON files, but have your app store it somewhere in a database).

[sfmskywalker]

Export/Import has also been implemented ✔️

[Bykiev]

@sfmskywalker, perfect! I've a few questions about using Elsa.Core, I'll create a separate issue for it.
Thank you!

[sfmskywalker]

The HTML5 Workflow Designer is being maintained here: https://github.com/elsa-workflows/elsa-designer-html