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

Misc
1

Hi,

I’m not very familiar with node and grunt. I managed installing the modeler via the description here: https://bpmn.io/walkthrough/ , the modeler works. But I do not know precisely how to follow the instruction here https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel. 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
grunt
Do I have to execute these commands from the properties-panel folder or from the modeler folder? Anything else?

Thanks, Stefan.

2

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

3

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

4

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: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  // 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() {
  openDiagram(newDiagramXML);
}

function openDiagram(xml) {

  bpmnModeler.importXML(xml, function(err) {

    if (err) {
      container
        .removeClass('with-diagram')
        .addClass('with-error');

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

      console.error(err);
    } else {
      container
        .removeClass('with-error')
        .addClass('with-diagram');
    }


  });
}

function saveSVG(done) {
  bpmnModeler.saveSVG(done);
}

function saveDiagram(done) {

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

function registerFileDrop(container, callback) {

  function handleFileSelect(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;

    var file = files[0];

    var reader = new FileReader();

    reader.onload = function(e) {

      var xml = e.target.result;

      callback(xml);
    };

    reader.readAsText(file);
  }

  function handleDragOver(e) {
    e.stopPropagation();
    e.preventDefault();

    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) {
  window.alert(
    '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) {
    e.stopPropagation();
    e.preventDefault();

    createNewDiagram();
  });

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

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

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

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

  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
below
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

5

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