elsa-workflows / elsa-designer

A standards-based Workflow Designer built with StencilJS

Elsa Workflow Designer

Elsa is a visual programming tool that allows you to implement parts or all of your application with workflows. Elsa Designer is a standalone client-side web component that you can embed in your own application.

Installing this component

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/@elsa-workflows/[email protected]/dist/elsa-workflow-designer.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @elsa-workflows/elsa-workflow-designer --save
• Put a script tag similar to this <script src='node_modules/@elsa-workflows/elsa-workflow-designer/dist/elsa-workflow-designer.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @elsa-workflows/elsa-workflow-designer --save
• Add an import to the npm packages import @elsa-workflows/elsa-workflow-designer;
• Then you can use the element anywhere in your template, JSX, html etc

Using this component

To use the component, add the following HTML tag:

<wf-designer-host></wf-designer-host>

Out of the box, the designer registers a default set of activities that are provided from a set of plugins. To add custom activities, you need to define them as part of a custom plugin.

Integration with other Frontend framework

Angular(2+)

1. Add Elsa Designer pkg CDN on index.html

<script
    type="module"
    src="https://unpkg.com/@elsa-workflows/[email protected]/dist/elsa-workflow-designer/elsa-workflow-designer.esm.js"
></script>
<script
    nomodule=""
    src="https://unpkg.com/@elsa-workflows/[email protected]/dist/elsa-workflow-designer/elsa-workflow-designer.js"
></script>

2. On app.module.ts, add CUSTOM_ELEMENTS_SCHEMA

@NgModule({
  //whatever you have on app module goes here... 
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

3. Add <ng-wf-designer-host></ng-wf-designer-host> to the HTML

<wf-designer-host
    id="designerHost"
    canvas-height="300vh"
    [attr.data-activity-definitions]="activityDefinition"
    [attr.data-workflow]="workflowModel">
</wf-designer-host>

See full example here

Custom Activities

TODO: Describe how to register custom activity definitions using JavaScript & JSON.

elsa-designer's Issues

Integration with Angular

Hi! I am looking into integrating the designer into an Angular Application. I tried following the instructions from StencilJS (https://stenciljs.com/docs/angular) but the designer UI doesnt show up.

this is probably the same issue as #18? I don't see any dependency on BScomponent in the source code from github.

Steps I follow:

1. Adding external dependency like bootstrap css/js on index.html
2. Add CUSTOM_ELEMENTS_SCHEMA on app.module.ts
3. Run defineCustomElements on main.ts

full source code:
https://codesandbox.io/s/angular-elsa-stencil-designer-pg7hd?file=/src/index.html

Implement filtering in Activity Picker

The activity picker has the UI to filter activities, but it's not yet functional.

Activity Definitions as plain objects

Although activity definitions are already defined as simple objects, one of the object's fields, getOutcomes, is actually a function. This makes it impossible to allow one to define activity definitions truly as data.

To fix this, I will change this field's type from a function to a union type of Array<string> | string. When the value is an array, each item is treated as a possible outcome. If the value is a string, it is interpreted as a lambda that will be evaluated at design-time in the designer.

Example using an array as outcomes:

{
   "type": "WriteLine",
   "displayName": "Write Line",
   "description": "Writes a message to the standard output",
   "category": "Console",
   "outcomes": ["Done"]
}

Example using a lambda as outcomes:

{
   "type": "Fork",
   "displayName": "Fork",
   "description": "Forks execution into multiple branches",
   "category": "Control Flow",
   "outcomes": "activity => activity.state.branches"
}

When the lambda is evaluated, the designer will pass in the activity for which the outcomes are being requested. This is important for activities such as Fork, because it enables the user to define the possible branches from the designer. The lambda can use this information to yield the possible outcomes.

how to use it in vuejs ?

i do as the document 👍 https://stenciljs.com/docs/vue
but can't find the loader

ELSA workflow designer not supporting in angular 9 application

Hi, I want to integrate the ELSA workflow designer in an angular 9 application. To implement that I followed all steps mentioned in this URL(https://github.com/elsa-workflows/elsa-designer) but the UI is not showing.

---

How to use it on blazor

Hi! Do you have any sample to start using it with blazor?

Thanks!

Languages

Hi, we need to use Elsa in new project and must change languages to Italian.
How can I change UI label?
Can Elsa support multilanguage?

Implement Icons

Bpmn gateways

Its possible to make fork and join as bpmn gateways ?
https://i.pinimg.com/564x/3e/13/d5/3e13d57ea9f12d2760b7ca339bac3bba.jpg

By the way could u give answer ?
There have possibility to flow conditional flow ?

1. Parralel gateway ?
2. Or gateway ( flow element by some condition )?

Businnes Analysyst love bpmn because its simple to explain.

Please explore bpmn standart!
In my opinion all worflow system and state machines comes to bpmn standart !

Great project!

Is it possible that getting the activity definitions from the back-end, and building them in the front ?

I need info about your library

Hello, Im trying to add you library to my UI project. Im using NextJs, this is SSR of ReactJs. Also Im using material-ui framework.

Im following your instructions and I cannt make your library works with my application.

I made this example https://codesandbox.io/s/elsa-designer-ficqu

I need more information or documentation of how integrate your library to a Reactjs application and where is the library API info to have the possibility to manage your library.

Best Regards
Orestes

dashboard broke after excecution of a workflow

i've made a simple workflow that use a custom activity.
the custom activity ends with this code:
Output.SetVariable("Test", assetsDTO); return Done();

the last node of my workflow is a simple httpwriterespose.
inside i've wrote:
"Entity inserted: "+ Test.ID + " succes!"

after using post man to call this simple workflow it return 204 and also if i try to acces http://localhost:50777/Elsa/workflow-definition i've just an empty page

if i wanna re run my project i've to recreate the entire db (i'm using SQL server with entity framework)

PS: the custom activity runs ok (i've tested this workflow with the dubug)

Library not working as standalone

Hi there, I'm brand new to Stencil (and npm for that matter), all I am trying to do is open this up locally and be able to run it. I have tried creating a new Stencil app with all 3 of the available options which then works with the default code but then once I move the repo code across it complains about missing dependencies and all sorts of other issues which I have tried to go through but not getting very far at this stage! I assume there is some obvious dependency I am missing but if you could document a sequential bullet point list of what to do for a brand new installation that would be very helpful please (i.e. Step 1 install npm etc)?

lastClickedLocation not set correctly

Hi,

Can I suggest a change to the Designer onAddActivityClick event? I found that el.offsetLeft and el.offsetTop were being calculated relative to the parent element, which was already offset in the page (which led to the new elements disappearing as they were rendered off to the right). I amended the call to use getBoundingClientRect which is working okay on my dev install...

  private onAddActivityClick = (e: MouseEvent) => {
    const el = this.elem() as HTMLElement;
    const clientRect = el.getBoundingClientRect();
    this.lastClickedLocation = {
      left: e.pageX - clientRect.left,
      top: e.pageY - clientRect.top
    };
    this.addActivityEvent.emit();
  };