documentationfor yFiles for HTML 2.6

Storing Business Data for Graph Elements

It is a common task to connect the graph items with the data model they actually represent, i.e. the business data. For this use case all model items provide a so-called user tag property. This property is readable and writable and can take arbitrary objects.

Organization chart as example where business data and graph items are closely connected

In an organization chart, for example, nodes would represent employees and edges would represent the relations between them. You can assign the business data that is behind an employee to the tag of the node instance representing that employee in the graph. The same way you can store the information about the relation between two employees in the tag of the edge which connects the nodes representing these employees.

Setting and retrieving user tags
// creating a new node with an initial tag
node = graph.createNode(new Rect(0, 0, 30, 30), new ShapeNodeStyle(), new Employee('Mildred', 'Shark'))

// alternative using options
node = graph.createNode({ tag: new Employee('Mildred', 'Spark') })

// setting the user tag to an existing node
node.tag = new Employee('Marta', 'Barnes')

// retrieving the user tag
if (node.tag instanceof Employee) {
  const employee = node.tag
  console.log(employee.firstName + ', ' + employee.lastName)
}

Note that you can also set user tags at creation time: all create methods, e.g. createNode(layout: Rect, style: INodeStyle, tag: Object) for nodes, have an overload which allows you to set the initial user tag. Setting user tags at creation time should be preferred to avoid unnecessary changes. Setting the user tag after creation will then dispatch a TagChanged event for the corresponding item. For changes to node tags a listener can be registered with NodeTagChanged, for example.

Another means to associate data with graph elements are specialized maps, as handled in section Associating Data with Graph Elements.

The Organization Chart demo shows how to create a graph according to business data, how to store the data in the user tags of graph elements, and how to create visual representations which use the data stored in the user tags for visualization.