How to add a label to a connection?

Developers Modeler
1

Hi

Very new to bpmn-js and wanting to use it to display a workflow to users with limited editing capabilities.

I’m at the stage of programmatically building a diagram from my own object model. I’m finding it extremely difficult to find documentation on how to do things!

Anyway, first question - I use the modeling.connect function to connect a bpmn:Task to a bpmn:ExclusiveGateway but how do I add a custom label to the connection?

I’ve a tonne more questions, but I’ll make them separate posts so as to keep things focused.

Thanks…

2

Thanks for your feedback. We’re always happy to hear topics for possible developer documentation, so that we might improve the situation in the (near) future. Feel free to name certain things (maybe in another thread) so we can bring this into our plans.

2 Likes
3

The name has to be given by the business object of the to be created connection.

const businessObject = bpmnFactory.create("bpmn:SequenceFlow", {
  name: "my connection"
});

modeling.createConnection(
  startEvent,
  task,
  {
    type: "bpmn:SequenceFlow",
    businessObject: businessObject
  },
  startEvent.parent
);

See this CodeSandbox for more details.

1 Like
4

Thanks Niklas - I have that working now - at least adding labels to the connections.

Is there a place that I can find developer documentation on what is possible, or do I have to either read the source code or ask forum questions? I’ve had a look at the example repos but they’re of limited use unless they cover the scenario I’m wanting to implement.

5

Currently, there isn’t detailed documentation, unfortunately. So looking at the source code, understand the core concepts and search for help in the forum will be the best way to do.

1 Like
6

Small suggestion…we also needed a label for sequence flow but we replaced it with a tool tip. Like when user places mouse on sequence flow, a tooltip will popup.

To achieve this, add a extension element to sequence flow with the label you want to display,
write a event listener for mouseover, and then get the extension element body to display as a tool tip

I hope you like my idea, if not ignore it please.

7

I tried this, but this isn’t working for me, it shoots up the following error:
EventBus.js:385 unhandled error in event listener
./node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListener @ EventBus.js:385
./node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListeners @ EventBus.js:352
./node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus.fire @ EventBus.js:313
./node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._fire @ CommandStack.js:356
./node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._internalExecute @ CommandStack.js:404
./node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack.execute @ CommandStack.js:153
./node_modules/bpmn-js/node_modules/diagram-js/lib/features/modeling/Modeling.js.Modeling.createConnection @ Modeling.js:242
createNamedConnect @ CustomPalette.js:107
click @ CustomPalette.js:140
./node_modules/bpmn-js/node_modules/diagram-js/lib/features/palette/Palette.js.Palette.trigger @ Palette.js:302
(anonymous) @ Palette.js:150
(anonymous) @ index.esm.js:359
EventBus.js:386 TypeError: Cannot read property ‘incoming’ of undefined
at EventBasedGatewayBehavior.js:20
at invokeFunction (EventBus.js:520)
at EventBus…/node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListener (EventBus.js:371)
at EventBus…/node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListeners (EventBus.js:352)
at EventBus…/node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus.fire (EventBus.js:313)
at CommandStack…/node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._fire (CommandStack.js:356)
at CommandStack…/node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._internalExecute (CommandStack.js:404)
at CommandStack…/node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack.execute (CommandStack.js:153)
at Modeling…/node_modules/bpmn-js/node_modules/diagram-js/lib/features/modeling/Modeling.js.Modeling.createConnection (Modeling.js:242)
at createNamedConnect (CustomPalette.js:107)
./node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListener @ EventBus.js:386
./node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListeners @ EventBus.js:352
./node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus.fire @ EventBus.js:313
./node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._fire @ CommandStack.js:356
./node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._internalExecute @ CommandStack.js:404
./node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack.execute @ CommandStack.js:153
./node_modules/bpmn-js/node_modules/diagram-js/lib/features/modeling/Modeling.js.Modeling.createConnection @ Modeling.js:242
createNamedConnect @ CustomPalette.js:107
click @ CustomPalette.js:140
./node_modules/bpmn-js/node_modules/diagram-js/lib/features/palette/Palette.js.Palette.trigger @ Palette.js:302
(anonymous) @ Palette.js:150
(anonymous) @ index.esm.js:359
EventBasedGatewayBehavior.js:20 Uncaught TypeError: Cannot read property ‘incoming’ of undefined
at EventBasedGatewayBehavior.js:20
at invokeFunction (EventBus.js:520)
at EventBus…/node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListener (EventBus.js:371)
at EventBus…/node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus._invokeListeners (EventBus.js:352)
at EventBus…/node_modules/bpmn-js/node_modules/diagram-js/lib/core/EventBus.js.EventBus.fire (EventBus.js:313)
at CommandStack…/node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._fire (CommandStack.js:356)
at CommandStack…/node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack._internalExecute (CommandStack.js:404)
at CommandStack…/node_modules/bpmn-js/node_modules/diagram-js/lib/command/CommandStack.js.CommandStack.execute (CommandStack.js:153)
at Modeling…/node_modules/bpmn-js/node_modules/diagram-js/lib/features/modeling/Modeling.js.Modeling.createConnection (Modeling.js:242)
at createNamedConnect (CustomPalette.js:107)

8

Please do not necrobump old topics. Instead link to this thread from new topic.

9