Hyperlink to double tree nodes

GoJS
1

Hi,

GOJS version : v1.7.2

I have a requirement to show particular double tree nodes text as hyperlink and remaining nodes as normal text. As given in samples I have used TextBlock to show text.

I tried below code to make HyperlinkText visible based on condition
goObj(go.TextBlock,
{ alignment: go.Spot.Center, margin : 5, editable: false,textAlign: “center”},
new go.Binding(“text”, “name”).makeTwoWay(),
new go.Binding(“visible”, “”,
function(node:any) {
let visible = true;
if(node.data.hyperlink == true){
visible = false;
}
return visible;
}).ofObject()
),
goObj(“HyperlinkText”,
function(node:any) { return “https://gojs.net/” + node.data.version; },
function(node:any) { return "Visit GoJS " + node.data.version; },
new go.Binding(“visible”, “”,
function(node:any) {
let visible = false;
if(node.data.hyperlink == true){
visible = true;
}
return visible;
}).ofObject()
),

I see below error when I introduce HyperlinkText code.

GraphObject.make failed to complete. Is it conflicting with another $ var? (such as jQuery)

Want to know if there is any alternate to implement my requirement

2

You cannot depend on the order (or frequency) that Bindings will be evaluated. It’s particularly bad to have a conversion function have side-effects. This is documented at GoJS Data Binding -- Northwoods Software.

Seems to me that it is much simpler, clearer, and faster to declare your Binding as:

    new go.Binding("visible", "hyperlink")

and then you set data.hyperlink to false on those node data objects that you do not want to act as hyperlinks.

Or change the HyperlinkText object’s visible: false by default, and then only set data.hyperlink to true on those few nodes that you want to act as hyperlinks.

Maybe even better would be to use two different templates, one with the “HyperlinkText” and one without. GoJS Template Maps -- Northwoods Software

3

Hi Walter,

Thank you for your reply. I am getting GraphObject.make failed to complete. Is it conflicting with another $ var? (such as jQuery) error if I add below code.

goObj(“HyperlinkText”,
{ alignment: go.Spot.Center, margin : 5, editable: false,textAlign: “center”,visible:false},
function(node:any) { return “https://gojs.net/” + node.data.version; },
function(node:any) { return "Visit GoJS " + node.data.version; },
new go.Binding(“visible”, “hyperlink”)
)

I commented out the TextBlock code and only kept HyperlinkText and still I get above mentioned error. I saw somewhere that it must be conflicting with jQuery $ variable so I changed my gojs variable to goObj but it didn’t fix my issue

Please provide your suggestions to fix this issue

4

You are constructing the “HyperlinkText” object incorrectly. The first two arguments must be the URL (or a function that returns the URL) and the text (or a function that returns the text string). The first argument must not be an object with properties.

This is documented at the definition of “HyperlinkText”, at http://gojs.net/latest/extensions/HyperlinkText.js

5

Thanks for pointing that. I made the change but still same error is coming. Below is the code

goObj(go.Node, “Spot”,
{ isShadowed: true,selectionObjectName : “NODE_DATA”,isTreeExpanded: false },
goObj(“HyperlinkText”,
function(node) { return “https://gojs.net/” + node.data.version; },

		  goObj(go.Panel, "Auto", { name: "BODY" },
                  // define the node's outer shape
                  goObj(go.Shape, "RoundedRectangle",

Let me know if you see any issues with it.

6

Since the definition is incomplete, I don’t see anything wrong with it.

Although the name “NODE_DATA” is a bit suspicious, it might be correct.

7

NODE_DATA is name of shape as shown below

goObj(go.Node, “Spot”,
{ isShadowed: true,selectionObjectName : “NODE_DATA”,isTreeExpanded: false },
goObj(“HyperlinkText”,
function(node) { return “https://gojs.net/” + node.data.version; },
goObj(go.Panel, “Auto”, { name: “BODY” },
// define the node’s outer shape
goObj(go.Shape, “RoundedRectangle”,
{ name: “NODE_DATA”,fill: this.labelNodeGrad, stroke: “#D8D8D8”,visible:true },

Along with above code the node template contains a TextBlock, Table Panel, PanelExpanderButton and TreeExpanderButton

It was working fine until I added HyperlinkText to my node template

8

So what is the whole (“HyperlinkText”, …) expression? You aren’t including everything else in the node within the hyperlink Panel, are you?

9

I have a double tree with some nodes has just text and some has Table panel which has PanelExpanderButton and each and every node has TreeExpanderButton to expand and collapse the tree.

I am using HyperlinkText to create hyperlink on node text

Yes you are right I haven’t shared my complete code here.

nodeTemplate code is taken from doubletree samples and I have added Table panel, PanelExpanderButton and TreeExpanderButton as extra to my code and now when I am trying use hyperlinktext feature for node text.

10

If you just replace a (TextBlock, …) with a (“HyperlinkText”, “url”, (TextBlock, …)), it ought to work as one would expect.

11

Not sure if you got my actual issue. I am getting GraphObject.make failed to complete. Is it conflicting with another $ var? (such as jQuery) error when I use code related to HyperlinkText

12

And that is clearly a sign that you’re doing something wrong. You need to debug the code.

I have already suggested that if it was working without the (“HyperlinkText”, …) panel, then you should try doing the simple wrapping of the original TextBlock with (“HyperlinkText”, “url”, …). If that still does not load, look at the stack and see what’s going on.

Have you made sure you have loaded http://gojs.net/latest/extensions/HyperlinkText.js ?

13

We’ll improve the error message if an object builder isn’t defined, such as “HyperlinkText” if you haven’t loaded its definition.

14

Yes I realized later that I didn’t load HyperlinkText.js. My issue got resolved after loading it.

15

[mohanr.k] - the error of conflicting is because you have not included HyperLink.js in header part. So pelase check and add this JS. It will work fine.

Link of JS- https://gojs.net/latest/extensions/HyperlinkText.js