Conditional label on links

In a flowchart, I have a validation figure that works as a conditional. The idea is to have a label of “Yes” and “No” on the link. Currently, the label appears but always as “Yes”, and I tried editing one of those “Yes” labels to say “No”. When exporting the diagram, I notice that the link’s text property is saved as “No”, but the “Yes” label is not retained. How can I fix this?

and this is the export json:

{ "class": "_GraphLinksModel",
  "linkFromPortIdProperty": "formPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
{"category":"Start","text":"Start","question_type_id":"Start","key":-1,"loc":"-116.546875 -430.77734375"},
{"category":"Validation","text":"Validation","question_type_id":"Validation","key":-2,"loc":"-116.30078125 -330.515625"},
{"category":"Question","text":"Question","question_type_id":"Text","key":"-3","loc":"-223.015625 -220.68359375","translate":"rr","bgMedia":"","bgMediaES":"","required":false,"length":""},
{"category":"Question","text":"Question","question_type_id":"Text","key":"-4","loc":"1.97265625 -225.8515625","translate":"rr","bgMedia":"","bgMediaES":"","required":false,"length":""},
{"category":"End","text":"End","question_type_id":"End","key":-5,"loc":"-106.421875 -80.828125"}
],
  "linkDataArray": [
{"from":-1,"to":-2,"formPort":"B","toPort":"T","points":[-116.546875,-393.12609668110696,-116.546875,-383.12609668110696,-116.546875,-372.69586084055345,-116.30078125,-372.69586084055345,-116.30078125,-362.265625,-116.30078125,-352.265625]},
{"from":-2,"to":"-3","formPort":"L","toPort":"T","visible":true,"points":[-158.05078125,-330.515625,-168.05078125,-330.515625,-223.01562499999997,-330.515625,-223.01562499999997,-290.8241834016766,-223.01562499999997,-251.13274180335318,-223.01562499999997,-241.13274180335318]},
{"from":-2,"to":"-4","formPort":"R","toPort":"T","visible":true,"points":[-74.55078125,-330.515625,-64.55078125,-330.515625,1.97265625,-330.515625,1.97265625,-293.4081677766766,1.97265625,-256.30071055335316,1.97265625,-246.30071055335318],"text":"No"},
{"from":"-3","to":-5,"formPort":"B","toPort":"L","points":[-223.01562499999997,-200.23444569664682,-223.01562499999997,-190.23444569664682,-223.01562499999997,-80.828125,-186.46871801864268,-80.828125,-149.92181103728538,-80.828125,-139.92181103728538,-80.828125]},
{"from":"-4","to":-5,"formPort":"B","toPort":"R","points":[1.97265625,-205.40241444664682,1.97265625,-195.40241444664682,1.97265625,-80.828125,-30.474641356357303,-80.828125,-62.921938962714606,-80.828125,-72.9219389627146,-80.828125]}
]}

Here is the link template

        diagram.linkTemplate = $(
          Link,
          {
            routing: Routing.AvoidsNodes,
            curve: Curve.JumpOver,
            corner: 5,
            toShortLength: 4,
            relinkableFrom: true,
            relinkableTo: true,
            reshapable: true,
            resegmentable: true,
            mouseEnter: (e, link: any) =>
              (link.findObject('HIGHLIGHT').stroke = 'rgba(30,144,255,0.2)'),
            mouseLeave: (e, link: any) =>
              (link.findObject('HIGHLIGHT').stroke = 'transparent'),
            selectionAdorned: false
          },
          new Binding('points').makeTwoWay(),
          $(
            Shape, // the highlight shape, normally transparent
            {
              isPanelMain: true,
              strokeWidth: 8,
              stroke: 'transparent',
              name: 'HIGHLIGHT'
            }
          ),
          $(
            Shape, // the link path shape
            { isPanelMain: true, stroke: 'gray', strokeWidth: 2 },
            new Binding('stroke', 'isSelected', (sel) =>
              sel ? 'dodgerblue' : 'gray'
            ).ofObject()
          ),
          $(
            Shape, // the arrowhead
            { toArrow: 'standard', strokeWidth: 0, fill: 'gray' }
          ),
          //descomente si quiere tener label Yes/No en la figura de validacion 
          $(
            Panel,
            'Auto', // the link label, normally not visible
            {
              visible: false,
              name: 'LABEL',
              segmentIndex: 2,
              segmentFraction: 0.5
            },
            new Binding('visible', 'visible').makeTwoWay(),
            $(
              Shape,
              'RoundedRectangle', // the label shape
              { fill: '#F8F8F8', strokeWidth: 0 }
            ),
            $(
              TextBlock,
              'Yes', // the label
              {
                textAlign: 'center',
                font: '10pt helvetica, arial, sans-serif',
                stroke: '#333333',
                editable: true
              },
              new Binding('text').makeTwoWay()
            ),
          )
        );

