Blog

News from the bpmn.io project

Awaitable Import and Export APIs Land in bpmn-js

Published by Oguz Eroglu on Thursday, 28 May 2020.

bpmn-js7.0.0

We are happy to announce that the latest release of our BPMN modeling toolkit ships with Promise support for our async import and export APIs. Starting with this release users can benefit from async features available in modern, ES6-style JavaScript codebases as they await the API results. To align with our ongoing bpmn.io re-branding we ship an updated toolkit watermark, too.

This release brings promise support to our async toolkit APIs, allowing you to await the import or export results in a state-of-the-art manner:

const modeler = new BpmnModeler();

try {
  await modeler.importXML(bpmnDiagramXML);
} catch (err) {
  // handle import error
}

Callbacks style invocations are still supported but will be dropped in a future major release. We advise you to migrate to Promise-based API usage. Refer to this documentation to see with detailed examples what needs migration and what not. If you are still targeting Internet Explorer or Opera Mini, ensure you polyfill the global Promise object.

Promisified Import and Export APIs

You can now await these bpmn-js APIs:

Here's a small example of how to open a BPMN diagram in the new way.

const modeler = new BpmnModeler();

try {
  const {
    warnings
  } = await modeler.importXML(bpmnDiagramXML);

  console.log('Imported BPMN 2.0 diagram', warnings);
} catch (err) {

  const {
    warnings
  } = err;

  console.log('Failed to import BPMN 2.0 diagram', err, warnings);
}

Here is a small example of how to export a diagrams SVG in the new way.

try {
  const {
    svg
  } = await modeler.saveSVG();

  console.log('Exported BPMN 2.0 diagram in SVG format', svg);
} catch (err) {

  console.error(err);
}

For more examples, check by our our example repository for bpmn-js. It is already updated to feature the promisified APIs in action!

Please approach us via our forums to share your feedback regarding these changes.

New Project Logo / Toolkit Watermark

Following our project rebranding this library release ships with a new project logo. Goodby old bpmn.io logo!

A BPMN diagram and shown with bpmn-js and our updated project watermark

Hello new bpmn.io word mark!

Wrapping Up

Read through the full changelog to learn about all issues that we addressed with bpmn-js@7.0.

Did we miss anything? Did you spot a bug, or would you like to suggest an improvement? Reach out to us via our forums, toot us on Mastodon or file an issue you found in the bpmn-js issue tracker.

Get the latest BPMN modeling 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.

Back to blog.