How to extend dmn-js for Camunda modeler

Developers Modeler
1

I just started using the Camunda modeler and began reading the documentation for how to add features and how to create plugins.
All the examples are relative to bpmn-js and none of them mention bmn-js.
At a high level how would the approach be for bmn? How would a simple plugin look like?
Any help for starting this out?

2

What is “bmn-js”? Do you mean dmn-js?

For dmn-js the way on how to create plugins is exactly the same as for bpmn-js. You can find some unofficial examples here.

3

Sorry for the typo, dmn-js is what I meant.
Thanks for the examples. I’ll take a look!

4

Hi @Niklas_Kiefer,
Starting from this example I have used the same steps to log something on the console. It works fine for the bpmn modeler, but not for the dmn.
This is the LoggingService that logs on the console when a cell is edited and it’s the only change I’ve made from the example

export default function LoggingService(eventBus) {

  eventBus.on('input.edit', function() {
    console.log('🎉 You are editing a decision table cell!');
  });
// rest of the code...
}

Is there any reason why it’s not working? Thanks

5

Can you please share the index file of your client extension? So like this file. Which version of camunda-modeler-plugin-helpers are you using?

6

I see what you’re saying. I was running an older version (v3.1) and also using registerBpmnJSPlugin.
I have updated the package to v3.4.0-alpha.1 and using registerDmnJSPlugin. Here’s the index.js file

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

import LoggingExtensionModule from './logging-extension';

registerDmnJSPlugin(LoggingExtensionModule, 'drd');

Still doesn’t log when I edit a cell. Is it maybe the wrong eventBus I subscribe to?

7

Thanks for sharing the code! What are you doing is to register a plugin for the drd module. Input cells live in the decisionTable module. You have to be explicit here. Refer to this documentation here.

registerDmnJSPlugin(LoggingExtensionModule, 'decisionTable');

dmn-js is a little special here with the multi-editor approach (drd, literalExpression, decisionTable)

8

I see. So, I have updated to
registerDmnJSPlugin(LoggingExtensionModule, 'decisionTable');
but still no luck.
Just for completeness, this is the index.js file from logging-extension folder

import LoggingService from './loggingService';

export default {
  __init__: [ 'loggingPlugin' ],
  loggingPlugin: [ 'type', LoggingService ]
};
9

I tried that one out and it worked perfectly fine to me.

// dmn-js-extension/index.js
function LoggingPlugin(eventBus) {
  eventBus.on('input.edit', function(event) {
    console.log('A input header was clicked!', event);
  });

  eventBus.on('cell.click', function(event) {
    console.log('A cell was clicked!', event);
  })
}

module.exports = {
  __init__: [ 'loggingPlugin' ],
  loggingPlugin: [ 'type', LoggingPlugin ]
};

// index.js
import {
  registerDmnJSPlugin
} from 'camunda-modeler-plugin-helpers';

import DmnExtensionModule from './dmn-js-extension';

registerDmnJSPlugin(DmnExtensionModule, 'decisionTable');

Note that the input.edit event is triggered when clicking on a input header. A rule-cell click will be handled by the cell.click event.

Hint: You can see all events in your solution by inspecting the eventBus._listeners property:

image
image1102Ă—1674 405 KB

10

I don’t know what the issue was but I have created a new plugin from the scratch and that fixed the problem!
This has been extremely helpful, thank you!

The only problem I’m seeing now is the inspection not working
Screen Shot 2020-05-13 at 4.18.10 PM
I tried adding this line

// dmn-js-extension/index.js
 // LoggingPlugin function ..
 LoggingPlugin.$inject = ['eventBus'];
 // module.exports

which I believe it’s used to make it available after minification.
Javascript source maps is enabled FWIW

11

When do you do the inspection? it will not work outside the context of your plugin. I created a debugging point inside the plugin and then console-logged the eventBus.

1 Like
12

Thanks for sharing the code! What are you doing is to register a plugin for the drd module. Input cells live in the decisionTable module.