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?
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.
Sorry for the typo, dmn-js is what I meant.
Thanks for the examples. I’ll take a look!
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
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?
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?
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
)
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 ]
};
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:
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
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
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
.
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.