Integrating bpmn-js-properties-panel with bpmn-js-modeler


I’m not very familiar with node and grunt. I managed installing the modeler via the description here: , the modeler works. But I do not know precisely how to follow the instruction here I did
npm install --save bpmn-js-properties-panel
npm install --save camunda-bpmn-moddle
But now I should
“Now extend the bpmn-js modeler with two properties panel related modules, the panel itself and a provider module that controls which properties are visible for each element. Additionally you must pass an element via propertiesPanel.parent into which the properties panel will be rendered.” and a piece of js follows. Do I have to edit a file in the modeler folder? Which one, index.js?
Then I should build:
npm install
Do I have to execute these commands from the properties-panel folder or from the modeler folder? Anything else?

Thanks, Stefan.

You are in the same boat as me.
The code is already part of the referenced
files. No need to add them again.

Thank you Sudharsan. Anyone on how to get the panel visible (and working) in the modeler?

Just did a new build (npm install and grunt after that from folder bpmn-js-examples\modeler\app) after modification of some files and moving a couple. I can see the properties panel now. Maybe this helps others.

I modified bpmn-js-examples\modeler\app\index.js before the build to:

'use strict';

var fs = require('fs');

var $ = require('jquery'),
    BpmnModeler = require('bpmn-js/lib/Modeler');

var container = $('#js-drop-zone');

var canvas = $('#js-canvas');

var propertiesPanelModule = require('bpmn-js-properties-panel'),
    // providing camunda executable properties, too
    propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/camunda'),
    camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');

var bpmnModeler = new BpmnModeler({
  container: canvas,
  propertiesPanel: {
    parent: '#js-properties-panel'
  additionalModules: [
  // needed if you'd like to maintain camunda:XXX properties in the properties panel
  moddleExtensions: {
    camunda: camundaModdleDescriptor

var newDiagramXML = fs.readFileSync(__dirname + '/../resources/newDiagram.bpmn', 'utf-8');

function createNewDiagram() {

function openDiagram(xml) {

  bpmnModeler.importXML(xml, function(err) {

    if (err) {

      container.find('.error pre').text(err.message);

    } else {


function saveSVG(done) {

function saveDiagram(done) {

  bpmnModeler.saveXML({ format: true }, function(err, xml) {
    done(err, xml);

function registerFileDrop(container, callback) {

  function handleFileSelect(e) {

    var files = e.dataTransfer.files;

    var file = files[0];

    var reader = new FileReader();

    reader.onload = function(e) {

      var xml =;



  function handleDragOver(e) {

    e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

  container.get(0).addEventListener('dragover', handleDragOver, false);
  container.get(0).addEventListener('drop', handleFileSelect, false);

////// file drag / drop ///////////////////////

// check file api availability
if (!window.FileList || !window.FileReader) {
    'Looks like you use an older browser that does not support drag and drop. ' +
    'Try using Chrome, Firefox or the Internet Explorer > 10.');
} else {
  registerFileDrop(container, openDiagram);

// bootstrap diagram functions

$(document).on('ready', function() {

  $('#js-create-diagram').click(function(e) {


  var downloadLink = $('#js-download-diagram');
  var downloadSvgLink = $('#js-download-svg');

  $('.buttons a').click(function(e) {
    if (!$(this).is('.active')) {

  function setEncoded(link, name, data) {
    var encodedData = encodeURIComponent(data);

    if (data) {
        'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
        'download': name
    } else {

  var _ = require('lodash');

  var exportArtifacts = _.debounce(function() {

    saveSVG(function(err, svg) {
      setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);

    saveDiagram(function(err, xml) {
      setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
  }, 500);

  bpmnModeler.on('commandStack.changed', exportArtifacts);

I removed “builtins: false,” from C:\bpmn-js-examples\modeler\grunt.js bcause I got
“Error: Cannot find module ‘events’” (Using properties panel pre-packaged with bpmn-js)
when I move the index.js from the dist folder to app, navigate to index.html and press link “create a new diagram”.

In the .html I added div id=“js-properties-panel”></div
div class=“canvas” id=“js-canvas”></div
(opening < and closing > left out)
I copied C:\bpmn-js-examples\modeler\dist\vendor to C:\bpmn-js-examples\modeler\app so the
href=“vendor/bpmn-font/css/bpmn-embedded.css” can be found.
I moved the css files in bpmn-js-examples\properties-panel\dist\css (after a build from folder bpmn-js-examples\properties-panel\app) to bpmn-js-examples\modeler\app\css

Thanks for your running example.

You can always checkout the source code accompanied with the examples we provide, too. Most are runnable end-to-end. Regarding your initial question (where to add the properties panel modules) checkout app/index.js#L16.

I added a comment in the properties panel example, too to make that part more obvious.

1 Like