Set color connection


#1

Hi,
how is it possible to set the color of one or more connections?

I know to get the connection of task like this:
var activityShape = elementRegistry.get(‘someactivityId’);

var outgoing = activityShape.outgoing;
var incoming = activityShape.incoming;

but I don’t know how set the color.

Thanks
Gisuepppe


#2

Hi @Giuseppe_Zarbo and welcome in our forum!

This is not a trivial thing to do, because you first need the graphical SVG representation of the connection:

var outgoingGfx = elementRegistry.getGraphics(outgoing);

Then you can set attributes of the connection path. To change the color you can try this:

outgoingGfx.select('path').attr({stroke: 'blue'});

A more general approach (i.e. if you want one specific color for all sequence flows) would be to change the color in the BpmnRenderer. One way to do this is to add the stroke attribute for the desired elements (in this case all sequence flows) here:


Changing color of tasks upon connection
#3

var activityShape = elementRegistry.get(‘SendTask_09dl0dt’);

var outgoing = activityShape.outgoing;
var outgoingGfx = elementRegistry.getGraphics(outgoing);
outgoingGfx.select(‘path’).attr({stroke: ‘blue’});

================
Hi, may I ask is there something changed?

I can get “outgoing” which is the connection line. but when I call

var outgoingGfx = elementRegistry.getGraphics(outgoing);

outgoingGfx is undefined.

Thanks a lot


Add Marker to Line
#4

@pedesen Please kindly have a look at this post.Thanks a lot


#5

var activityShape = elementRegistry.get(‘StartEvent_1’);

var outgoing = activityShape.outgoing;
outgoing.forEach(function(flow){
    var outgoingGfx = elementRegistry.getGraphics(flow.id);
    outgoingGfx.select('path').attr({stroke: 'blue'});
});

I have found the answer myself.


#6

Great you found the solution yourself!


#7

In my case, colored connections became black immediately after any action. Then, i’ve found another solution:

var a = bpmnRenderer.drawConnection;
var fixConnectionColor = function(visuals, connection){
	var res = a.call(bpmnRenderer,visuals, connection);
	var color = 'black';
	if(Math.random()<.5){
		color = 'green';
	}
	visuals.select('path').attr({stroke: color});
	return res;
}
bpmnRenderer.drawConnection = fixConnectionColor;

#8

@tujger That is an even better better solution. :thumbsup:


#9

looks like now you have api modeling.setColor() to do this?


#10

Yes, exactly as described in our latest release blog post.


#11

I get the error below after using the setColor(), and when I am getting the xml of the diagram using saveXML()…

Any Idea what could be the issue? But the color on the connector is set correctly.

missing namespace information for di = Object on ModdleElement Error: no namespace uri given for prefix
at ElementSerializer.logNamespaceUsed (writer.js:468)
at ElementSerializer.nsAttributeName (writer.js:254)
at writer.js:348
at arrayEach (arrayEach.js:15)
at createForEach.js:15
at ElementSerializer.parseGenericAttributes (writer.js:339)
at ElementSerializer.build (writer.js:210)
at writer.js:405
at arrayEach (arrayEach.js:15)
at createForEach.js:15


#12

Make sure you use the latest bpmn-moddle.


#13

I have applied the patches related to that…that makes it possible to save the color on connector… and also the getXML has that color set and loading again works… but still I have that in the console the error message when the setColor is invoked?