How to add custom replace menu entries

[Pusteblume]

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:

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

[philippfromme]

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

[Pusteblume]

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?

[philippfromme]

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.

[Pusteblume]

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”?

[Martin]

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.

[Pusteblume]

Seems like my idea is not working. Not even with “element.businessObject.name”.

Would you be so kind and further explain how to set a custom property like you mentioned here?

@philippfromme

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.

[Martin]

At what point are you stuck? Please share what is working and what is not working so we can help you further.

When your implementation does not work with the name property, it will most likely not be fixed by using another property. So let’s try to get this working first before using a custom property for it

[Pusteblume]

Well, I tried to use “businessObject.name” as you suggested.

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

But I only get “undefined” as result.
If I call “getColor(element)” in my customReplaceProvider, I only get “black” as a result obviously.

However, switching between the different custom entries works. I can change from the blue connection (entry-1) to a red one (entry-2).

Sadly, I don’t have any clue where my mistake might be.