How to add colorpad in bpmn

I want to add Custom Color pad in bpmn .

in my source…

export default class CustomContextPad {

constructor(config, contextPad, create, elementFactory, injector, translate, modeling) {

this.create = create;

this.elementFactory = elementFactory;

this.translate = translate;

this.modeling = modeling;

if (config.autoPlace !== false) {

  this.autoPlace = injector.get('autoPlace', false);




getContextPadEntries(element) {

const {






} = this;

function appendServiceTask(event, element) {

  if (autoPlace) {

    //const shape = elementFactory.createShape({ type: 'bpmn:TextAnnotation' });

    modeling.setColor(element, {

      stroke: 'black',

      fill: 'black'


    //autoPlace.append(element, shape);

  } else {

    appendServiceTaskStart(event, element);



function appendServiceTaskStart(event) {

  const shape = elementFactory.createShape({ type: 'bpmn:TextAnnotation' });

  create.start(event, shape, element);


return {

  'colorlist': {

    group: 'model',

    className: 'bpmn-icon-color',

    title: translate('Set Color'),

    html : '<div class="entry"><button class="picker" id="picker1">11</button></div>',

    action: {

      click: appendServiceTask,

      dragstart: appendServiceTaskStart






CustomContextPad.$inject = [









i want to make this images…

The code snippet you posted is not formatted correctly. To share code examples that illustrate your problem, please adhere to the following rules:

  • Do not post screenshots of your code
  • Focus your snippets on the few lines that matter for the topic at hand
  • Format your code

Please update your post according to these rules. We may not be able to help you otherwise. In extreme cases we may also close your topic if we regard it as spam.

Hint: To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Thanks :heart: