Add features to existing elements

[Divran]

Hi

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

thanks

[nikku]

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.