Skip to content
A properties panel for dmn-js.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
lib
styles
test
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
karma.conf.js
package.json

README.md

dmn-js-properties-panel

This is properties panel extension for dmn-js.

dmn-js-properties-panel screenshot

Features

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)

Usage

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

<div class="modeler">
  <div id="canvas"></div>
  <div id="properties"></div>
</div>

Bootstrap dmn-js with the properties panel, a properties provider and an adapter for each editor:

import DmnModeler from 'dmn-js/lib/Modeler';

import propertiesPanelModule from 'dmn-js-properties-panel';
import drdAdapterModule from 'dmn-js-properties-panel/lib/adapter/drd';

import propertiesProviderModule from 'dmn-js-properties-panel/lib/provider/dmn';

var dmnModeler = new DmnModeler({
  drd: {
    propertiesPanel: {
      parent: '#properties'
    },
    additionalModules: [
      propertiesPanelModule,
      propertiesProviderModule,
      drdAdapterModule
    ]
  },
  container: '#canvas'
});

Dynamic Attach/Detach

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

var propertiesPanel = dmnJS.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-dmn-moddle.

import DmnModeler from 'dmn-js/lib/Modeler';
import propertiesPanelModule from 'dmn-js-properties-panel';
import drdAdapterModule from 'dmn-js-properties-panel/lib/adapter/drd';

// use Camunda properties provider
import propertiesProviderModule from 'dmn-js-properties-panel/lib/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: [
      propertiesPanelModule,
      propertiesProviderModule,
      drdAdapterModule
    ]
  },
  container: '#canvas'
  // 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

You can’t perform that action at this time.