Separate custom flows in the context pad

In the custom elements example a service task is created directly from the context pad as shown in the image below:

In a similar fashion, I’ll like to separate the different flows in the context pad. At the moment in the bpmn modeler, you connect the sequence flow then using the popup menu, you can select a “Default flow” or a “Conditional flow” which replaces the sequence flow. But in my custom modeler, I’ll like to have 3 icons in the context pad representing 3 custom flows (cf 1, cf 2 and cf 3). The user can click on each of them to draw a custom connector where necessary.


I’m not sure on how this can be done. Can anyone provide me with any help with achieving this?


Extra Info:
The connect tool in the bpmn-js context pad makes use of the following function:

function startConnect(event, element) {
    connect.start(event, element);

The idea of the connect tool is to be able to create all sorts of connections. It does assume that there is not too many options for a user to choose from (in fact, in BPMN there is only one reasonable option in most cases).

If you build a custom modeler, then you’d want to override the default context pad provider to get rid of the stock connect tool. During connection you’d want to send over hints (which type of connection you’re going to create?). That seems to be not supported at this stage.

Instead we infer the connection type based on hints returned by our connect rule checker, cf. bpmn rules. Maybe you want to pursue that direction, too.

From a users point of view it may otherwise be cumbersome to decide upon the connection type.

1 Like