bpmn-js-properties-panel


A properties panel extension for bpmn-js that adds the ability to edit technical properties (generic and Camunda).


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 7 and Camunda 8 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
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel';

const modeler = new BpmnModeler({
container: '#canvas',
propertiesPanel: {
parent: '#properties'
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule
]
});
`

$3

For proper styling include the necessary stylesheets:

`html

`




$3

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

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

// detach the panel
propertiesPanel.detach();

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




$3

To edit Camunda properties, you have to use a moddle extension so bpmn-js is can read and write Camunda properties and use a provider so these properties are shown in the properties panel.

For example, to edit Camunda 8 properties, use the Camunda 8 moddle extension and the Camunda 8 provider. Additionally, you should use behaviors specific to Camunda 8 to ensure parts of the model that are specific to Camunda 8 are maintained correctly.

`javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
ZeebePropertiesProviderModule // Camunda 8 provider
} from 'bpmn-js-properties-panel';

// Camunda 8 moddle extension
import zeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe';

// Camunda 8 behaviors
import ZeebeBehaviorsModule from 'camunda-bpmn-js-behaviors/lib/camunda-cloud';

const modeler = new BpmnModeler({
container: '#canvas',
propertiesPanel: {
parent: '#properties'
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
ZeebePropertiesProviderModule,
ZeebeBehaviorsModule
],
moddleExtensions: {
zeebe: zeebeModdle
}
});
`

$3

#### BpmnPropertiesPanelRenderer#attachTo(container: HTMLElement) => void

Attach the properties panel to a parent node.

`javascript
const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.attachTo('#other-properties');
`

#### BpmnPropertiesPanelRenderer#detach() => void

Detach the properties panel from its parent node.

`javascript
const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.detach();
`

#### BpmnPropertiesPanelRenderer#registerProvider(priority: Number, provider: PropertiesProvider) => void

Register a new properties provider to the properties panel.

`javascript
class ExamplePropertiesProvider {
constructor(propertiesPanel) {
propertiesPanel.registerProvider(500, this);
}

getGroups(element) {
return (groups) => {

// add, modify or remove groups
// ...

return groups;
};
}
}

ExamplePropertiesProvider.$inject = [ 'propertiesPanel' ];
`

Additional Resources

* Issue tracker
* Forum
* Example Project




Development

Prepare the project by installing all dependencies:

`sh
npm install
`

Then, depending on your use-case, you may run any of the following commands:

`sh


build the library and run all tests

npm run all

spin up a single local modeler instance

npm start

run the full development setup

npm run dev
``

License

MIT