Adding links of different templates dynamically

GoJS
1

My diagram lets the user to draw different types of links dynamically.

Here is my code :

myDiagram.addDiagramListener("LinkDrawn", function(e) {
  var link = e.subject;
   var popUpList = $('<div>Please select the type of link</div>');
   popUpList.dialog({
           autoOpen: false, 
           buttons: {
              "Type1": function() {addLinkLabel(link,"type1");$(this).dialog("close");},
               "Type2": function(){addLinkLabel(link,"type2");$(this).dialog("close");}
           },   
       });
    
    popUpList.dialog("open")    
});

function addLinkLabel(link,type){
    
    var label = prompt("Enter label text. Leave it blank for no label", "");
    
    myDiagram.startTransaction("add link data");
    myDiagram.model.setDataProperty(link.data, "category", type);
    if(label!=""){ 
        myDiagram.model.setDataProperty(link.data,"textVisible",true);
        myDiagram.model.setDataProperty(link.data,"text",label);
    }
    console.log(link.data.category)
    myDiagram.commitTransaction("add link data");
}`

My default linktemplate sets the link visible property to false. I think category property is not changing here.

As you can see, the linkdrawn event handler will show a pop up to select the type of link here.
It will then set the dataproperty of the model.

On selecting a particular type, nothing is displayed. But the log in the console is showing the link object which was just created.

2

Categories are special, you need to call setCategoryForLinkData instead of setDataProperty