BPMN Color Picker

[Kratos]

Howdy Forum,

I am trying to add a color picker in Modeler with which it can be used to color all the elements in a Swimlane.

Example:

Color Picker Reference:

Please let me know if anyone has been able to figured out a way to achieve it.

Thanks!

[Niklas_Kiefer]

Did you check out this extension? GitHub - bpmn-io/bpmn-js-color-picker: A simple color picker for your BPMN elements.

It showcases very nicely how to add such a color picker as a bpmn-js extension.

[Kratos]

Thanks for sharing the extension, but while going through the example directory, couldn’t find the ColorPickerModule in it. Meanwhile added the colorpicker-css, and the flow is coming like this.

[Niklas_Kiefer]

@Kratos

but while going through the example directory, couldn’t find the ColorPickerModule in it

What about the ColorPopupProvider and the ColorContextPadProvider modules? These are adding the editor controls to set colors.

[StafleuBuitendag]

Thank you for providing a link to the extension.

Do you know of a way to change the color palette used?

I see I can change it by a config in the constructor, but I’m battling to figure where that config comes from and how it gets put into the constructor by the modeler parent.

[philippfromme]

BPMN Color Picker config

Passing configuration when creating bpmn-js instance is an underdocumented feature. When you create it, you can pass any configuration property you want (e.g. foobar will be available as config.foobar). To configure the colors, do: import BpmnModeler from 'bpmn-js/lib/Modeler'; import BpmnColorPickerModule from 'bpmn-js-color-picker'; const modeler = new BpmnModeler({ additionalModules: [ BpmnColorPickerModule ], colorPicker: [{ label: 'Fuchsia', fill: 'white', stroke: '…