How to use inspector on Node's itemArray?

Hi, I’m using inspector and having some questions.

Here’s my Node object:

var templateConditionNode = 
          $(go.Node, "Auto",
        		   {contextMenu: nodeMenu},
               new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
               $(go.Panel, "Auto",
            		   $(go.Shape, "RoundedRectangle",
                               { /*becasue shape has a black fill by default, so set to null if tranparency is required */
                                 fill:"darkblue", stroke: "#151B54", strokeWidth:3, column:1,stretch: go.GraphObject.Fill,
                                 minSize: new go.Size(110, 70)
                                },
                   ),
                   $(go.TextBlock, 
                           { name:"TEXT", margin: 3, 
                             stroke:"white", alignment: go.Spot.Top,
                             editable: true, font: "bold 16px Segoe UI,sans-serif", 
                            }, 
                            new go.Binding("text", "name").makeTwoWay(),
                            new go.Binding("scale", "scale").makeTwoWay(),
                            new go.Binding("font", "font").makeTwoWay(),
                            new go.Binding("stroke", "stroke").makeTwoWay()
                          ),
                ),
                 
                 // the Panel holding the right port elements, which are themselves Panels,
                 // created for each item in the itemArray, bound to data.rightArray
                 $(go.Panel, "Vertical",
                   new go.Binding("itemArray", "rightArray"),
                   {
                	   alignment:  go.Spot.Right,
                	   alignmentFocus: go.Spot.Bottom, margin:new go.Margin(25, 0, 0, 10),
                     itemTemplate:
                       $(go.Panel, "Table",
                         {
                           _side: "right",
                           fromSpot: go.Spot.Right,
                           fromLinkable: true, toLinkable: true, cursor: "pointer"
                         },
                         new go.Binding("portId", "portId"),
                         $(go.Shape, "RoundedRectangle",
                                 { /*becasue shape has a black fill by default, so set to null if tranparency is required */
                                   fill:"lightgray", stroke: "grey", strokeWidth:3, margin:3,
                                   name:"PANEL", stretch: go.GraphObject.Fill, minSize: new go.Size(80, 30),
                                   alignment: go.Spot.Bottom
                                  }
                              ),
                         $(go.TextBlock,
                        		 {
                        	     row:0, column:0, editable: true, margin: 10, isMultiline: false, textAlign: "center"
                        	   },
                             new go.Binding("text", "condition").makeTwoWay()
                         ),
                         $(go.Shape, "Circle",
                           {
                        	   row:0,column:1,
                             stroke: "DarkOrange", strokeWidth: 2,
                             desiredSize: new go.Size(15, 15),
                             margin: new go.Margin(1, 0)
                           },
                           new go.Binding("fill", "portColor")
                         )
                       )  // end itemTemplate
                   }
                 ),
                 $(go.Panel, "Vertical",
                   new go.Binding("itemArray", "leftArray"),
                   {
                	   alignment: go.Spot.Left,
                     itemTemplate:
                       $(go.Panel,
                         {
                           _side: "left",
                           toSpot: go.Spot.Left,
                           fromLinkable: true, toLinkable: true, cursor: "pointer"
                         },
                         new go.Binding("portId", "portId"),
                         $(go.Shape, "Circle",
                           {
                             stroke: "DarkOrange", strokeWidth: 2,
                             desiredSize: new go.Size(15, 15),
                             margin: new go.Margin(0,100,0,0)
                           },
                           new go.Binding("fill", "portColor"))
                       )  // end itemTemplate
                   }
                 )
               
               // end Vertical Panel
           );

Inspector :

var inspector = new Inspector('myInspectorDiv', myDiagram,
		    {
		      // allows for multiple nodes to be inspected at once
		      multipleSelection: true,
		      // uncomment this line to only inspect the named properties below instead of all properties on each object:
		      includesOwnProperties: false,
		      properties: {
		          "fill": { show: Inspector.showIfPresent, type: 'color' }
		      }
		    });

I want to edit the condition on my node’s rightArray, so on the properties of inspector, I try to put the “rightArray.condition” or “rightArray” but it doesn’t make any sense by just showing [object Object].

Is it possible to edit some attribute on itemArray? On my case,I want to create a decision Node (logic/ if-else node), I can add new condition on my node by clicking the Add button on contextMenu, so if there is five condition on one Node, inspector will have five condition edit columns for user to input. Thanks for your answer.

截圖 2022-02-22 上午9.52.01
[click ADD button will add new condition panel]


[node’s attribute on myDiagram]

截圖 2022-02-21 下午5.35.53
[on the first condition the next node will be queue, second will be DB and so on]

The DataInspector extension does not support viewing or editing an Array of Objects. I suggest that you implement what you want in HTML.

The DataInspector really is just meant as an expediency to quickly get your app some data viewing and data editing capabilities. In the long run you’ll want to provide custom HTML for showing and for modifying your data.

@walter Thanks for your quickly reply, I wonder is there any samples that I can use to create a decision node? Because we want to build a chatbot for our customer.

I hope you have seen IVR Tree, although there the TreeLayout has angle: 90 instead of the 0 angle that you seem to want. Or maybe you don’t want an automatic layout at all.

Also you may have seen Record Mapper

That’s what i want ! Thanks for your help.