To help you get started, we've collected the most common ways that dmn-js-properties-panel is being used within popular public projects.

zeebe-io / zeebe-modeler / client / lib / app / editor / dmn-editor.js View on Github

var generateImage = require('app/util/generate-image'),
    isInput = require('util/dom/is-input'),
    isInputActive = require('util/dom/is-input').active,
    dragger = require('util/dom/dragger'),
    copy = require('util/copy');

var debug = require('debug')('dmn-editor');

var propertiesPanelModule = require('dmn-js-properties-panel').default,
    propertiesProviderModule = require('dmn-js-properties-panel/lib/provider/camunda').default,
    camundaModdlePackage = require('camunda-dmn-moddle/resources/camunda');

var drdAdapterModule = require('dmn-js-properties-panel/lib/adapter/drd').default,
    decisionTableAdapterModule = require('dmn-js-properties-panel/lib/adapter/decision-table').default,
    literalExpressionAdapterModule = require('dmn-js-properties-panel/lib/adapter/literal-expression').default;

/**
 * A DMN 1.1 diagram editing component.
 *
 * @param {Object} options
 */
function DmnEditor(options) {
  DiagramEditor.call(this, options);

  this.name = 'dmn';

  this.on('imported', (context) => {
    var warnings = context.warnings;

    if (warnings && warnings.length) {
      console.log(warnings);

View more ways to use dmn-js-properties-panel

dmn-js-properties-panel

This is properties panel extension for dmn-js.

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, and a properties provider:

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

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

...

Additional Resources

• Issue tracker
• Forum

Development

Running the tests

npm install

export TEST_BROWSERS=Chrome
npm run all

License

MIT