How to change background color and the position of custom elements in the properties palleted?

Developers Modeler
1

Hi All,

I have a requirement like this. see this attachment first. here i have custom elements with the border color red yellow and green.

image

i want to achieve 3 things here.

  1. Change the background color to the boarder color of those three elements.
    2.After they drag and dropped i want to see their background color.
  2. i want to change the position these 2 elements. i want them to be first of this pallet.

Here is my Model element creation.

'create.average-task': {
        group: 'activity',
        className: 'bpmn-icon-service-task yellow',
        title: translate('LM Service Task'),
        action: {
          dragstart: createTask("Liquidity Management","lm_id"),
          click: createTask("Liquidity Management","lm_id"),
        }
},

Here is my custom renderer.

drawShape(parentNode, element) {

    const shape = this.bpmnRenderer.drawShape(parentNode, element);

    const suitabilityScore = this.getSuitabilityScore(element);

    if (!isNil(suitabilityScore)) {

      const color = this.getColor(suitabilityScore);

      const rect = drawRect(parentNode, 50, 20, TASK_BORDER_RADIUS, color);

      svgAttr(rect, {

        transform: 'translate(-20, -10)'

      });

      var text = svgCreate('text');

      svgAttr(text, {

        fill: '#020202',

        transform: 'translate(-15, 5)'

      });

      svgClasses(text).add('djs-label');

      svgAppend(text, document.createTextNode(suitabilityScore));

      svgAppend(parentNode, text);

    }

    return shape;

  }

Any suggestions?
Thanks.

2

Hi,

Do I understand you correctly that you want to apply the color from the palette to the created Task? Int that case, you can change the color with the modeling component, like this:

modeling.setColor(element, {fill: 'green', stroke: 'black'})

i want to change the position these 2 elements

You can register your palette provider with a higher priority. The default priority is 1000: diagram-js/lib/features/palette/Palette.js at main · bpmn-io/diagram-js · GitHub

3

@Martin ,
The problem is this

modeling.setColor(element, {fill: 'green', stroke: 'black'}), How to integrate this?
Any working example on this?

Thanks,
Dasun.

4

Can you give me more details on where you are stuck at? You can inject the modeling component the same way you do with the palette, e.g.:

MyCustomElementProvider.$inject = [
  'palette',
  'modeling',
  // ...
];
5

@Martin

Here is my palette, Here each service task need to be fill with color. I am stuck at here.

export default class CustomPalette {

constructor(bpmnFactory,create, elementFactory, palette, translate) {

    this.bpmnFactory = bpmnFactory;

    this.create = create;

    this.elementFactory = elementFactory;

    this.translate = translate;

    palette.registerProvider(this);

  }

  getPaletteEntries(element) {

    const {

      bpmnFactory,

      create,

      elementFactory,

      translate

    } = this;

    function createTask(name, id) {

      return function(event) {

        const businessObject = bpmnFactory.create('bpmn:ServiceTask');

        businessObject.id = id;

        businessObject.name = name;

        const shape = elementFactory.createShape({

          type: 'bpmn:ServiceTask',

          businessObject: businessObject

        });

        create.start(event, shape);

      };

    }  

     return {

      'create.low-task': {

        group: 'activity',

        className: 'bpmn-icon-service-task blue',

        title: 'OFAC Service Task',

        action: {

          dragstart: createTask("OFAC","ofac_name"),

          click: createTask("OFAC","ofac_name") 

        }

        

      },

      'create.average-task': {

        group: 'activity',

        className: 'bpmn-icon-service-task yellow',

        title: translate('LM Service Task'),

        action: {

          dragstart: createTask("Liquidity Management","lm_id"),

          click: createTask("Liquidity Management","lm_id"),

          

        }

      },

      'create.high-task': {

        group: 'activity',

        className: 'bpmn-icon-service-task green',

        title: translate('FC Service Task'),

        action: {

          dragstart: createTask("Funds Control","fc_id"),

          click: createTask("Funds Control","fc_id")

        }

      }, 

    };

  }

}

CustomPalette.$inject = [
  'bpmnFactory',
  'create',
  'elementFactory',
  'palette',
  'translate'

];
6

You can call the function after creating the shape, like so:

        const shape = elementFactory.createShape({
          type: 'bpmn:ServiceTask',
          businessObject: businessObject
        });

        modeling.setColor(shape, {stroke: 'black', fill: 'green'})

        create.start(event, shape);
7

@Martin

Although i inject like this.

CustomPalette.$inject = [
  'bpmnFactory',
  'create',
  'elementFactory',
  'palette',
  'modeling',
  'translate'
];

And if i do like this

function createTask(name, id) {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:ServiceTask');
        businessObject.id = id;
        businessObject.name = name;
        const shape = elementFactory.createShape({
          type: 'bpmn:ServiceTask',
          businessObject: businessObject
        });
        modeling.setColor(shape, {stroke: 'black', fill: 'green'})
        create.start(event, shape);
      };
    }

This gives an error. like

'modeling' is not defined no-undef

Any suggestion to fix this?

Thanks.

8

Did you also add it to the constructor?

constructor(bpmnFactory, create, elementFactory, palette, modeling, translate) {
9

@Martin,

I added that and its fine but cant we change the color of left side palleted elements? See in the left hand palette blue, green, so these elements wants to fill.

image

Thanks,

10

I think that’s not as easy to set the fill color for the icons, as the icons are created with bpmn-font.
You can add a custom image to it, where you can add the colors manually:

      'create.low-task': {
        group: 'activity',
        title: 'OFAC Service Task',
        imageUrl: yourImageUrl, // Can be a Data URL
        action: {
          dragstart: createTask("OFAC","ofac_name"),
          click: createTask("OFAC","ofac_name") 
        }
1 Like