and here the dataModel:

 const dataModel = [
    {
      category: "Start",
      text: "Start",
      question_type_id: "Start",
    },
    {
      category: "Question",
      text: "Question",
      question_type_id: "",
    },
    {
      category: "Validation",
      text: "Validation",
      question_type_id: "Validation",
    },
  ];

finally the validation figure:

        diagram.nodeTemplateMap.add(
          'Validation',
          $(
            Node,
            'Table',
            nodeStyle(),
            $(
              Panel,
              'Auto',
              $(
                Shape,
                'Cylinder1',
                {
                  desiredSize: new Size(80, 40),
                  fill: '#FFF',
                  stroke: '#2F9ECA',
                  strokeWidth: 3.5
                },
                new Binding('figure', 'figure')
              ),
              $(
                TextBlock,
                textStyleRegular(),
                {
                  margin: 8,
                  wrap: TextBlock.WrapFit,
                  editable: true
                },
                new Binding('text').makeTwoWay()
              )
            ),
            makePort('T', Spot.Top, Spot.MiddleTop, true, true),
            makePort('L', Spot.Left, Spot.MiddleLeft, true, true),
            makePort('R', Spot.Right, Spot.MiddleRight, true, true),
          )
        );```

The label defaults to showing “Yes” if it is visible, so doesn’t the diagram have the right Yes labels when loaded?

If you are merely interested in the model data having “complete” sets of properties, why not provide those properties when those link data objects are created? For user-drawn links, set LinkingTool.archetypeLinkData to a JavaScript Object that has all of the default property values that you want: LinkingTool | GoJS API

You can set that in your Diagram initialization:

    "linkingTool.archetypeLinkData":
       { from: undefined, to: undefined, fromPort: "", toPort: "",
         points: [], visible: false, text: "Yes" },

Here is the translation for your request:

“I have implemented what you suggested without any effect. What I need is the behavior from this example https://gojs.net/latest/samples/flowchart.html, where when adding a conditional figure and right-clicking, I can add the decision label ‘Yes’ or ‘No’. In the JSON format of that example, the links contain {"from":-14,"to":-5,"text":"Yes"}, {"from":-14,"to":-6,"text":"No"}. The text label in my case currently has the property "visible":true and only stores the text for ‘No’, but not for ‘Yes’.”

{"from":-2,"to":"-3","formPort":"L","toPort":"T","visible":true,"points":[-158.05078125,-330.515625,-168.05078125,-330.515625,-223.01562499999997,-330.515625,-223.01562499999997,-290.8241834016766,-223.01562499999997,-251.13274180335318,-223.01562499999997,-241.13274180335318]},
{"from":-2,"to":"-4","formPort":"R","toPort":"T","visible":true,"points":[-74.55078125,-330.515625,-64.55078125,-330.515625,1.97265625,-330.515625,1.97265625,-293.4081677766766,1.97265625,-256.30071055335316,1.97265625,-246.30071055335318],"text":"No"},

Then don’t set the initial TextBlock.text value to be “Yes”.

I remove th set label Yes

 $(
            Shape, // the arrowhead
            { toArrow: 'standard', strokeWidth: 0, fill: 'gray' }
          ),
          $(
            Panel,
            'Auto', // the link label, normally not visible
            {
              visible: false,
              name: 'LABEL',
              segmentIndex: 2,
              segmentFraction: 0.5
            },
            new Binding('visible', 'text', (t) => typeof t === 'string' && t.length > 0),
            $(
              Shape,
              'RoundedRectangle', // the label shape
              { fill: '#F8F8F8', strokeWidth: 0 }
            ),
            $(
              TextBlock,
              {
                textAlign: 'center',
                font: '10pt helvetica, arial, sans-serif',
                stroke: '#333333',
                editable: true
              },
              new Binding('text').makeTwoWay()
            ),
          )

However, I don’t have the desired behavior like in the flowchart example, as the label figure appears but it cannot be edited, and it doesn’t have the same behavior as the example, where right-clicking makes the label appear and it can be edited.

Hi Walter, I went over everything you explained to me. I was getting really confused and didn’t understand it, but with your guidance, I managed to get it done. Thank you so much for your support and patience!