Custom Menu Provider (extends ReplaceMenuProvider)


#1

I’m trying with creating a custom task (custom task of type service task) in the sub menu. With the reference to the articles (ref1, ref2), the source code should be changed in-order to add or remove the menu items.

Is it true or the ReplaceMenuProvider can be extended and pass the override items when create instance of Bpmn. Attached sample code below.

Code:

loadModeler() {
    this.container = document.getElementById('js-drop-zone');
    this.modeler = new BpmnJS({
      container: '#js-canvas',
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule
      ],
      replaceMenuProvider: [], // <-- something like this.
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
        qa: qaPackage
      }
    });

#2

You’d override the provider like any other module:

const modeler = new BpmnJS({
  additionalModules: [
     myReplaceMenuProvider
  ]
});

Make sure the provider module has the same name in order to override.

export default {
  __depends__: [
    PopupMenuModule,
    ReplaceModule
  ],
  __init__: [ 'replaceMenuProvider' ],
  replaceMenuProvider: [ 'type', MyReplaceMenuProvider ]
};

#3

I’ve tried to directly use the ReplaceMenuProvider in additoinalModules by modify TASK name from ReplaceOptions. But it didn’t work out. Is there anything else should be done.?

import * as CustomMenuProvider from 'bpmn-js/lib/features/popup-menu/ReplaceMenuProvider'

 loadModeler() {
    this.container = document.getElementById('js-drop-zone');
    this.modeler = new BpmnJS({
      container: '#js-canvas',
      keyboard: { bindTo: document },
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
        CustomMenuProvider, // <-- used the default provider. Just modified the TASK name from ReplaceOptions
      ],
      replaceMenuProvider: [],
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
      }
    });

ReplaceOptions:

// modified task label and added SMS Task
export var TASK = [
  {
    label: 'Task - CUSTOM',
    actionName: 'replace-with-task',
    className: 'bpmn-icon-task',
    target: {
      type: 'bpmn:Task'
    }
  },{
    label: 'SMS Task',
    actionName: 'replace-with-sms-subprocess',
    className: 'bpmn-icon-send',
    target: {
      type: 'bpmn:Task'
    }
  }

Expecting the above items will reflect in sub-menu.


#4

It’s hard to guess what the issue is. Overriding components should be straight forward. You may have a look at the custom elements example where we make heavy use of overriding components.