How add color in task

Developers
1

How do I add color in the task I am currently instantiated in in the process flow. As in the example of Camunda.

image

2

Hi @Leonardo, welcome!

Did you already check out this example?

3

Yes, I looked at this example, but I don’t know what to put in “UserTask_1”…
I couldn’t make it work.

4

That’s the ID of the element inside the BPMN 2.0 XML. If you want to color the element, you will have to know it’s ID somehow (or any other way to get the element).

Can you maybe tell a bit more about your use case? Maybe things will become clearer then.

5

I want to do the same thing as done in Camunda Web’s application, the example app they have.
I want to be able to show my user which part of the process the task is in, so that he has a clear reference to where he is.
Image below is from Camunda Web application.

image

6

That looks like a simple overlay, which can be added for a defined element - as described here. In any way, you will have to retrieve the element itself or its id to add stuff like overlays and colors.

7

Hello @Niklas_Kiefer!

Thanks for attention, but I can’t get this to work, it doesn’t apply color to the diagram.

I tried options 2 and 3, because my project don’t use JQuery…

If you have other options for my, I’m open to new ideas.

8

You don’t need JQuery for using overlays, it is just an example. Here is another example for overlays. JQuery just makes it easier to interact with the DOM elements.

If you are stuck with your implementation, feel free to share your current state and we can try to help you in detail.

9

Hello @Niklas_Kiefer!
Thanks for help me!

My problem was with Angular and I managed to apply CSS to change the Task color.

CSS

    ::ng-deep {
        .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
            rx: 14px;
            ry: 14px;
            stroke-width: 3px !important;
            stroke: #155cb5 !important;
            fill: rgba(194, 213, 237, 0.4) !important;
        }
    }

Component.ts

	async ngOnInit() {

		const xml = await this.definicaoProcessoRestService.getXMLProcesso(this.id);

		const viewer = new BpmnJS({
			container: this.el.nativeElement
		});

		try {
			await viewer.importXML(xml.object.bpmn20Xml);

			const canvas = viewer.get("canvas");

			canvas.addMarker(this.taskDefinitionKey, "highlight");

			canvas.zoom("fit-viewport", "auto");

		} catch (err) {
			//error
		}
	}