Add features to existing elements


I’ve found several guides on the github, such as this one bpmn-js-examples/custom-elements at main · bpmn-io/bpmn-js-examples · GitHub which explains how to add custom elements, but I haven’t found any guide on how to add custom features to existing elements.

Specifically, what I want to add is two things:

  1. I want to add vertical dividers to pools/participants. Basically just draw vertical lines on top of the element, with a small label at the top of each column and optionally adjustable widths for each column, although adjustable widths aren’t absolutely required. and,
  2. I want to add a small menu on events and tasks which opens a small popup where the user can link them to one of our features, to allow live updating (changing color etc of the element depending on their state)

I was hoping these changes don’t require me to completely re-implement all of the existing elements from scratch. I was hoping I could either make a new element which inherits from existing elements somehow (but I haven’t seen inheritance mentioned anywhere), or even better, if I could just add these features to existing elements.

If guides for this exists somewhere, I haven’t been able to find them. None of the guides here seem to match what I need GitHub - bpmn-io/bpmn-js-examples: Examples how to use bpmn-js


What you want to do boils down to different things:

  • Customize the rendering of your elements, cf. BpmnRenderer
  • Add custom controls to your elements, similar to overlays, cf. Overlays
  • Add a popup to you element, cf. PopupMenu or Overlays

Follow the bpmn-js walkthrough first to understand how the toolkits compose.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.