Template Node Style Demo
Vue Component Node Style Demo
Vue Template Node Style Demo
React Component Node Style Demo
React JSX Component Style Demo
Lit Template Node Style Demo
Demos Overview
Personal Data
Select an employee in the organization chart to show his properties.
Things to Try
- Select a node and take a look at the 'Personal Data' panel to view the node details.
- Click the build button in the 'Personal Data' panel to edit the name and change the status using the dropdown box. The changes are immediately reflected in the node.
-
Take a look at the templates for nodes, labels, and ports in the
style-templatesfile. -
Take a look at method
initConverters()in theTemplateStylesDemofile to see how the data binding converters are initialized. -
Take a look at method
configureStyles()in theTemplateStylesDemofile to see how the template styles are initialized.
Demo
Template Styles
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}"