Implement Sub-Process collapsed icon

Developers Modeler
1

Dear team,
in my icon palette, the ‘Sub-Process collapsed’ icon does not appear. How can I implement it? I have a NodeJS project where I’ve used bpmn-js, but in my canvas palette, the BPMN icon for ‘Sub-Process collapsed’ does not appear. How can this be implemented?

Many thanks,
Sebastian

2

Somehow I manage to achieve what I wanted. However, now I am lacking the “go-back” function (breadcrumb function for going back to the parent subrpocess); see attached image.

How can I implement that?
image

I you are interested in how I insert the subprocess collapse icon in my palette, I created a customPalette.js file with this code:

// src/customPalette.js

import { assign } from 'min-dash';

// Define the CustomPaletteProvider function without default
function CustomPaletteProvider(palette, create, elementFactory, translate) {
  this.create = create;
  this.elementFactory = elementFactory;
  this.translate = translate;

  palette.registerProvider(this);
}

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

CustomPaletteProvider.prototype.getPaletteEntries = function(element) {
  const {
    create,
    elementFactory,
    translate
  } = this;

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

    create.start(event, shape);
  }

  return {
    'create.sub-process-collapsed': {
      group: 'activity',
      className: 'bpmn-icon-subprocess-collapsed',
      title: translate('Create Collapsed SubProcess'),
      action: {
        dragstart: createSubProcess,
        click: createSubProcess
      }
    }
  };
};

// Export the module configuration as the default export
export default {
  __init__: ['customPaletteProvider'],
  customPaletteProvider: ['type', CustomPaletteProvider]
};

Then in index.js I add this:

import customPaletteModule from './customPalette';

// Function to initialize the modeler and attach it to the #canvas element
function initializeModeler() {
  const modeler = new BpmnModeler({ 
    container: '#canvas',
    additionalModules: [
      customPaletteModule
    ]
 });
3

The breadcrumbs should appear after drilling down into the subprocess you created. Your implementation looks correct. Could you share a CodeSandbox that showcases the issue?