Git Product home page Git Product logo

bpmn-js-properties-panel's Introduction

Extending the properties panel changed significantly with bpmn-js-properties-panel>=1. For the 0.x version of the library, check out the 0.x branch. Read more on the changes in the changelog.

bpmn-js-properties-panel

CI

A properties panel extension for bpmn-js that adds the ability to edit technical properties (generic and Camunda).

bpmn-js-properties-panel screenshot

Features

The properties panel allows users to edit invisible BPMN properties in a convenient way.

Some of the features are:

  • Edit element ids, multi-instance details and more
  • Edit execution related Camunda properties
  • Redo and undo (plugs into the bpmn-js editing cycle)

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-js-properties-panel/dist/assets/properties-panel.css">

If you use the ElementTemplatesProviderModule, include also its stylesheet:

<link rel="stylesheet" href="https://unpkg.com/bpmn-js-properties-panel/dist/assets/element-templates.css">

Dynamic Attach/Detach

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

var propertiesPanel = bpmnJS.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-bpmn-moddle.

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

// a descriptor that defines Camunda related BPMN 2.0 XML extensions
var camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');

var bpmnJS = new BpmnJS({
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  },
  // make camunda prefix known for import, editing and export
  moddleExtensions: {
    camunda: camundaModdleDescriptor
  }
});

...

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' ];

Additional Resources

Development

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

License

MIT

bpmn-js-properties-panel's People

Contributors

adamscybot avatar azeghers avatar barmac avatar chincholikarsalil avatar dependabot[bot] avatar falko avatar felix-mueller avatar guillaumesmaha avatar hubel avatar iamfat avatar lzgabel avatar marstamm avatar maxtru avatar menski avatar meyerdan avatar nikku avatar oguzeroglu avatar pedesen avatar philippfromme avatar polenz avatar prithviraj-maurya avatar rajgoel avatar romansmirnov avatar simeon-penev avatar skaiir avatar smbea avatar stanleysweet avatar thorbenlindhauer avatar waffle-iron avatar zeropaper avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.