Template Styles Demo [yFiles for HTML]

This demo shows how to create SVG templates for nodes, labels and ports. It also shows how to customize various aspects of template styles.

Template Styles

Template Styles use SVG snippets ('templates'), defined in either HTML or a string argument, to create the visualization for nodes, labels, ports or table stripes.

Data Binding

SVG attributes can be bound to graph item data or to contextual information, using a special binding syntax, e.g.
fill="{Binding myColor}"
The bound values can be manipulated and processed using converters. This makes it possible to set visual attributes based on the item data, e.g. you can link the background color of an employee node to the employee's business unit.

Template Bindings

The binding context gives you information about the current state, e.g. the zoom level, the item size, the item's selection state, etc. Template bindings are written like this:
width="{TemplateBinding width}"

Automatic Property Changes

The interface IPropertyObservable gives you the ability to update bindings automatically when the item's business data changes. For this reason, the business data in this demo is wrapped by class Employee.

Legal Disclosure | Privacy Policy | View on GitHub

Select an employee in the organization chart to show his properties.

Things to Try

Select a node and take a look at the Properties Panel to see the node details.
Click the 'settings' button to edit the name and change the status using the dropdown box. The changes immediately reflect in the node.
Take a look at the templates for nodes, labels and ports in index.html.
Take a look at Employee.js to see how the IPropertyObservable interface is implemented.
Take a look at method initConverters() in TemplateStylesDemo.js to see how the data binding converters are initialized.
Take a look at method configureStyles() in TemplateStylesDemo.js to see how the template styles are initialized.