How to create new BPMNModeler instace always

Developers
1

Hi all,

I am using this code below for opening bpmn file, but when opening more than one, it always merge in same container, What is the best way to always open as new file and not merging content of diagrams ?

_BpmnModeler = new BpmnModeler({
container: ‘#js-canvas’,
linting: {
bpmnlint: designBpmnLintConfig,
}
});
this.callbackObj.getBpmnFileContent().then(function (bpmnContent) {
self._initializeBpmnModeler(bpmnContent);
});

Thnx.

2

Hey,

Could you please format your code?

Have you tried open API: https://github.com/bpmn-io/bpmn-js-callbacks-to-promises#open

3

/**
* Constructor.
* @param {object} callbackObjectParam Callback object instance
*/
constructor(callbackObjectParam)
{
var self = this;

   this.callbackObj = callbackObjectParam;
  
  this._BpmnModeler = new BpmnModeler(
    {
      container: '#js-canvas',
      linting: {
        bpmnlint: designBpmnLintConfig,
      }
    });

  this.callbackObj.getBpmnFileContent().then(function(bpmnContent) 
                                             {
    self._initializeBpmnModeler(bpmnContent);
  });

}

I am using import {BpmnModeler} from ‘st-bpmn-js’;

4

As you’re using the same container constructing the bpmn-js instance, it should clear the existing diagram when you import a new one.

You can however use another instance of BpmnJS with another container DOM object.

In this Sandbox I’m importing 2 different XMLs into 2 different containers: https://codesandbox.io/s/quizzical-waterfall-njkp0?file=/src/index.js

5

Thnx, but I am invoking from C# and using callbackobjectparameter, that is where it fails I think, otherwise in constructor, as you said it should clear the content when I import the new one, but it does not actually. Your solution does not make sens in my case as I will call it more than once that code snippet, not just for one case and should be the same container, not two distinct.

6

What do you mean by it does not clear the content? Could you share a Sandbox so that we can further help you and understand what you’re trying to achieve please: https://codesandbox.io/s/bpmn-js-sandbox-3zkw0