[SOLVED] Add property dinamically to a Link


I want to add a new property dinamically from a jquery element value to a Link when I draw a new one


  1. I have 2 nodes
  2. In my html diagram page I have a < input type=“hidden” id=“element_id” value=“X” />
  3. Always when I draw a new link to join the 2 initial nodes, add a new property to Link like { … ,“new_prop”: $("#element_id").val() }

How can I do this?


You can modify the LinkingTool.archetypeLinkData object. That’s the JavaScript object that is copied by LinkingTool.insertLink calling GraphLinksModel.copyLinkData.

For example, the Grafcet diagrams sample, http://gojs.net/latest/samples/grafcet.html, has three different selection adornment buttons, each of which creates a different kind of link. The code assigns the category of the link, so that a different template is chosen. But the same technique applies to modifying any other property of the data.

I added a new property into the Links by

var tool = flowchart.toolManager.linkingTool;
tool.archetypeLinkData = { new_property: ‘new_value’ };

This Links are within a Pool like the sample: http://gojs.net/latest/samples/swimLanes.html

Is possible add the Pool key inside that new_property in Links? or maybe a “group” property like nodes

I want to know that Pool belong drawn links

Well, Part.containingGroup for any Node or Link will return the Group, if any. Note that links that connect nodes that are in different groups belong to the common container, which might be null if no such group exists.

There’s no reason for that information to be stored on the link data objects in the model, because it is automatically calculated for you, accessible as the Part.containingGroup property.


Finally I solved with:

var tool = flowchart.toolManager.linkingTool;
tool.archetypeLinkData = { pool: "" }; // updated in LinkDrawn event

// add Pool key to Links in diagram
flowchart.addDiagramListener("LinkDrawn", function (e) {
	var link = e.subject;
	var pool = flowchart.findNodeForKey(link.containingGroup.data.key);
	flowchart.model.setDataProperty(link.data, "pool", pool.data.group);

Watch out – link.containingGroup may be null.

Furthermore as nodes change groups, connected links may change what group they are in, including none at all.