Data Inspector customization


I’m using a dataInspector like this to view data of the selected nodes. image
I need to add it more properties but somehow I can’t.
Like in the image, I’ve added “ports” to view how many ports the relevant node has. I have a variable containing that data but how should I put it into the inspector?

This is the Inspector sample I’m currently working on

var inspector = new Inspector('ivrInspectorDiv', ivrDiagram, {
    // allows for multiple nodes to be inspected at once
    multipleSelection: true,
    // max number of node properties will be shown when multiple selection is true
    showSize: 20,
    // when multipleSelection is true, when showAllProperties is true it takes the union of properties
    // otherwise it takes the intersection of properties
    showAllProperties: true,
    // uncomment this line to only inspect the named properties below instead of all properties on each object:
    // includesOwnProperties: false,
    properties: {
      // "text": {},
      // key would be automatically added for nodes, but we want to declare it read-only also:
     // "key": { readOnly: true, show: Inspector.showIfPresent },
      // color would be automatically added for nodes, but we want to declare it a color also:
      "color": {
        show: Inspector.showIfPresent,
        type: 'color'
      "isGroup": {
        readOnly: true,
        show: Inspector.showIfPresent
      // "flag": { show: Inspector.showIfNode, type: 'checkbox' },
      "choices": {
        show: false
      }, // must not be shown at all
      // an example of specifying the <input> type
      "password": {
        show: Inspector.showIfPresent,
        type: 'password'

Is there a way to put local variables into “ports”?


I don’t know what it would mean to “show local variables” in the Inspector.
It is only designed to show data properties – i.e. the properties that a particular (or might have.

Hi Walter, thank you for your answer.

What I’m trying to say is that I have a variable x and I need to see in the Inspector when I click on the node. I’m trying to see something that I define, not just properties.

Is that doable? Thanks.

Well, one solution would be to add such a property to that data object. But I don’t know if you have other software that would be confused by adding some properties to the data.

Most apps don’t use the data Inspector forever – they just use it during development as a quick way of seeing what the data is. Most apps prefer the flexibility of implementing their own HTML to show exactly what they want, how they want it (including styling), and how to edit the value (if editable).

I assume you’re saying that it would be better to implement my own HTML inspector instead of Go.DataInspector in my case.

By the way I wonder how can I add new properties to that data object. Is there a tutorial or documentation to follow? How can I achieve it?

Thank you for your help.

In the long run, that’s what most projects would prefer. More flexibility, more pretty. But if the Inspector is OK for you, you can use it forever.

I would think that any JavaScript programmer knows how to set a property on a JavaScript object. Although if you do it too late (i.e. after the Inspector has filled out all of the rows it thinks it needs to show), you might need to force it to update by calling Inspector.updateAllHTML on the Inspector instance.