Conditions for template structure

GoJS
1

Hi

Is there a way to use conditional function to decide which elements should be added into template based on data from model?

Thank you.

2

The construction of templates is just JavaScript code – typically calls to go.GraphObject.make. So you can do whatever you want.

However, please understand that templates must not be modified once they have been used. (Well, it might work, but it cannot be supported.) If you want different visual structures in your Nodes, use different templates in the Diagram.nodeTemplateMap. But you could build those templates programmatically sharing code.

3

The problem is that this javascript function called only once per template.

We have bindings for properties, e.g. “visible” or “color”.

Do we have property to access list of child shapes (like “innerHtml” for DOM)? This will allow me to create custom binding function to return list of child shapes based on condition.

4

I’m not sure I understand you, but you could bind Panel.itemArray.
Intro to itemArray.
Several samples use this.

5

OK, here is example:

Suppose I have an array of objects:
</span> [{type : "text", text "alpha"}, {type : "text", text : "Beta"}, {type : "button", handler : someFunc}, {type : "text" ... ] <span style=": rgb240, 241, 245;">

And I want to create Vertical Panel with TextBlocks and Buttons depending on “Type” property.

I can workaround this using itemArray by changing structure of the array to:
</span> [ {text : ["Alpha"]}, {text : ["Beta"]}, {button : [someFunc]}, {text : [...]}, ...] <span style=": rgb240, 241, 245;">
and add bindings to both “text” and “button” arrays.

In result I will have only TextBlock or only Button generated per one item in the array.

But this implementation is cumbersome. Could you suggest something simpler?

6

OK, I am assuming that your data is all supposed to be represented inside a single Node. Is that correct?

Let us just work with the data that you started with originally. This array is presumably the value of a property on your node data object. So the model data would be something like:

model.nodeDataArray = [
{ key: 1,
info: [ { type: “text”, text: “Alpha” },
{ type: “button”, handler: someFunc } ],
. . . other properties . . .
},
. . . other node data . . .
];

Does this match up with your expectations? I am just following the samples in the Introduction page about item arrays, as well as samples such as Record Mapper and Entity Relationship.

So here is a working sample: Item Map.

The interesting bit, as you can see in the page’s source code, is:

[code] var itemtemplates = new go.Map(“string”, go.Panel);
itemtemplates.add(“text”,
$(go.Panel,
$(go.TextBlock,
new go.Binding(“text”))
));
itemtemplates.add(“button”,
$(“Button”,
$(go.TextBlock,
new go.Binding(“text”)),
new go.Binding(“click”, “handler”)
));

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    $(go.TextBlock,
      new go.Binding("text", "key")),
    $(go.Panel, "Auto",
      $(go.Shape, { fill: "white" }),
      $(go.Panel, "Vertical",
        { margin: 3, defaultAlignment: go.Spot.Left },
        { itemCategoryProperty: "type", itemTemplateMap: itemtemplates },
        new go.Binding("itemArray", "info"))
    )
  );[/code]

Note that both the Button.click and the button’s TextBlock.text properties are data bound to properties on the item object.

7

Exactly what I’m looking for!

But I didn’t see itemCategoryProperty in mentioned examples nor in the intro examples. Maybe I just missed it…

Thank you very much!