Can I use bpmn.js to parse an bpmn file for its tasks?

[Teguard]

Hi , I'd like to use bpmn.js to show a uploaded bpmn and show the Tasks included in said bpmn in a List to offer webServices for each Task.

So the question is, can I use your toolkit to find the Tasks of a imported bpmn?
And if yes, how would I do that?

Thanks in advance =)

[davcs86]

Hi @Teguard,

You can use the ElementRegistry's forEach method, e.g.

var BpmnViewer = require('bpmn-js'); // or window.BpmnJS;

var xml; // my BPMN 2.0 xml
var viewer = new BpmnViewer({ container: 'body' });

viewer.importXML(xml, function(err) {

  if (err) {
    console.log('error rendering', err);
  } else {
    console.log('rendered');
    // <<====== ***** HERE *****
    var elementRegistry = viewer.get('elementRegistry');
    elementRegistry.forEach(function(elem, gfx) {
      if (elem.businessObject.$instanceOf('bpmn:Task')){
        // do something with the task
      }
    });
  }
});

[Teguard]

Thanks for the quick answer.
Two questions though, where does "require" come from. Getting an "cannot be resolved" from that.
I think its node-js ? If it is, can I use bpmn.js with Spring?
And would I be able to find Task Types?
For example:
<task name="Get Customer Data from Database"> ?

Thanks in advance =)

[davcs86]

if you're using the pre-packaged version, just replace:

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

with,

var BpmnViewer = window.BpmnJS;

[davcs86]

And yes, you'll be able to find the task type with the businessObject,

// <<====== ***** HERE *****
var elementRegistry = viewer.get('elementRegistry');
elementRegistry.forEach(function(elem, gfx) {
  if (elem.businessObject.$instanceOf('bpmn:Task')){
    // do something with the task
    var taskType = elem.businessObject.$type;

    // and access to properties declared in the descriptor with
    var taskId = elem.businessObject.get('id');

    // and to properties not declared in the descriptor with
    var taskAttrs = elem.businessObject.$attrs;
  }
});

[Teguard]

Hi, I've run into a problem with embedding the Viewer.
Its showing my bpmn alright, But only the very top, everything lower is being cut off and I have no Idea why.

Could you help me with that?

Edit:

Fixed it by defining 'style="height: 500px" ' directly in the div where I defined the canvas.
-> <div id="canvas" style="height: 500px"></div>