How to add additional buttons to the DMN modeler toolbar?

Developers Modeler
1

How to add custom buttons to the toolbar in the DMN modeler? There are some questions here on how to do it for the BPMN editor, but could not find anything that customizes the DMN toolbar specifically (shown below). Appreciates any example or links
image

2

For those who come across this, the way to add custom buttons to the DMN toolbar is as below:

Custom module option has to be inside a drd object as below. Otherwise it would NOT work:

import DMNModeler from 'dmn-js/lib/Modeler';

import customControlsModule from './customControls';

		// create the modeler
		this.dmnModeler = new DMNModeler({
			container: this.elHost.current,
			drd: { additionalModules: [customControlsModule] }
		});

The contents of the customControls/index.js is something like below:

import IOControlsPalette from './ioControlsPalette';

export default {
	__init__: ['ioControlsPalette'],
	ioControlsPalette: ['type', IOControlsPalette]
};

The contents of the ioControlsPalette.js:

/**
 * Ref: https://github.com/bpmn-io/diagram-js/blob/master/example/app/ExamplePaletteProvider.js
 */
import "./ioControlsPalette.scss";

export default function CustomPaletteProvider(palette) {
	palette.registerProvider(this);
}

CustomPaletteProvider.$inject = [
	 'palette'
];


CustomPaletteProvider.prototype.getPaletteEntries = function() {
	return {
		'io-controls-separator': {
			group: 'io-controls',
			separator: true
		},
		'io-controls-save': {
			group: 'io-controls',
			className: 'dmn-io-palette-icon-save',
			title: 'Save',
			action: {
				click: event => {
					console.log("clicked save: ", event);
				}
			}
		},
		'io-controls-load': {
			group: 'io-controls',
			className: 'dmn-io-palette-icon-load',
			title: 'Load from file',
			action: {
				click: event => {
					console.log("clicked Load : ", event);
				}
			}
		}
	};
};
3

Custom module option has to be inside a drd object as below

That’s true, since dmn-js follows a multi-editor approach. Therefore, additional modules have to be defined for a specific editor (drd, decisionTable and/or literalExpression).