Extending the Camunda Modeler for DMN

We’re getting started on some enhancements to the Camunda Modeler, specifically on the DMN model side, to make it easier (and safer) for our business owners to use, e.g. drop-downs to select integer-based id values representing partner organizations, states, locations, etc.

Our scenario is that we have a list of U.S. states, each of which has a numeric id representing it, e.g. 46 = Texas. We’ve built a decision table model that takes these integer id values as an input, but rather than requiring our business owners to look up (or remember that 46 means “Texas”), we’d like to present them with a dropdown list of state names. Selecting one would still result in a 46 in the model cell, but “Texas” would be displayed instead, making it easy to understand the model at a glance.

What we’re seeing is that most of the documentation on extending the Modeler, examples, etc deal with the BPMN side of the Modeler. We understand that this this type of modification is possible as of v3.7 of the Modeler, but there doesn’t seem to be any documentation available about things like the Modeler’s plug-in architecture as it relates to DMN (we’ve heard that it has one), its event model (we assume from other work that it has one that would enable us to “hook” into events like start-up, model validation, focus change from one user interface element to another, click events, etc), etc.

One of our developers is slogging through the Modeler’s source code, trying to discover how it all fits together, but there must be some documentation or at least someone who knows how the thing is put together and how to extend it.

Is there somewhere we can look for more and better documentation and/or someone we can talk to for advice? Happy to make what we learn available in the form of documentation, code samples, etc.

3 Likes

Hey,

thank you for your interest in extending the Camunda Modeler and its underlying DMN modeler. Unfortunately, as of today, there is no comprehensive documentation of dmn-js or extending it in the context of the Camunda Modeler. We’re planning to change this in the future as we understand the pain that our users are going through when trying to extend our tools. For your extension you need two things:

1. Extending the Camunda Modeler with a dmn-js plugin

You can use this example of extending bpmn-js as a starting point: camunda-modeler-plugins/bpmn-js-plugin-example at master · camunda/camunda-modeler-plugins · GitHub

You’d simply change the plugin’s client.js to:

import {
  registerDmnJSPlugin
} from 'camunda-modeler-plugin-helpers';

const DmnJSModule = {
  __init__: [ 'myService' ],
  myService: [ 'type', ... ]
};

registerDmnJSPlugin(DmnJSModule, 'decisionTable') // register as plugin for DMN decision table editor

2. Creating the dmn-js plugin itself

As far as I understand you’d want editing capabilities similar to the boolean/number/string editor:

image

In dmn-js-decision-table there is a simple-mode feature that allows users to edit cells through a UI element instead of having to edit the table cells directly. For editing numbers, for example, the simple-numer-edit feature hooks in and provides the UI element for editing numbers. In a similar fashion, you’d create a feature that provides that for your use case. Note that you’d need a way of determining whether a cell should be edited using your extension or just like a plain old number.

I hope this will help you get started.

1 Like

Thanks, Philipp! We’ll give this a try.