Sample bpmn-viewer without AngularJS, npm, etc.

[izak.w...@gmail.com]

Hi,

I am currently developing a web application based on a Java stack (Spring MVC, Thymeleaf, etc.) and have a requirement to display the executing processes within the application.

Having read through the documentation and checking out a number of example projects there seems to be very little that describes how one would incorporate the bpmn-view without the usage of AngularJS, npm, etc.

For example, the documentation states all you have to do is to include the following:

<div cam-widget-bpmn-viewer
diagram-data='diagramXML'
disable-navigation='true'
style="height: 400px;">

</div>

Whilst that may very well be self explanatory for some developers, it really doesn't give any clear indication as to how would use it in another technology stack such as Java.

Would I would like to know is the following:

1. What are the js libraries that I need to import into my page?

So far I have:

- jquery
- jquery.mousewheel.js
- lodash.js
- sax.js
- snap.svg.js
- bpmn-viewer.js

Which other ones do I need?

2. What would my HTML markup look like?

Would it be enough to simply say:

<div id="canvas"></div>

and then in my custom js have something like:

var BpmnViewer = require('bpmn-js');

var viewer = new BpmnViewer({ container: '#canvas' });

viewer.importXML(myDiagram, function(err) {

if (!err) {
console.log('success!');
viewer.get('canvas').zoom('fit-viewport');
} else {
console.log('something went wrong:', err);
}
});

3. Anything else that I may be missing?

Regards

[izak.w...@gmail.com]

Ok, so I have started to incorporate bower into the application, following the advice that I found on this page: https://github.com/bpmn-io/bpmn-js-examples/tree/master/simple-bower

However, when I run the bower install --save bpmn-js command, only the bpmn-js lib gets downloaded. No sign of the other dependencies, any idea why they are not there and what I need to do to get them added?

Thanks!