cmmn-js-properties-panel

0.9.0 • Public • Published

cmmn-js-properties-panel

CI

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:

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

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

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

Dynamic Attach/Detach

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

var propertiesPanel = cmmnJS.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-cmmn-moddle.

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

// a descriptor that defines Camunda related CMMN 1.1 XML extensions
var camundaModdleDescriptor = require('camunda-cmmn-moddle/resources/camunda');

var cmmnJS = new CmmnJS({
  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

Package Sidebar

Install

npm i cmmn-js-properties-panel

Weekly Downloads

700

Version

0.9.0

License

MIT

Unpacked Size

261 kB

Total Files

73

Last publish

Collaborators

  • jarekdanielak
  • vsgoulart
  • skaiir-camunda
  • marstamm
  • bpmn-io-admin
  • nikku
  • barmac
  • philippfromme
  • maxtru