Swimlane Diagram node as a hyperlink

[Alan Earp]

Hi,

I'm trying to get a node to act as a hyperlink, but can't find a way to do this.

I've managed to get a click working as per https://www.syncfusion.com/forums/118543/diagram-organizational-chart-allow-to-click-on-each-node but that isnt ideal.

Is there any other way to get this to work?

Thanks

Noble

[Shyam G]

Hi Alan, 

 

Please use label’s hyperlink property to achieve your requirement. please refer to the code example and sample below. 

 

Code example: 

var nodes = 

            [ 

                { name: "NewIdea", width: 150, height: 60, offsetX: 300, offsetY: 60, labels: [{ "hyperlink": "https://www.syncfusion.com" }],   

 

            ]; 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample739382850 

 

Regards, 

Shyam G 

[Alan Earp]

Thanks,

This will show the hyperlink itself, is there any way to have both text AND hyperlink? so it looks something like this If i have hyperlink with text, the text gets displayed, and the link doesn't display also, preferably open in the same window rather than a popup

Also, i'd like the node to be disabled with no other action allowed except to click it as if it were a simple link. If i set any constraint, the link doesnt work

see first node here http://jsplayground.syncfusion.com/q3kjyppy

not much documentation at https://help.syncfusion.com/api/js/ejdiagram#members:nodes-labels

[Shyam G]

Hi Alan, 

 

Could you please confirm us whether you need both label and hyperlink to be displayed in a node as shown in the below screenshot? If yes, we can create a multiple label for an node. Please refer to the code example below. Also please confirm us when you disable node constraints, the hyperlink text should not work? If we misunderstood your requirement, please provide us more details such as screenshot explain your requirement with screenshot. Also we could not find any attachment from your update. 

 

Code example: 

 

var nodes =  

            [  

                { name: "NewIdea", width: 150, height: 60, offsetX: 300, offsetY: 60, labels: [{ "hyperlink": "https://www.syncfusion.com" }, { text: "label", offset: {x:0.5,y:0.2}}],    

  

            ];  

 

 

Screenshot: 

 

 

Regards, 

Shyam G 

 

[Alan Earp]

Thanks for the response.

I'd want the text "label" in your screenshot to be a link that, when they click on it, goes to syncfusion. This is because hte links themselves are really long so wouldnt look good displayed.

I dont want the users to move the nodes around, but just to be able to click the hyperlink - or click the node and they navigate to the link that the text says 

What i'm trying to achieve is like in the image attached (original source https://global-uploads.webflow.com/573d5a1eee15ab7f704a5af7/59531650ff742f42927e8571_strategy-map-example-peoplestreme.png)

Each of the nodes on the image is an objective e.g. the one that says "Reduce Cost To Hire..." will be a link to view that objective, so when the user clicks that node, they can effectively drill down to see more details about how to reduce cost to hire

Thanks & hope that helps

Attachment: strategymapexample_421ffff8.zip

[Shyam G]

Hi Alan, 

 

To achieve your requirement, please create a node label and set fontColor as blue, textDecoration as underline, so that it looks as an hyperlink. When you click on the node, the click event triggers and in that event, you can specify an hyperlink in window.open method. To disable node interaction, please set nodeConstraints as PointerEvents. Please refer to the code example and playground link 

 

Code example: 

  

 $("#diagram").ejDiagram({                     

          defaultSettings: { 

                 node: { 

                            //to disable node interaction 

                            constraints: ej.datavisualization.Diagram.NodeConstraints.PointerEvents, 

                            //set fontColor,textDecoration 

                            labels: [{ text: "", fontColor: "blue", textDecoration: "underline", readOnly: true }] 

                        }, 

                  }, 

                  //define click event 

                click:click,             

 }); 

  

function click(args) { 

      var diagram = $("#diagram").ejDiagram("instance"); 

      if (args && args.element) { 

                //check an condition whether you click a label or node 

                if (args.event.target.className === "ej-d-label" || diagram.getObjectType(args.element) === "node") 

                 window.open("https://www.syncfusion.com/"); 

         } 

 } 

 

Playground link: http://jsplayground.syncfusion.com/zndwkjii 

 

Regards, 

Shyam G 

[Alan Earp]

Thanks,

The links are different per node, can i set a custom attribute that I can read on the label?

Thanks

[Kameshwaran R]

Hi Alan, 

We have achieved your requirement with adding custom properties to the label. Please find the below playground link with your requirement. 

Playground link: http://jsplayground.syncfusion.com/4jcxaaty  

Regards, 

Kameshwaran R.