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.
Jérémie - an other BizTalker 