How to integrate token-simulation of bpmn-js with angular 10 application

Developers Modeler
1

Screenshot (190)
Screenshot (190)1920×1080 121 KB

i want to import token-simulation module into my angular application.
can I get some sample code of how to integrate token-simulation of bpmn-js into angular application.
Along with this I want to use bpmn-js viewer in my angular application instead of modeler.

2

I suggest you try adding the token simulation to bpmn-js without Angular first.

3

can you explain it clearly. i have added token-simulation plugin in camunda modeler.
so can’t I include token-simulation npm in angular??.
if possible provide some sample code.

4

You can use the token simulation outside of the Camunda Modeler: https://github.com/bpmn-io/bpmn-js-token-simulation

5

https://github.com/bpmn-io/bpmn-js-token-simulation this is node application.
this application implementation is different from angular application.
I just want to know what to bind in the html file to get the token simulator toggle button in my webpage.

ngOnInit(): void {
this.modeler = new Modeler({
container: ‘#canvas’,
additionalModules: [
tokenSimulation
],
keyboard: {
bindTo: document
}
});
this.load();
}

6

I am able to integrate token-simulation into my application.

Thank you

7

Glad to hear! Mind you sharing your solution so others can benefit from it in the future?

8

bpmn-js-token-simulation, bpmn-js-properties-panel, bpmn-js and diagram-js npm packages should be installed.

stylesheets required for tokensimulation and properties-panel should be included in styles:[] of angular.json file.

typescript code:

ngOnInit(): void {
    this.modeler = new Modeler({
      container: '#canvas',
      width: '100%',
      height: '600px',
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        tokenSimulation,
        propertiesPanelModule,
        propertiesProviderModule,
      ]
    });
    this.load();
  }

html code:

<div class="modeler"
    <div id="canvas"></div
    <div class="properties-panel" id="properties"</div 
</div>
1 Like