How to add color to BPMN diagram for dynamic XML

Developers Modeler
1

I’m trying to add color to my task created in BPMN.js and below mentioned are the scenario.

  1. I’m getting XML from backend to create BPMN diagram and i need to show the status of task in some color based on status like(red,green,blue etc…) in my UI. Am appending classname attribute in my XML against the particular task to add CSS for the added classname. But the classname was not appending in my DOM element.
<?xml version="1.0" encoding="UTF-8"?> 
        <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_0xcv3nk" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.0.0-dev">
        <bpmn:process id="Process_0sckl64" isExecutable="true">
        <bpmn:startEvent id="StartEvent_1" className="taskstatus" />
        </bpmn:process>
        <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0sckl64">
        <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="179" y="159" width="36" height="36" />
        </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
        </bpmndi:BPMNDiagram>
        </bpmn:definitions>
2

Adding classNames won’t work, since this is not valid BPMN 2.0 XML.

The visual definition of shapes are inside the bpmndi part of the XML. The bpmn-js Modeler will then handle those accordingly. As an example

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" id="Definitions_17576rk" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.3.0-nightly.20200929">
  <bpmn:process id="Process_0dujmh1">
    <bpmn:startEvent id="StartEvent_1" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0dujmh1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1" bioc:stroke="rgb(67, 160, 71)" bioc:fill="rgb(200, 230, 201)">
        <dc:Bounds x="179" y="79" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>

Note the bioc:stroke and bioc:fill properties in the bpmndi:BPMNShape element.

You can use this sandbox to see how this will be rendered in the Modeler.

3

Thanks Niklas,

I have understood your comments. But i want to set color based on task status like (COMPLETED,FAILURE,INPROGRESS).

  1. Status of created task will come from backend.
    For Example: I have created one task in BPMN and passed the created XML to backend. In backend the status of task is checked in DATABASE. If the status of task is COMPLETED then i need to show in GREEN color. Then if the status is FAILURE i need to show in RED color.

How to send the task status in XML and based on status how to change color?

4

This would technically possible via custom element properties and then render your element based on this property.

However, another solution in your case would be so set the bioc:stroke and bioc:fill properties in the backend based on the task status you get from the database. If you anyway set contents to the XML (task status), why not then directly set the color in the di information?

Then you would always get valid BPMN XML from the backend with the correct color and the Modeler would always display it. That would be a cleaner, and BPMN 2.0 compliant in my opinion.

5

Thanks Niklas,

Your solution is working.

6

Niklas,

Thanks for letting us know to set the bioc:stroke and bioc:fill properties in backend.

Is there any way that we can add these properties to the already generated BPMN xml in backend. I mean is there any java code to do that.

7

This should be possible. There are for sure some XML parsing libraries for Java out there who can do it, e.g. https://github.com/camunda/camunda-bpm-platform/tree/master/model-api/bpmn-model

But I’m not a Java expert. It’s also not related to bpmn.io