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

Hi Nils,

you are right about the fact that we only support a subset of BPMN properties in the properties panel. We are not exactly sure about the value we are generating by supporting those. These are invisible properties (non-modeling related) and only a limited number of tools (modeling and execution) actually support them.

We are always happy to accept additions as pull requests. A good starting point is the BpmnPropertiesProvider where all our BPMN properties are added. If you want to add the above mentioned properties, you should do it here.

A simple example how to add entries to the properties panel is the documentation property. There you can see, that we are using the reusable entry factory TextArea to add an entry. We already have factories for labels, text inputs, select boxes, complex key value tables and more, which provide the functionality to create, update and delete properties. An entry basically contains at least a get and a set method (for all required functions look into the appropriate entry factory. If you need further documentation on that, let me know):

  • the entry.get method gets and returns the properties from the business object of the currently selected element so that they can be displayed in the panel.
  • the entry.set method gets the values from the input element (text field, checkbox, etc.) and sets it as properties to the business object using commands (to understand how this works in detail see handleChange and applyChanges).

The lifecycle if you enter text into a text field is:

  1. using set and update the business object of the element.
  2. using get to display the changes made to the business object.

I hope this is a good introduction in how you could start. If you want to contribute make sure to test your code. We have plenty examples how to do that in our test suite. If you have further questions, let us know, and we’ll answer them as comprehensible as possible.