Changing Task to UserTask (via dependency injection)

Developers
1

Hi all,

I’m trying to find the code to change the type of a shape. I figured out that I need to replace the original shape:

var newElementData =  {
    type: 'bpmn:UserTask'
};
var newElement = bpmnReplace.replaceElement(oldElement, newElementData);

It’s clear that I get the error “bpmnReplace is not defined” - but how and where do I get access to it?!

Thanks for any help!
Sebastian

Answer

This question got solved in this thread.

2

bpmn-js uses this project for dependency injection, i. e. you can provide modules to the modeler on start up via modelerOptions.additionalModules. Those modules can serve as dependecy and have other dependencies injected.

You could wrap a class in a module by having an index.js to a node module that says:

module.exports = {
  __init__: [ 'replacer' ],
  replacer: [ 'type', require('./Replacer.js') ]
};

Whilst Replacer.js could look like:

function Replacer(bpmnReplace) {
  this.bpmnReplace = bpmnReplace;
};

Replacer.$inject = [ 'bpmnReplace' ];

module.exports = Replacer;

Replacer.prototype.doReplace = function(/* ... */) {
  /* your code from above using this.bpmnReplace */
};

There are other methods to inject dependencies, just look at the repository I linked.

EDIT: If you’re not sure how the dependencies you want to inject are named, you can always try out modeler.get(dependencyName) or browse the source-code for dependency-definitions as I provided an example one above.

3

Thanks for the reply! Very much appreciated.

Never created an own node module myself, so I’m reaching my limits right now… Will try to fight through this :-).

However, is there no easier way to just change the type of a shape?

4

No worries! I don’t really know how to change the type of the shape… I justed spotted this error which I was able to solve :wink:

To create a node module is very, very simple. In short: A node module is something you can require. Any file is a node module. Any folder that contains an index.js is a node module.
If you attempt to require a module either the file or the folder’s index.js is loaded. require then returns the content of module.exports. So what you assign to module.exports will be stored in the variable: var v = require('...').

bpmn-io uses this all over the place. All their repository are built with node so you can see plenty examples there.

And you can find the documentation regarding node modules here.

EDIT: Note that your browser is not capable of attempting to load files by require this is why you need to bundle all your sources together, first. You can achieve this with browserify which - again - is used all over the place by bpmn-io.

5

OK, thanks - that was the best Node module tutorial I have found so far :slight_smile:.

I will create another thread for the main question - is there any other option than a new module.

Thanks again!

6

@felixlinker Thanks for helping out! :heart:

@Sebastian In order to extend the library to suite your needs you’d probably need to look into NodeJS sooner or later. I suggest you to have a deeper look at our examples.

If you want to get to know a few more details about how our library works, try this example I’ve created recently. It is an interesting one, as it shows how to program against our Copy/Paste APIs and because it provides hints on how to debug the application, too.

If there is anything missing that may help you to dive into bpmn-js, we’re here to help!