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 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:
Bootstrap bpmn-js with the properties panel and a properties provider:
var BpmnJS = propertiesPanelModule = propertiesProviderModule = ; var bpmnJS = additionalModules: propertiesPanelModule propertiesProviderModule container: '#canvas' propertiesPanel: parent: '#properties' ;
Dynamic Attach/Detach
You may attach or detach the properties panel dynamically to any element on the page, too:
var propertiesPanel = bpmnJS; // detach the panelpropertiesPanel; // attach it to some other elementpropertiesPanel;
Use with Camunda properties
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.
var BpmnJS = propertiesPanelModule = // use Camunda properties provider propertiesProviderModule = ; // a descriptor that defines Camunda related BPMN 2.0 XML extensionsvar camundaModdleDescriptor = ; var bpmnJS = additionalModules: propertiesPanelModule propertiesProviderModule container: '#canvas' propertiesPanel: parent: '#properties' // make camunda prefix known for import, editing and export moddleExtensions: camunda: camundaModdleDescriptor ; ...
Additional Resources
Development
Running the tests
npm install export TEST_BROWSERS=Chromenpm run all
License
MIT