Using Elsa Workflow Dashboard in Angular App

Last month, I’ve discovered a really good open-source project that allow to create Workflow using DotNet Core Language named Elsa . One of the famous element of this library is also that it propose a Dashboard to create the workflow definition and manage the Workflow Process instance.

The UI Designer is developed using StencilJS that allow to create Web Component. Web Component can then be used in various framework integration like Angular, React, Vue, Ember etc…

We will see in this blog how to integrate the Dashboard in an Angular App.

Creating the Angular App

First of all, let’s create an angular App. For this, just use the Angular CLI :

ng new AngularElsa
cd AngularElsa
ng serve

you should see your basic angular app.

Preparing the Elsa Package

In the Elsa source code, there is a powershell (.\build-assets.ps1) script that allow you to compile and create the Javascript Package. This script just execute the following command :

cd ./src/designer/elsa-workflows-studio
npm install
npm run build

cd ../bindings/aspnet/Elsa.Designer.Components.Web
npm install
npm run build

this will allow you to have a bundle of JS file that you will use in your angular app.

In the Assets folder of you angular App :

  • Copy the folder src/designer/elsa-workflows-studio/dist/elsa-workflow-studio to /assets/elsa-workflow-studio
  • Copy the folder src/designer/elsa-workflows-studio/node_modules/monaco-editor/min to /assets/Monaco-editor/min

Remove the content of the app.component.html file and replace with the following content :


<elsa-studio-root server-url="https://localhost:11000"
monaco-lib-path="/assets/monaco-editor/min">
<elsa-studio-dashboard></elsa-studio-dashboard>
</elsa-studio-root>

server-url is https://localhost:11000 because it’s the value of the endpoint exposed by Elsa.Samples.Server.Host.csproj project that allow us to have the API used by the Dashboard.

monaco-lib-path is the link to the path of the Monaco editor. If you install the Monaco-editor with npm package you will link to node_modules folder and not /assets/…

now we need to allow the use of custom element in our angular app. Indeed, you will have this error if you try to launch the app now :

‘elsa-studio-dashboard’ is not a known element:

1. If ‘elsa-studio-dashboard’ is an Angular component, then verify that it is part of this module.

2. If ‘elsa-studio-dashboard’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

So you have to add the following line to your app.module.ts :

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

and , schemas: [CUSTOM_ELEMENTS_SCHEMA ] in the @NgModule like this :

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],  schemas: [CUSTOM_ELEMENTS_SCHEMA ]
})

The last thing is to import all the desired files in the index.html header :

Add the following lines to your index.html file.

<link rel="icon" type="image/png" sizes="32x32" href="/assets/elsa-workflows-studio/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/elsa-workflows-studio/assets/images/favicon-16x16.png">
<link rel="stylesheet" href="/assets/elsa-workflows-studio/assets/fonts/inter/inter.css">
<link rel="stylesheet" href="/assets/elsa-workflows-studio/elsa-workflows-studio.css">
<script src="/assets/monaco-editor/min/vs/loader.js"></script>
<script type="module" src="/assets/elsa-workflows-studio/elsa-workflows-studio.esm.js"></script>

Start the Server Host and the Dashboard

Once everything is ok, If all the components of the angular App are ok, you will see the following screen:

Now, you’ll need to start the Elsa.Samples.Server.Host.csproj project to get the api available :

Microsoft.Hosting.Lifetime: Information: Now listening on: https://localhost:11000
Microsoft.Hosting.Lifetime: Information: Application started. Press Ctrl+C to shut down.
Microsoft.Hosting.Lifetime: Information: Hosting environment: Development

Once this is done, you can navigate to the Workflow definition

And then Create Workflow :

As you can see, everything is loading correctly, if you try the WriteLine Activity with a javascript Value. The editor show that monaco-editor is also well loaded.

Next you can look at the guide at the following link ASP.NET Core Server with Elsa Dashboard + Elsa Server API Endpoints · ELSA (elsa-workflows.github.io) to start your first workflow using the designer.

This entry was posted in Non classé and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s