$inject BpmnJS instance (Viewer) into component

Developers
1

Hi,

I am currenty using the bpmn io framework for a research project at work, which I am currently in the process of creating an additional module for. This additional module needs access to a function that exists currently in the viewer module, ImportXML.

What I would like is as follows:

index.js:

var bpmnModeler = new BpmnModeler({
    container: canvas,
    additionalModules: [
	myModule
    ]
});

MyModule.js:

function MyModule(eventBus, modeling, commandStack, canvas, viewer) {
	this._eventBus = eventBus;
	this._modeling = modeling;
	this._commandStack = commandStack;
	this._canvas = canvas;
	this._viewer = viewer;
}

module.exports = MyModule;

MyModule.$inject = [
	'eventBus',
	'modeling',
	'commandStack',
	'canvas',
	'viewer', // This is ideally what I thought I would need to do...
];

MyModule.prototype._importXML = function(xml) {
	this._viewer.importXML(xml);
}

Any help in where I am going wrong is much appreciated.

Thanks

2

The BpmnJS instance (viewer, modeler or whatever) is available via the bpmnjs name to other modules.

So you could do something like this:

function MyService(bpmnjs) {
   
  this.export = function() {
    bpmnjs.saveXML(...);
  };
}

Reimport diagrams from within a service via Viewer#importXML is something we do not support right now though.

3

Ah OK it was the name I was getting wrong.

My service module is loading a BPMN diagram from a database so I wanted to use the bpmnjs.importXML function.

Anyway it seems to be working fine now I am injecting bpmnjs.

Thanks very much

1 Like