A properties panel for dmn-js
npm install dmn-js-properties-panel
This is properties panel extension for dmn-js.
!dmn-js-properties-panel screenshot
The properties panel allows users to edit invisible DMN properties in a convenient way.
Some of the features are:
* Edit element ids and names
* Edit execution related Camunda properties
* Redo and undo (plugs into the dmn-js editing cycle)
Provide two HTML elements, one for the properties panel and one for the DMN diagram:
``html`
Bootstrap dmn-js with the properties panel, and a properties provider:
`javascript
import DmnModeler from 'dmn-js/lib/Modeler';
import {
DmnPropertiesPanelModule,
DmnPropertiesProviderModule,
} from 'dmn-js-properties-panel';
var dmnModeler = new DmnModeler({
drd: {
propertiesPanel: {
parent: '#properties'
},
additionalModules: [
DmnPropertiesPanelModule,
DmnPropertiesProviderModule
]
},
container: '#canvas'
});
`
You may attach or detach the properties panel dynamically to any element on the page, too:
`javascript
var propertiesPanel = dmnJS.get('propertiesPanel');
// detach the panel
propertiesPanel.detach();
// attach it to some other element
propertiesPanel.attachTo('#other-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-dmn-moddle.
`javascript
import DmnModeler from 'dmn-js/lib/Modeler';
import {
DmnPropertiesPanelModule,
DmnPropertiesProviderModule,
CamundaPropertiesProviderModule
} from 'dmn-js-properties-panel';
// use Camunda properties provider
import CamundaPropertiesProvider from 'src/provider/camunda';
// a descriptor that defines Camunda related DMN 1.1 XML extensions
import camundaModdleDescriptor from 'camunda-dmn-moddle/resources/camunda';
var dmnModeler = new DmnModeler({
drd: {
propertiesPanel: {
parent: '#properties'
},
additionalModules: [
DmnPropertiesPanelModule,
DmnPropertiesProviderModule,
CamundaPropertiesProviderModule
]
},
container: '#canvas'
// make camunda prefix known for import, editing and export
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
...
`
`bash
npm install
export TEST_BROWSERS=Chrome
npm run all
``
MIT