Integration with Angular about elsa-designer HOT 12 CLOSED

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 🙇‍♂️

from elsa-designer.

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

from elsa-designer.

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

is the code on master branch deployed to npm?

from elsa-designer.

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 😃

from elsa-designer.

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"

from elsa-designer.

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 🙏

from elsa-designer.

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 😋

from elsa-designer.

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?

from elsa-designer.

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

from elsa-designer.

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

from elsa-designer.

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

from elsa-designer.

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

from elsa-designer.