Elsa 2 Dashboard - API enhancement on Designer WebComponent(s) to facilitate integration as a third party tools

[jdevillard]

As a developper, I would like to integrate the designer and other part of the Web Components inside my application.

A discussion around Embedding designer already exist #800 but this issue is more to provide and think about what api/properties could be useful to expose for allowing interaction with outside (React/Angular/Blazor, etc..)

Here is the props I see for the beginning about ElsaWorkflowDefinitionEditorScreen Component :

• [ ] Expose the WorkflowDefinition or at least Workflow high level props (like name, description , variables, customprops... without Activities and Connections)
• [ ] Expose the API to manipulate specifics props --> maybe it could be better to allow to GET/SET variables for example without exposing all the WorkflowDefinition
• [x] Be able to handle with a middleware or something like that the HTTP Call --> the idea here could be to call an external api to get some info before saving/after load to fill custom data into the WorkflowDefinition) , maybe this could already be done by changing the serverUrl and use some sort of proxy by we're not working on the FrontEnd with this kind of solution)

feel free to add some ideas to help on usecase possibility and allow dev to prioritize this as best

[innuendonh]

Hello, did you experiment with embedding the components in a web app? I am trying really hard to embed the designer in an angular app, by generating angular wrappers using stenciljs (https://stenciljs.com/docs/angular) but things are getting very complicated. Any suggestion would be great about this. Thank you!

[jdevillard]

This question comes up many time, so I've just publish a sample here :

https://github.com/jdevillard/ElsaWorkflowDashboard-Angular

and I think we'll try to add the wrapper in the packaging to get the integration easier.

[innuendonh]

Thank you @jdevillard ! I tried to follow your example and it worked! (I already followed a similar path, but i was missing several details).

What I found is:

• (regarding your comment in the README) you need to install explicitly @stencil/router, because it is not included in the dependencies (i forced the @1.0.1 version since it is the one reported in the elsa package.json)
• (don't know if it is common knowledge or not) to integrate in an angular project and the bind the webcomponents attributes to the Angular component properties, you need to specify the attributes using the [attr.name] syntax, es. <elsa-studio-root [attr.server-url]="serverUrl" monaco-lib-path="assets/monaco">