Blog

News from the bpmn.io project

Improved UX, Decision Table Performance and Copy and Paste land in dmn-js

Published by Nico Rehwaldt on Friday, 23 March 2018.

dmn-js2.0.0 dmn-js3.0.0 dmn-js4.1.0

Over the last few months, we worked hard to re-write our DMN viewer and editor with focus on improved user experience and performance. On top of the promised improvements, the release adds a number of valuable features, not to be found in our legacy DMN toolkit.

A few months ago we set out to rebuild our DMN toolkit from scratch focusing on both usability and performance. More than 400 commits and numerous intermediate releases later we have accomplished this mission.

Improved keyboard navigation in action.

Try out the new release on demo.bpmn.io/dmn.

New Features

Compared to our legacy DMN toolkit this release comes with numerous improvements:

Since our first post about dmn-js@2 we have carried out numerous additional improvements on our decision table editor:

  • FEAT: Improved selection and keyboard navigation
  • FEAT: Reworked annotations / cell descriptions
  • FEAT: Open DMN tables without inputs
  • CHORE: restore ability to add custom hit policy and expression languages

Check out the newly introduced changelog for details on all improvements.

In terms of non-functional features, this release is a complete re-write of our DMN toolkit in modern JavaScript. Thanks to the improvements in its underlying architecture, it is able to open larger decision tables with ease.

New Pre-Packaged Distribution

The new version of dmn-js discontinues our Bower bundle. Pre-built versions of the DMN modeler and viewer are now distributed directly with the dmn-js npm package and available for download via unpkg.

You may reference individual assets directly from unpkg, as it is a full-fledged CDN:

<!-- required viewer styles -->
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-shared.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-drd.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-decision-table.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-literal-expression.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-font/css/dmn.css">

<!-- viewer distro -->
<script src="https://unpkg.com/dmn-js@4/dist/dmn-viewer.development.js"></script>

Check out the new pre-packaged example to learn how to embed the toolkit without prior setup.

Road Ahead

Please try out the latest toolkit version at demo.bpmn.io or the starter example. We are interested in your feedback. Is there anything you like in particular about the new mode-less approach? Something you're missing about the good old simple / advanced modes? Tell us about it in our forums.

As always, get the latest DMN toolkit pre-packaged or as source code via npm or unpkg.

We're hiring! Are you passionate about JavaScript, modeling and the web? Join our team and build modeling tools people heart.