Activiti bpmn-js-properties-panel
A properties panel extension for bpmn-js that adds the ability to edit technical properties (generic and Activiti).
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 Activiti 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 Activiti properties
In order to be able to edit Activiti related properties, use the activiti properties provider.
In addition, you need to define the activiti
namespace via activiti-bpmn-moddle.
var BpmnJS = propertiesPanelModule = // use Activiti properties provider propertiesProviderModule = ; // a descriptor that defines Activiti related BPMN 2.0 XML extensionsvar activitiModdleDescriptor = ; var bpmnJS = additionalModules: propertiesPanelModule propertiesProviderModule container: '#canvas' propertiesPanel: parent: '#properties' // make activiti prefix known for import, editing and export moddleExtensions: activiti: activitiModdleDescriptor ; ...
Additional Resources
Development
Running the tests
npm install export TEST_BROWSERS=Chromenpm run all
License
MIT