bpmn-js-properties-panel


This is properties panel extension for bpmn-js.


Features

The properties panel allows users to edit invisible BPMN properties in a convenient way.

Some of the features are:

* Edit element ids, multi-instance details and more
* Edit execution related Camunda properties
* Redo and undo (plugs into the bpmn-js editing cycle)

Usage

Provide two HTML elements, one for the properties panel and one for the BPMN diagram:

``html

`

Bootstrap bpmn-js with the properties panel and a properties provider:

`javascript
var BpmnJS = require('bpmn-js/lib/Modeler'),
propertiesPanelModule = require('bpmn-js-properties-panel'),
propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/bpmn');

var bpmnJS = new BpmnJS({
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
container: '#canvas',
propertiesPanel: {
parent: '#properties',
candidateGroups: [{name: "Group 1", value: "1"},{name: "Group 2", value: "2"}],
assignees: [{name: "", value: ""},{name: "Assignee 1", value: "1"},{name: "Assignee 2", value: "2"}]
}
});
`

$3

You may attach or detach the properties panel dynamically to any element on the page, too:

`javascript
var propertiesPanel = bpmnJS.get('propertiesPanel');

// detach the panel
propertiesPanel.detach();

// attach it to some other element
propertiesPanel.attachTo('#other-properties');
`

$3

In order to be able to edit Camunda related properties, use the camunda properties provider.
In addition, you need to define the camunda namespace via camunda-bpmn-moddle.

`javascript
var BpmnJS = require('bpmn-js/lib/Modeler'),
propertiesPanelModule = require('bpmn-js-properties-panel'),
// use Camunda properties provider
propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/camunda');

// a descriptor that defines Camunda related BPMN 2.0 XML extensions
var camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');

var bpmnJS = new BpmnJS({
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
container: '#canvas',
propertiesPanel: {
parent: '#properties',
candidateGroups: [{name: "Group 1", value: "1"},{name: "Group 2", value: "2"}],
assignees: [{name: "", value: ""},{name: "Assignee 1", value: "1"},{name: "Assignee 2", value: "2"}]
},
// make camunda prefix known for import, editing and export
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});

...
`

Additional Resources

* Issue tracker
* Forum
* Example Project

Development

$3

`bash
npm install

if required: npm install -g grunt-cli

export TEST_BROWSERS=Chrome
grunt test
``

License

MIT