How to add a varying number of viewers on one page?

Users
1

Hey guys.

I want to use the BpmnViewer, but determine the number of viewers dynamically. Maybe it is none, maybe a couple of them. Afterwards I add overlays. The problem is now, that the overlays seem to be added for all my models on the same viewer.

Currently I use this function to create new viewers and remember the overlays:

  function createViewer(xml, pi, index) {
      var viewer = new BpmnViewer({container: '#js-drop-zone-' + index, width: '100%', height: '500px'});
      processViewers[pi.id] = {
        processInstance:  pi,
        viewer: viewer,
        overlays: viewer.get('overlays')
      }

      // show it in bpmn.io
      viewer.importXML(xml, function(err) {
        if (err) {
          console.log('error rendering', err);
        } else {
          // zoom to fit full viewport
          viewer.get('canvas').zoom('fit-viewport');
          loadData();
        }
      });
  }

And later

       var overlays = processViewers[processInstanceId].overlays;
        overlays.clear();

        overlays.add(activityId, {
          position: {top: 0, right: 0},
          show: {minZoom: 0, maxZoom: 100.0}, 
          html: '<div class="bpmn-badge">'+(sums[activityId])+'</div>'
        });

Any idea how I can achieve to add overlays on the proper viewers?

Thanks
Bernd

2

I don’t see anything wrong with your the stuff you are doing.

Could you paste a full HTML snippet that allows us to reproduce the issue?

3

Yesterday I changed the code to have multiple HTML pages for the various models - as I had to get it running for a demo in the evening :wink:

But I will do a working example and push it online the next days and come back to you. Good to know that it SHOULD work - so I can go ahead with that :slight_smile:

4

I created a quick example that verifies this.

5

Hi Nico.

Thanks! I found my error biw, I actually haven’t passed the overlay object correctly to another callback function - so it was my fault. Sorry for the false alarm!

Cheers and have a nice weekend
Bernd