Extending the properties panel changed significantly with bpmn-js-properties-panel>=1. For the 0.x version of the library, check out the 0.x branch. Read more on the changes in the changelog.

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:

1<div class="modeler">
2  <div id="canvas"></div>
3  <div id="properties"></div>
4</div>

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

1import BpmnModeler from 'bpmn-js/lib/Modeler';
2import {
3  BpmnPropertiesPanelModule,
4  BpmnPropertiesProviderModule,
5} from 'bpmn-js-properties-panel';
6
7const modeler = new BpmnModeler({
8  container: '#canvas',
9  propertiesPanel: {
10    parent: '#properties'
11  },
12  additionalModules: [
13    BpmnPropertiesPanelModule,
14    BpmnPropertiesProviderModule
15  ]
16});

Styling

For proper styling include the necessary stylesheets:

1<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/properties-panel/dist/assets/properties-panel.css">

Dynamic Attach/Detach

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

1const propertiesPanel = bpmnJS.get('propertiesPanel');
2
3// detach the panel
4propertiesPanel.detach();
5
6// attach it to some other element
7propertiesPanel.attachTo('#other-properties');

Edit Camunda Properties

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.

1import BpmnModeler from 'bpmn-js/lib/Modeler';
2import {
3  BpmnPropertiesPanelModule,
4  BpmnPropertiesProviderModule,
5  ZeebePropertiesProviderModule // Camunda 8 provider
6} from 'bpmn-js-properties-panel';
7
8// Camunda 8 moddle extension
9import zeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe';
10
11// Camunda 8 behaviors
12import ZeebeBehaviorsModule from 'camunda-bpmn-js-behaviors/lib/camunda-cloud';
13
14const modeler = new BpmnModeler({
15  container: '#canvas',
16  propertiesPanel: {
17    parent: '#properties'
18  },
19  additionalModules: [
20    BpmnPropertiesPanelModule,
21    BpmnPropertiesProviderModule,
22    ZeebePropertiesProviderModule,
23    ZeebeBehaviorsModule
24  ],
25  moddleExtensions: {
26    zeebe: zeebeModdle
27  }
28});

API

BpmnPropertiesPanelRenderer#attachTo(container: HTMLElement) => void

Attach the properties panel to a parent node.

1const propertiesPanel = modeler.get('propertiesPanel');
2
3propertiesPanel.attachTo('#other-properties');

BpmnPropertiesPanelRenderer#detach() => void

Detach the properties panel from its parent node.

1const propertiesPanel = modeler.get('propertiesPanel');
2
3propertiesPanel.detach();

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

Register a new properties provider to the properties panel.

1class ExamplePropertiesProvider {
2  constructor(propertiesPanel) {
3    propertiesPanel.registerProvider(500, this);
4  }
5
6  getGroups(element) {
7    return (groups) => {
8
9      // add, modify or remove groups
10      // ...
11
12      return groups;
13    };
14  }
15}
16
17ExamplePropertiesProvider.$inject = [ 'propertiesPanel' ];

Additional Resources

• Issue tracker
• Forum
• Example Project

Development

Prepare the project by installing all dependencies:

1npm install

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

1# build the library and run all tests
2npm run all
3
4# spin up a single local modeler instance
5npm start
6
7# run the full development setup
8npm run dev

License

MIT