Add, edit and save in IVR tree

Hi,
Is there a way to add nodes,link, edit the existing nodes and save the final in to JSON in https://gojs.net/latest/samples/IVRtree.html

I am looking for something like https://gojs.net/latest/samples/flowchart.html in IVR tree (https://gojs.net/latest/samples/IVRtree.html)

Saving a diagram really means saving its model – the value of Diagram.model. Normally this is accomplished by calling Model.toJson, but you can implement your own persistence/serialization mechanisms if you want. Loading diagrams then just a matter of calling the static function Model.fromJson and then assigning Diagram.model. Please read https://gojs.net/latest/intro/usingModels.html#SavingAndLoadingModels. Many of the samples demonstrate this, and many of them do so by reading and writing a <textarea> on the sample page itself.

So for any diagram that is an editor, supporting modification of the diagram is mostly a matter of making sure the important state is saved in the model. This happens automatically for most of the predefined operations that the user can do using either the CommandHandler or any of the Tools. This includes linking, relinking, and link deletion operations.

For some operations, such as editing text, you need to set or bind TextBlock.editable to true and add a TwoWay Binding on the TextBlock.text property. Again, this is demonstrated in many of the samples, including the Flowchart sample that you mention. Just look at the node templates.

For adding new nodes, there are many ways to do that. Many samples demonstrate doing so by drag-and-drop by using a Palette. See https://gojs.net/latest/samples/index.html#palette.

Some samples demonstrate it by enabling the ClickCreatingTool – look for initializations of that tool.

Another way of adding nodes is by having a command which adds a node and a link from an existing node to the new node. See for example the “addChild…” HTML button in the first example at https://gojs.net/latest/intro/transactions.html. You can either have that code be called from an HTML button or from a GoJS “Button” that is present on the Node itself. The “Button” can be present permanently or only show up when the node is selected. The latter is demonstated by the State Chart sample, https://gojs.net/latest/samples/stateChart.html, although that is not in the context of a tree-structured diagram. Actually the Mind Map sample, https://gojs.net/latest/samples/mindMap.html, demonstrates the use of such a “Button” in a tree-structure.

For adding items to a list, it depends on whether you want the list to reflect exactly all of the choices (tree-children) that come out from a node. If you do want them to correlate, your node and link adding code invoked by the command can also update the item Array of the node data. Call Model.addArrayItem. See https://gojs.net/latest/intro/itemArrays.html. Or call Model.removeArrayItem if you want to remove an item from a list.

You might want to read https://gojs.net/learn first and then more pages of the Introduction, starting at https://gojs.net/intro, that apply to what you want to build. Look more at the existing samples for examples of particular techniques.

Hi, I tried to add using suggested options. Uploaded my HTML file here: https://jsfiddle.net/5e89o0jd/

  1. Can you let me know how to connect nodes with key 8,9,10,111 from the UI. with tree model(Like the group of nodes with key 11,12,13,15)

  2. And also is there a way to dynamically from the UI add text to following panel of the node with "Terminal " category.

             $(go.Panel, "Table",
               { stretch: go.GraphObject.Horizontal },
               $(go.TextBlock, "",
                 {
                   alignment: go.Spot.Left,
                   font: "10pt Verdana, sans-serif"
                 }
               ),
               $("PanelExpanderButton", "COLLAPSIBLE",  // name of the object to make visible or invisible
                 { column: 1, alignment: go.Spot.Right }
               )
             ), // end Table panel
    

Tried multiple options but didn’t work. Your help here will be very much appreciated

You have set GraphObject.fromLinkable on your new node template’s port (i.e. the object with portId set to a string), so the user can start drawing new links from that port. But you haven’t set toLinkable to true, so users cannot draw new links (or reconnect existing links) to that port.

General discussion about linking permissions is at https://gojs.net/latest/intro/validation.html