This project has been integrated into bpmn-io/bpmn-js-properties-panel and is not developed anymore in this repository. Go to the linked repo to check the further progress on the project.

@bpmn-io/bpmn-properties-panel

Properties panel for bpmn-js, built on top of @bpmn-io/properties-panel.

Installation

npm install bpmn-io/bpmn-properties-panel

Usage

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

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

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

import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from '@bpmn-io/bpmn-properties-panel';

const modeler = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule
  ]
});

Styling

For proper styling include the necessary stylesheets:

<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/[email protected]/dist/assets/properties-panel.css">

If you use the ElementTemplatesProviderModule, include also its stylesheet:

<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/[email protected]/dist/assets/element-templates.css">

API

BpmnPropertiesPanelRenderer#attachTo(container: HTMLElement) => void

Attach the properties panel to a parent node.

const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.attachTo('#other-properties');

BpmnPropertiesPanelRenderer#detach() => void

Detach the properties panel from its parent node.

const propertiesPanel = modeler.get('propertiesPanel');

propertiesPanel.detach();

BpmnPropertiesPanelRenderer#registerProvider(priority: Number, provider: PropertiesProvider) => void

Register a new properties provider to the properties panel.

class ExamplePropertiesProvider {
  constructor(propertiesPanel) {
    propertiesPanel.registerProvider(500, this);
  }

  getGroups(element) {
    return (groups) => {

      // add, modify or remove groups
      // ...

      return groups;
    };
  }
}

ExamplePropertiesProvider.$inject = [ 'propertiesPanel' ];

Build and Run

Prepare the project by installing all dependencies:

npm install

Then, depending on your use-case, you may run any of the following commands:

# build the library and run all tests
npm run all

# spin up a single local modeler instance
npm start

# run the full development setup
npm run dev

Release

np --no-publish

License

MIT