How to add custom replace menu entries

Hello,

do you know how I can duplicate the Sequence Flow in the “Change type”-Menu and color it differently?

Until now it looks like this:
image
But I want to have for example a blue Sequence Flow shown right above “Default Flow”.

Do you know a way to do that?

Thanks in advance

You’ll need a custom provider for the popup menu:

class ReplaceProvider {
  constructor(popupMenu) {
    popupMenu.registerProvider("bpmn-replace", this);
  }

  getPopupMenuEntries(element) {
    // ...
  }
}

Using getPopupMenuEntries you can provide additional popup menu entries:

getPopupMenuEntries(element) {
  if (!is(element, "bpmn:SequenceFlow")) {
    return;
  }

  return {
    "entry-1": {
      className: "bpmn-icon-connection",
      label: "Blue Sequence Flow",
      action: () => {
        // set custom property that turns sequence flow into custom sequence flow
      }
    }
  };
}

Using you custom renderer you can then render your custom sequence flow in a different color.

CodeSandbox: Custom Popup Menu Entries - CodeSandbox

Thank you, this worked!

But I still don’t seem to understand how to change the color of the sequence flow.
I have tried using

action: () => {
    this.modeling.setColor(element, color)
}

but it’s not working.

Do you have any idea what I’m doing wrong? Or would you know how to properly set the color inside that function?

This is how you use setColor:

modeling.setColor(element, { fill: 'red', stroke: 'green' });

However, I’d assume you want to mark your connections as being custom by setting a custom property, not just the color. Hence, I’d set the custom property and render the connection in a different color based on that property.

This works but my original idea was to get the color through this function here:

export function getColor(connection) {
    if (is(connection, 'bpmn:SequenceFlow') && isConditional(connection)) {
        return COLORS.RED;
    }
    if (is(connection, 'bpmn:SequenceFlow') && isDefault(connection)) {
        return COLORS.GREEN;
    }
    if (is(connection, 'bpmn:SequenceFlow')) {
        console.log(connection.name);
        if(connection.name === 'blue') return 'blue';
        return COLORS.BLACK;
    }
}

But I only get “undefined” for “connection.name”.

I’m calling the function here:

export default class customReplaceProvider {
    ...
    getPopUpMenuEntries(element) {
        ...
    }

    return {
        "entry-1": {
            className: "bpmn-icon-connection",
            label: "Blue Sequence Flow",
            action: () => {
                this.modeling.updateProperties(element, {
                name: "blue"
            });
            const color = getColor(element);
            console.log(color);
            this.modeling.setColor(element, { stroke: 'blue' });
        }
    }
}

Would you know how I can get access to “connection.name”?

Would you know how I can get access to “connection.name”?

Most attributes are stored in the businessObject of the element. This includes the name attribute.

You can access it through element.businessObject.name.

1 Like