Defining custom node and link templates

The template is a JSON string that describes the content of a node, link, or subgraph. Default templates are in the ibm_ilog.diagram/templates/template.js source file. Templates can contain bindings to the appearance data properties (see Using templates and bindings).
For applications that require specific graphics for the nodes and links, the default node and link templates, and their properties are not sufficient.
To create custom graphics:
  • Pass a template argument to the createNode(), createLink(), and createSubgraph() functions.
    Here is an example of a custom node template:
    var nodeTemplate = "[{"+
    "            dojoAttachPoint: 'baseShape',"+
    "            shape: {"+
    "                type: 'ellipse',"+
    "                cx: 0,"+
    "                cy: 0,"+
    "                rx: 10,"+
    "                ry: 10"+
    "            },"+
    "            stroke: {"+
    "                color: '#00',"+
    "                width: 3"+
    "            },"+
    "            fill: '{{backgroundColor}}',"+
    "            selectedStyle: {"+
    "                fill: '{{selectedBackgroundColor}}'"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: 'textShape',"+
    "            shape: {"+
    "                type: 'text',"+
    "                text: '{{label}}',"+
    "                x: 5,"+
    "                y: 30,"+
    "                align: 'middle'"+
    "            },"+
    "            fill: '{{textColor}}',"+
    "            font: {"+
    "                type: 'font',"+
    "                weight: 'bold',"+
    "                size: '12pt',"+
    "                family: 'Arial'"+
    "            }"+
    "        }]";
    
    ...
                var node = graph.createNode(nodeTemplate);
    When you create custom node templates, note that:
    • The dojoAttachPoint fields identify the parts of the node that are available as JavaScript properties (see Using templates and bindings). All nodes must have at least a baseShape part defined.
    • The values between double curly braces, for example {{backgroundColor}}, are bindings to the node properties (see Using templates and bindings).
    • The selectedStyle fields define the look of the node when it is selected (see Selecting objects)
    Here is an example of a custom link template:
    var linkTemplate = "[{"+
    "            dojoAttachPoint: '_path',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: 0,    y: 0}, {x: 100, y: 0}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: {{strokeWidth}},"+
    "                style: 'ShortDot'"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: {{selectedStrokeWidth}},"+
    "                    style: 'ShortDot'"+
    "                }"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: '_endArrow',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: -8,y: 5}, {x: 0,y: 0}, {x: -8,y: -5}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: 2"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: 2"+
    "                }"+
    "            }"+
    "        }]";
    
    ...
                var link = graph.createLink(linkTemplate);
Here is the resulting graph when using the custom node and link templates:
A graph
with customized nodes and links. There are four circular nodes each
having a label below them: Node 1, Node 2, Node 3, Node 4. Node 1
is located on the left, Node 2 at the top, Node 3 at the bottom, and
Node 4 on the right of the graph. Node 1 is connected to Node 2 and
to Node 3 by dotted links with an arrow tip. Node 2 and Node 3 are
connected to Node 4 by dotted links with an arrow tip.