Using templates programmatically

To create a node programmatically, use the ibm_ilog.diagram.Graph.createNode() method. When no argument is specified, the createNode method creates an ibm_ilog.diagram.Node instance and initializes it with the default node template (a rectangular shape and a text shape).
To specify a custom graphical representation, the Graph.createNode method accepts a template parameter that must either be a string or a plain JavaScript object property that conforms to the GFX serialization specification. For example:
var graph = ...
var template = ibm_ilog.diagram.declareTemplate({ shape: {type:'rect'}, fill: 'blue'});
var node = graph.createNode(template);
Note
In this example, the template parameters are defined as strings. The optional ibm_ilog.diagram.declareTemplate() function processes the template for the templating engine, resulting in better performance. See the Bindings section for an example defining template parameters as JavaScript object properties.
To change templates dynamically, use the node.applyTemplate() method. In this way, you can change the graphical representation of the same node instance and keep the link port settings. For example:
var graph = ...
var template = ibm_ilog.diagram.declareTemplate({ shape: {type:'rect'}, fill: 'blue'});
var node = graph.createNode(template);
// ...
// later, the template is changed for a new one
node.applyTemplate({ shape: {type:'ellipse'}, fill: 'red'});
If a subcomponent is referenced from the node instance, that is, the node instance defines a direct reference to one of its children, the template can tag the subcomponent with the dojoAttachPoint property. The value of this property is the property name of the reference defined on the node instance. For example:
[{
   dojoAttachPoint: 'baseShape',
   shape: {
       type: 'rect',
       ...
   }
   ...
}, {
   dojoAttachPoint: 'textShape',
   shape: {
       type: 'text',
       ...
   }
   ...
}]
If you use this template, a new property is set on the node instance for each dojoAttachPoint entry in the template, and it applies to the corresponding shape. After applying the template, you access the rectangular shape through the node.baseShape property and the text shape through the node.textShape property.