Further customization of ContextPad

[diego]

Hey there, I’d appreciate some advice,

I can add or remove entries to the ContextPadProvider, without any problem, I used an custom ContextPadProvider like on this example: https://codesandbox.io/p/sandbox/custom-palette-context-pad-remove-f6wy31

I want to know, is there a way to fully customize the HTML rendered on the context pad? I’m trying to achieve something like this:

My goal is to put an small title on these icon groups.

[SeriousAcceptance]

I can’t answer your question, but I just wanted to say I think that’s a nice improvement you’re working on.

I think the UI can be a bit overwhelming/confusing when people are new to bpmn-js, and moreso if they’re also new to BPMN.
What you’re building will help with that!

[diego]

I think I got one solution… was a bit hard to get there, since I needed to understand how the library works at it’s core and do some research.

But basically, the methods from context pad can be overriden (more specifically, from diagram-js)

I am overriding diagram-js methods, since the BaseContextPad are imported from diagram-js/lib/features/context-pad/ContextPad

You would need to create a custom module (on my example, I called it AdvancedContextPad), with a class that extends the BaseContextPad from diagram-js and then, override this method specifically: _updateAndOpen

Grab the method’s source from diagram-js source code and modify the rendered HTML to your needs.

Update:
Example on codepen: https://codesandbox.io/p/sandbox/customcontextpad-bpmn-js-g32hqx