How can I use bpmn.io (bpmn-js) in my cockpit plugin?

[pengu...@gmail.com]

Hello,

I'd like to use the overlay functionality of bpmn-js in my cockpit plugin.
Obviously, bpmn.io is already used in the Camunda cockpit plugin 7.3.
To which name is the module mapped?
I have already tried "require('bpmn-js')" but this does not find any module.
I am sure that there exist a module for bpmn-js in the cockpit-plugin-ui, because it is used to model the BPMN processes.

Thanks for any help!

Best regards,
Kerstin Günther

[Sebastian Stamm]

Hi Kerstin,

in Cockpit, bpmn-js is integrated via an angular widget which is defined in camunda-commons [1]. It provides some convenience functions to create the overlay badges which are used for the process instance and incidents overlays, but you can also access the bpmn-js viewer object, too. An example how this widget is used can be found in the cockpit source code [2, 3].

If you just want to add overlays to the diagram, check out the diagram.overlay extension point [4]. The template you provide there will be used to create an overlay for every bpmn element in the diagram and you can use the bpmnElement property of the scope object to access it. You can check out the included statistics overlay plugin to see an example [5].

Cheers

Sebastian

[1]: https://github.com/camunda/camunda-commons-ui/tree/master/lib/widgets/bpmn-viewer

[2]: https://github.com/camunda/camunda-cockpit-ui/blob/master/client/scripts/directives/processDiagram.html

[3]: https://github.com/camunda/camunda-cockpit-ui/blob/master/client/scripts/directives/processDiagram.js

[4]: http://docs.camunda.org/7.3/guides/user-guide/#cockpit-plugins-plugin-points

[5]: https://github.com/camunda/camunda-bpm-webapp/blob/master/webapp/src/main/resources-plugin/base/app/views/processInstance/activityInstanceStatisticsOverlay.js