Setting custom attributes for customPalette groups/entries

Developers Modeler
1

Hey,
I’m trying to set custom attributes (i.e., in this case, the id) to the groups/entries in my custom palette, which is required for other libraries to work properly.

While setting the attributes class and title works similarly to the example, id cannot be set.

Setting the following in CustomPaletteProvider:

return {
    'create.low-task': {
        // setting id will not work
        id: 'entry1',
        group: 'activity',
        className: 'bpmn-icon-task red',
        title: 'Create Task',
        action: {
            dragstart: createTask(SUITABILITY_SCORE_LOW),
            click: createTask(SUITABILITY_SCORE_LOW)
        }
    }
    ...
}

… results in something like this:

<div class="entry bpmn-icon-task red" draggable="true" data-action="create.task" title="Create Task"></div>

However, the desired result is:

<div id="entry1" class="entry bpmn-icon-task red" draggable="true" data-action="create.task" title="Create Task"></div>

I found that setting attributes to groups/entries is limited to these attributes (cf. https://github.com/bpmn-io/diagram-js/blob/master/lib/features/palette/Palette.js#L219).

Is there a workaround to set the id to these elements?
E.g., something like an afterPaletteUpdateHook or overwriting the whole Palette's _update function?

Thank you very much for any help.

2

You already found the correct place inside the Palette. And yes, unfortunately, there is no dedicated event for that. You will have to override the _update method to have your custom implementation.

3

Thank you very much for your response.
Do you have an example on how to overwrite methods inside diagram.js's features-files?

4

You can refer to this example or simply use the search functionality.

1 Like
5

If anyone is interested.
You can overwrite the methods used by your CustomPaletteProvider directly in your CustomPalette(Provider) like this:

constructor(create, elementFactory, palette, translate) {
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);
    // https://github.com/bpmn-io/diagram-js/blob/master/lib/features/palette/Palette.js#L186
    palette._update = function () {
        // Replace functionality. In my case
        // * I copied the function from the link above,
        // * replaced `this.` by `palette.`
        // * and imported all missing packages
        ...
        // * to set the id, i added the following lines
        if (entry.id) {
            domAttr(control, 'id', entry.id)
        }
        ...
    }
}
1 Like