Conditional Property in Inspector


Below is my Inspector Properties.

myInspector = new Inspector(“myInspector”, myDiagram,
properties: {
id: { readOnly: true,show: Inspector.showIfNode},
key: { show: false },
pos: { show: false },
name: { show: Inspector.showIfNode },
text: { show: Inspector.showIfNode },
icon: { show: Inspector.showIfNode, type: “select”, choices: IconNames },
//color: { type: “select”, choices: ColorNames },
color: { show: true, type: ‘color’ },
//caption: { show: Inspector.showIfNode },
//imgsrc: { show: Inspector.showIfNode },
from: { show: false },
to: { show: false },
points: { show: false },
fromSpot: { show: Inspector.showIfLink, type: “select”, choices: SpotNames },
toSpot: { show: Inspector.showIfLink, type: “select”, choices: SpotNames },
//category: { show: Inspector.showIfLink, type: “select”, choices: ConnectorNames },
toarrowOption: { show: Inspector.showIfLink, type: “select”, choices: toArrowOptionNames },
fromarrowOption: { show: Inspector.showIfLink, type: “select”, choices: fromArrowOptionNames },
dash: { show: Inspector.showIfLink }
propertyModified: onSelectionChanged

Inspector has show property which is set based on Inspector.showIfLink,Inspector.showIfNode .
I had icon property and based on the selection I want to make some property visible or invisible.
eg: icon will have Inverter,Battery etc option which user can select. If user select Inverter I want some property ‘P1’ to be visible but if user select Battery then property ‘p1’ should be invisible.


Use a custom predicate for each of those property descriptors, instead of ones such as Inspector.showIfNode.

Thanks Walter… I am able to Achieve using custom predicate.
it is possible I can get all types (please share the link for the same) like we have color type so I can create interactive user friendly as show in below image i.e. instead of name of arrow user can select the shape of arrow they have to use.

color: { show: true, type: ‘color’ }

Please share any tutorials/docs/example for the same


The complete source code for the Data Inspector is right there in the extensions or extensionsJSM subdirectory. We figure that if you want your own nice UI for showing and editing property values you would want to implement it yourself – there’s no way that the Inspector could be suitable for most applications.

But if you want a quick-and-dirty color picker in the Inspector, set { type: "color" }.

You might also be interested in how the Block Editor supports customizing the nodes and the links via context menu: Simple Block Editor

Hi Walter,

I am trying to set the height of my icon(shape) dynamically but it is not working.

My node template is below:

myDiagram.nodeTemplate =
$(go.Node, “Auto”,
locationObjectName: “PORT”,
locationSpot: go.Spot.Top,
linkConnected: updatePortHeight,
linkDisconnected: updatePortHeight,
$(go.TextBlock, { margin: 4, width: 140 },
new go.Binding(“text”, “”, data => data.text + “:\n\n” + data.description))
new go.Binding(“location”, “pos”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, “Vertical”,
width: 50, height: 40,
stroke: null, strokeWidth: 0, fill: “gray”,
portId: “”, cursor: “pointer”, fromLinkable: true, toLinkable: true
new go.Binding(“height”, “icon”, data => data.height),
new go.Binding(“width”, “icon”, () => 70),
new go.Binding(“fill”, “color”),
new go.Binding(“geometry”, “icon”, geoFunc)),

                    font: "Bold 14px Lato, sans-serif",
                    textAlign: "center",
                    margin: 3,
                    maxSize: new go.Size(100, NaN),
                    alignment: go.Spot.Top,
                    alignmentFocus: go.Spot.Bottom,
                    editable: true
                new go.Binding("text").makeTwoWay())
        //new go.Binding("height", "node", () => 160),

what am I missing?


Twice you misspelled the “number” type.

The Data Inspector doesn’t really support nested structures. Your node data seems to have a property named “icon” that is an Object with the property “height”. You will have to extend the implementation of DataInspector.js to show what you want for that “icon” data property.

got it. Thanks