Menu for custom elements

Developers
1

Hi all,
I have used bpmn-js-example-custom-shapes to extend the base model of bpmn.io with custom elements. I need to replace my custom elements using the menu, like you do with bpmn elements.

I have created my CustomReplaceMenuProvider.js and CustomReplaceOptions.js including the following code:

CustomReplaceOptions.js

export var MEASURE = [
  
  {
    label: 'Time measure',
    actionName: 'replace-with-time-measure',
    target: {
      type: 'custom:TimeMeasure'
    }
  },
  {
    label: 'Count measure',
    actionName: 'replace-with-count-measure',
    target: {
      type: 'custom:CountMeasure'
    }
  }, 
  {
    label: 'Data measure',
    actionName: 'replace-with-data-measure',
    target: {
      type: 'custom:DataMeasure'
    }
  }
];

CustomReplaceMenuProvider.js

if (is(businessObject, 'custom:CountMeasure') || is(businessObject, 'custom:TimeMeasure') || is(businessObject, 'custom:DataMeasure')) {
  entries = filter(replaceOptions.MEASURE, differentType);
  return this._createEntries(element, entries);
}

image
I get the menu to appear in the elements but I can’t get the replacement to take place when I click on the options. What do I need to modify to achieve this?

Thanks for your attention

2

Welcome to the forum!

It’s hard to help you without knowing the complete context. Mind you sharing your code into a working CodeSandbox so we can inspect it?

What’s important in the end is that your custom entries have a proper action attribute that are handling the replacement.

3

Thanks for your quick reply!

I reckon that my custom entries have not a proper action attribute.

Where should I define the functionality of the action attribute? Where in the project is the functionality of these attributes defined for bpmn entries? For instance in this case, where is ‘replace-with-none-intermediate-throw’ functionality defined?

export var INTERMEDIATE_EVENT = [
  {
    label: 'Start Event',
    actionName: 'replace-with-none-start',
    className: 'bpmn-icon-start-event-none',
    target: {
      type: 'bpmn:StartEvent'
    }
  },
  {
    label: 'Intermediate Throw Event',
    actionName: 'replace-with-none-intermediate-throw',
    className: 'bpmn-icon-intermediate-event-none',
    target: {
      type: 'bpmn:IntermediateThrowEvent'
    }
  }
];

Thanks again for your attention

4

It’s not mandatory to create those actions directly in your options. As I referred to in the second link (https://github.com/bpmn-io/bpmn-js/blob/eb711507d4a3564e2a6da077f686d362b6bd4f28/lib/features/popup-menu/ReplaceMenuProvider.js#L377), we also transform those target afterward. It simply depends on your needs. You can do something similar or simply create the actions directly.

5

I have tried to do something similar to what you do with the bpmn elements but I can’t manage to replace my custom elements. Could you give me a hint on how to create the actions directly?

Thanks in advance!

6

The following still applies.

Please share a running example of what you’re trying to achieve. It is a waste of our time to fish in the dark and assume where you got stuck.