Embed and customize bpmn-js

Hi,
I will definitely use bpmn-js as I need to embed bpmn2 modelling inside my application.
Currently I am not using NodeJS, I started using pre-packaged bpmn-js. Meanwhile, after deploying alpha version I need to perform a few customizations in bpmn-js.
Some of these customizations are:
Customize the palette, removing a couple of elements;
1 2

Remove some context-pad options
image
image
image

Move some element type definitions from the context-pad to the palette (example: remove the call activity option from context-pad and add the element bpmn:CallActivity directly in the palette
image

Render different colours
image

And last, but not the least I would like to save all elements in the DB in a way where when an element is added or removed from the the diagram it is automatically created (or removed) in the DB.
In the ideal world I would like to have a “properties” pane linked to application functionality
image

What I would like, please, is your advice about whether I should start using nodeJS to achieve this kind of customizations or, the other way around, they are doable with pre-packaged version.

Many thanks in advance

Have a look at this example: https://github.com/bpmn-io/bpmn-js-example-custom-controls

You can achieve all these things using the pre-packaged version of the library.

The extension mechanism is the same, regardless of whether you use the pre-packaged version or a full development setup. In both cases you’ll add additional modules to the editor, thus extending it without touching the actual source files.

A proper development setup (with NodeJS) will allow you to build your extensions in a modular fashion and bundle them along with the BPMN editor.

We generally assume a proper development setup for the examples we create. Cf. Philipp’s pointer to our extension example.

Hi @nikku and @philippfromme ,

Many thanks to you both!

Now I know that I have both options, probably I will go with the option of setup a proper development setup, it seams to me a better long-term option…

Many tx again

1 Like