How to replace a subprocess element on a pallet

Developers Modeler
1

Hello.

Please help. I can’t find an example. How to replace an element on a pallet so that instead of a “Create expanded sub-process” element, i can make a “Create collapsed sub-process” element. So that when adding to a diagram, a collapsed subprocess is immediately created. When I saw in the blog that this element was immediately on the pallet. But unfortunately I still don’t understand how to do this. I was able to do it only by collapsing through modeling.toggleCollapse on the event eventBus.on("commandStack.shape.create.postExecuted

Example my code:

    eventBus.on("commandStack.shape.create.postExecuted", (event) => {
      if (event.context.shape.type == "bpmn:SubProcess") {
        modeling.toggleCollapse(event.context.shape);
      }
    });

Maybe there is a way to replace the element directly with the required one on the pallet? Thanks

2

First, have a look at bpmn-js-example-custom-controls. It shows how to add a new entry to the palette.

Then, have a look at the following topic that shows how to remove entries from the default palette.

If you don’t want to remove the default entry and add a new one, but actually replace the existing one, you can still do it using what you learnt from the linked resources.

3

Hi.

Thanks, I did it like this

CustomPaletteProvider.js

import inherits from 'inherits';
import BasePaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';

export default function CustomPaletteProvider(palette, create, elementFactory, spaceTool, lassoTool) {
  BasePaletteProvider.call(this, palette, create, elementFactory, spaceTool, lassoTool);

  this.getPaletteEntries = function() {
    return function(entries) {
      delete entries['bpmn-tool-subprocess-expanded'];

      entries['bpmn-tool-subprocess-collapsed'] = {
        group: 'activity',
        className: 'bpmn-icon-subprocess-collapsed',
        title: 'Create sub-process',
        action: {
          dragstart: createSubprocess,
          click: createSubprocess
        }
      };

      function createSubprocess(event) {
        const shape = elementFactory.createShape({ type: 'bpmn:SubProcess', isExpanded: false });
        create.start(event, shape);
      }

      return entries;
    };
  };

  palette.registerProvider(this);
}

inherits(CustomPaletteProvider, BasePaletteProvider);

CustomPaletteProvider.$inject = [
  'palette',
  'create',
  'elementFactory',
  'spaceTool',
  'lassoTool'
];

Now I can’t figure out how to remove extra items from the “Change element” menu (

image

4

Change element menu is controlled by bpmn-js-create-append-anything module. It is currently not customizable, see:

I also encourage you to do some deeper search before creating a topic next time. It seems all your questions have been already answered on the forum. :slight_smile: