Integration with Angular

[RingoKam]

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

[RingoKam]

hmm interesting, i pulled the source code and ran the stencil build and was able to get it working locally. Most likely the version on npm is not the same as github?

I can also do a simple PR to update the on doc on how to integrate with Angular

thank you 🙇‍♂️

[sfmskywalker]

If you manage to integrate it with Angular then that would be fantastic. Thanks!

[RingoKam]

I think people are having issues integrating with the version on npm?

is the code on master branch deployed to npm?

[lildinosaur]

Hey ,

I think I'll just reply on this issue rather than created another.
I'm having trouble setting up the designer with Angular too , I managed to run the designer on standalone mode I think , it displays workflow and activities etc.

But I'm trying to use it with a backend and I haven't been able to passed json to the designer.
here my attempt : https://codesandbox.io/s/workflow-designer-mn9uf?file=/src/app/app.component.html

I ran into a JSON.parse error in the console.

I'm using the 0.0.61 version from unpkg , any exemples using the latest 2.0.0-preview-5 version ?

Thank you , I appreciate any help 😃

[lildinosaur]

Okay I update my exemple and now it seems to work 😄
You can look into my source code , but the main edit was the attribute definition :
[attr.data-activity-definitions]="activityDefinition"

[RingoKam]

hey glad you have it working!

I was only able to get it working by running it from source, seems like there are some issue with the npm version? Anwway, I think we should add your solution in the doc so people can have something to reference to.

I removed the stencil bootstrap logic in main.ts and formbuilder.js reference in index.html.

https://codesandbox.io/s/angular-elsa-designer-dkb4t?fontsize=14&hidenavigation=1&theme=dark

off topic: @ethermine are you trying to integrate a form builder? I am looking to do the same thing with angular formly 😁

Thank you for sharing your solution 🙏

[lildinosaur]

Thaks for the cleanup 🙏 I updated my code with your version 😉

I managed to get it working with the npm version but only using the 0.0.61 version , the latest version use graphql for getting the datas

Yes it will be a great addition to have some examples in the documentation !

off topic : And yeah I'm trying to use a form builder into my main application also linked with the workflow (Invoke form activity , submit form and triggerd a workflow with the output of the form ..)
I've been using Form builder has an angular version, and I'm looking if I can use form.io 😋

[RingoKam]

hmm where did you reference the npm package in code? I see it as a dependency but not sure where you are referencing it in the code? Aren't you getting the designer from unpkg?

[lildinosaur]

Oh right sorry , in my local versoin I reference in package.json : "@elsa-workflows/elsa-workflow-designer": "0.0.61",
And the I have been using the js from the node_modules , I haven't update the codesandbox with this one.
In angular.json : "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "./node_modules/@elsa-workflows/elsa-workflow-designer", "output": "./assets/elsa-workflow-designer" } ],
And in index.html : <script type="module" src="./assets/elsa-workflow-designer/dist/elsa-workflow-designer/elsa-workflow-designer.esm.js" ></script> <script nomodule="" src="./assets/elsa-workflow-designer/dist/elsa-workflow-designer/elsa-workflow-designer.js" ></script>

But I relly don't know if this is the way to do it , I'm pretty new to angular

[RingoKam]

oh no worries, your solution looks good 👍

you included the npm package file in angular.json config file and put them in assets folder. Now we can reference it in index.html

[RingoKam]

Updated the codesandbox example, most user probably want to know how to get the edited workflow model json.

https://codesandbox.io/s/angular-elsa-designer-dkb4t?file=/src/app/app.component.html

added PR #21

[sfmskywalker]

Great stuff guys! @RingoKam thank you for the PR.