Skip to content

bpmn-io/cmmn-js-properties-panel

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A properties panel for cmmn-js.

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks