cmmn-js-properties-panel


This is properties panel extension for cmmn-js.

Features

The properties panel allows users to edit invisible CMMN properties in a convenient way.

Usage

Provide two HTML elements, one for the properties panel and one for the CMMN diagram:

``html



`

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

`javascript
var CmmnJS = require('cmmn-js/lib/Modeler'),
propertiesPanelModule = require('cmmn-js-properties-panel'),
propertiesProviderModule = require('cmmn-js-properties-panel/lib/provider/cmmn');

var cmmnJS = new CmmnJS({
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
container: '#canvas',
propertiesPanel: {
parent: '#properties'
}
});
`




$3

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

`javascript
var propertiesPanel = cmmnJS.get('propertiesPanel');

// detach the panel
propertiesPanel.detach();

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




$3

In order to be able to edit Flowable related properties, use the flowable properties provider.
In addition, you need to define the flowable namespace via flowable-cmmn-moddle.

`javascript
var CmmnJS = require('cmmn-js/lib/Modeler'),
propertiesPanelModule = require('cmmn-js-properties-panel'),
// use Flowable properties provider
propertiesProviderModule = require('cmmn-js-properties-panel/lib/provider/flowable');

// a descriptor that defines Flowable related CMMN 1.1 XML extensions
var flowableModdleDescriptor = require('flowable-cmmn-moddle/resources/flowable');

var cmmnJS = new CmmnJS({
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
container: '#canvas',
propertiesPanel: {
parent: '#properties'
},
// make flowable prefix known for import, editing and export
moddleExtensions: {
flowable: flowableModdleDescriptor
}
});

...
`




Additional Resources

* Issue tracker
* Forum




Development

$3

`bash
npm install

export TEST_BROWSERS=Chrome
npm run all
``

License

MIT