How to create custom palette plugin


#1

We are trying to replace existing palette with the customized palette in the form of the plugin in Modeler.exe. The new palette will have customized entries in the form of a LIST.

To achieve the above objective, we have created a CustomPaletteProvider.js and CustomPalette.js files. In case of the BPMN.io project, we just need to add the above files as an additional module. But In case of the plugin, we are not sure how to register the custom palette and the custom palette provider.

Please provide us with some documentation or examples which can dipict as to how we can override the palette.


#2

Hi @rvineet
this example might help:


#3

Hi @felix-mueller,
This example is to override palette provider but we need to override palette itself.

Any pointers to achieve the same will be helpful.


#4

Overriding the palette works like overriding any feature:

var palette =  require('./Palette');

module.exports = {
  __init__: [ 'palette' ],
  palette: [ 'type', Palette ]
};

#5

Hi,

In continuation to the above stated issue, me and rvneet have done the following:

We have tried to override the Palette and the Provider by writing two files (CustomPalette.js and CustomPaletteProvider.js). Now to override them, we have used the below code:

To override CustomPaletteProvider.js, we have used below code in index.js

var PaletteModule = '../custom';
var CreateModule = 'diagram-js/lib/features/create';
var SpaceToolModule = 'diagram-js/lib/features/space-tool';
var LassoToolModule = 'diagram-js/lib/features/lasso-tool';
var HandToolModule = 'diagram-js/lib/features/hand-tool';
var translate = 'diagram-js/lib/i18n/translate';

var GlobalConnectModule = 'bpmn-js/lib/features/global-connect';

var CustomPaletteProvider = './CustomPaletteProvider';

module.export = {
    __depends__: [
        PaletteModule,
        CreateModule,
        SpaceToolModule,
        LassoToolModule,
        HandToolModule,
        translate,
        GlobalConnectModule
    ],
    __init__: [ 'paletteProvider' ],
    paletteProvider: [ 'type', CustomPaletteProvider ]
};

And to override the CustomPalette.js, we have used below code in index.js

var CustomPalette = './CustomPalette';

module.export = {
  __init__: [ 'palette' ],
  palette: [ 'type', CustomPalette ]
};

This looks like inline with the above suggestion. And to register the CustomPaletteProvider.js as a plugin, we have used the below code:

'use strict';
var registerBpmnJSPlugin = require('camunda-modeler-plugin-helpers').registerBpmnJSPlugin;
var CustomPaletteProvider = require('./custom/provider/CustomPaletteProvider');

function CustomPalettePlugin() {
    registerBpmnJSPlugin ({
        type: 'bpmn.modeler.additionalModules',
        module: CustomPaletteProvider
      });
}

module.exports = {
    __init__: ['customPalettePlugin'],
    customPalettePlugin: ['type', CustomPalettePlugin]
};

But still we are not able to see the custom palette in the modeller. Any ideas as to what is going wrong here.


#6

You seem to export the provider only:

Furthermore, if you want to override an existing module, you have to use the same name, otherwise your customPalettePlugin will just be another module floating around.