Blog

News from the bpmn.io project

Export Life-Cycle hooks land in bpmn-js

Published by Philipp Fromme on Monday, 18 June 2018.

bpmn-js2.2.0 diagram-js2.3.0

We're happy to announce the latest release of our BPMN modeling toolkit allowing you to hook into the import and export lifecycle of XML and SVG. This makes it easier for integrators to perform custom actions along with user triggered save/export actions.

bpmn-js allows you to hook into virtually anything from creating and deleting shapes to things like clicking on elements or changing their properties. Therefore, extending the toolkit or integrating with it is straightforward. So far it was not possible to hook into the lifecycle of importing and exporting XML and exporting SVG. As of this release you can hook into these, too:

const viewer = new Viewer();

viewer.importXML(myXML, (error, warnings) => {

  /*
   * XML import
   */
  viewer.on('import.parse.start', ({ xml }) => {
    // manipulate XML before parsing

    // make sure to return the manipulated xml
    return xml;
  });

  viewer.on('import.parse.complete', ({ error, definitions, context }) => {
    // manipulate definitions before import

    // make sure to return the manipulated defintions
    return defintions;
  });

  viewer.on('import.done', ({ error, warnings }) => {
    // do something after import
  });

  /*
   * XML export
   */
  viewer.on('saveXML.start', ({ definitions }) => {
    // manipulate defintions before export

    // make sure to return manipulated defintions
    return definitions;
  });

  viewer.on('saveXML.serialized', ({ xml }) => {
    // manipulate XML before export

    // make sure to return manipulated XML
    return xml;
  });

  viewer.on('saveXML.done', ({ error, xml }) => {
    // do something after export
  });

  /*
   * SVG export
   */
  viewer.on('saveSVG.start', () => {
    // do something before export
  });

  viewer.on('saveSVG.done', ({ error, svg }) => {
    // do something after export
  });

});

Other Improvements

This release also ships with a few additional improvements and fixes:

  • FEAT: unset businessObject name if empty
  • FEAT: resize text annotation on text change
  • FIX: apply data store behavior in collaboration only
  • FIX: create/update labels when updating element name via Modeling#updateProperties

Get the latest BPMN toolkit pre-packaged or as source code via npm or unpkg.

Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people heart.