Need help with bpmn-js-properties-panel?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bpmn-io
173 Stars 131 Forks MIT License 840 Commits 31 Opened issues

Description

A properties panel for bpmn-js.

Services available

!
?

Need anything else?

Contributors list

bpmn-js-properties-panel

CI

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

bpmn-js-properties-panel screenshot

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 = 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' } });

Dynamic Attach/Detach

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

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

// detach the panel propertiesPanel.detach();

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

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 = 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' }, // make camunda prefix known for import, editing and export moddleExtensions: { camunda: camundaModdleDescriptor } });

...

Additional Resources

Development

Running the tests

npm install

export TEST_BROWSERS=Chrome npm run all

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.