How to create custom palette plugin

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.

Hi @rvineet
this example might help:

1 Like

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.

Overriding the palette works like overriding any feature:

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

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

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.

1 Like

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.

Hi,

I have been trying to create a custom palette plugin in which I will add custom elements with custom generated attributes and values to the XML file. Please do you have the complete plugin on github? It would be very helpful.

Thank you

Hi,

Can we have multiple palette inside bpmn editor ? How to add and register the same ?

1 Like

Hello! still no solution?
I’ve downloaded the code but the custom palette does not show up. No errors are shown neither when building nor runtime.

Using this code: