Chris Hopkins' Blog - #makinitdostuff

The place where I post information about the products I manage; SharePoint, Yammer, Project and Visio and maybe from some that I don't!

Navigating hyperlinks in the Visio Web Part with Web Part Connections

Navigating hyperlinks in the Visio Web Part with Web Part Connections

  • Comments 5

Published Visio diagrams can include hyperlinks which allow users to navigate to: other pages in the same diagram, other pages in other published diagrams, even other sites using standard URLs, when the diagram is published to Visio Services as a Visio Web Drawing (VDW) file.

These hyperlinks are available whether you view the published diagram directly from the document library or from the diagram hosted on a web part page using the Visio Web Access web part.

The Visio Web Access web part also supports functionality known as Web Part Connections which allow you to connect web parts together to enable some basic dashboard type scenarios.

The Send Data To web part connection allows the Visio Web Access web part to send shape data from a shape that is selected in the Visio Web Access web part to another web part.  As an example, take the web part page shown below that includes a Visio Web Access web part showing a process diagram, along with an InfoPath Forms web part on the same page.  The Send Data To web part connection will fill out the fields in the InfoPath form based on the data from the selected shape in the diagram.

image

An issue arises when you configure Web Part Connections ( specifically the Send Data To web part connection ) with the Visio Web Access web part along with having the Visio Web Part host a diagram that contains hyperlinks to other pages in the same diagram or pages in other diagrams.

The shape selection action from the user triggers the Send Data To connection to record the page that is being viewed along with the shape that is selected before reloading the page.  At the same time the hyperlink triggers the Visio web part to load the specified diagram and/or page because by default, selecting a shape that contains a hyperlink causes you to navigate to that location.  Now either before or just after the user is navigated to the hyperlink, the Send Data To web part connection triggers the page reload so that the web part connection can complete its operation, i.e. the receiving web part can display the data from the selected shape.  This causes the page and shape that was originally in view to be displayed causing the navigation of the hyperlink to be cancelled.

In order to select the shape to pass the data to the configured web part:

Select the shape while holding down the CTRL key.  Holding down the CTRL key when clicking on a shape that has a hyperlink tells the Visio Web Access web part to select the shape and does NOT navigate the hyperlink.

In order to navigate to the hyperlink:

Open the Shape Information pane and then select the shape while holding down the CTRL key.  The Shape Information pane will display all the hyperlinks for the selected shape, allowing you to choose the hyperlink directly from the list.

image

FYI – this is also the only way to view and navigate multiple hyperlinks associated with a single shape, as a shape may have more than one hyperlink defined.

Choosing to Disable Hyperlinks may be the best approach

If you choose to Disable Hyperlinks via the Visio Web Access web part properties

image

then the default action when clicking on a shape will be to select the shape.  The only way to navigate hyperlinks will be to open the Shape Information Pane…or you can add my Visio Property Viewer web part to the page.

Leave a Comment
  • Please add 7 and 5 and type the answer here:
  • Post
  • Unbelievable, this kind of navigation problem (link & connection) makes visio services  for a wide range of applications use less.  A end user never find out the CRTL-Trick 

  • Hi Christopher,

    I try to use Visio Web Drawing with hyperlinks on shapes. I don't use WebPart connections, but when i click on shape (with hyperlink) nothing happens. I don't be redirect. I use hyperlink to navigate on SharePoint pages. Similary on Visio Web Access and in Visio Web Acces WebPart (i don't check disable Hyperlink).

    When, i use information pane i can see hyperlink and i can use it, but i want to navigate on hyperlink without call inforamtion pane.

    Thanks.

  • kOuilb,

    I have the same problem that you have... I also tried to use different browsers, but nothing seems to work. I guess this has something about Silverlight plug in. Can anybody help me?!

    Tks in advance1

  • Yup, same here, if I press ctrl click it will display the shape hyperlink in the shape data window... I have to add instructions to the top of my drawings or users will never find that.  I was hoping that if you choose to set your hyperlink as "default" it would be the on-click link, you could still hold ctrl and click to display additional links.  Bummer.

  • A colleague of mine find a fix for this.

    The fix is to add a Content editor webpart to the page and add a javascript to the page in the html code.

    The code is as below and I really don't know where he got it from so I can't give credit to the author (sorry about that)

    <script type="text/javascript">

    Sys.Application.add_load(onApplicationLoad);

    var webPartElementID = "WebPartWPQ2"; // The HTML tag ID of the  

    // Visio Web Access Web Part.

    var vwaControl; // The Visio Web Access Web Part.

    var vwaPage; // The current page.

    var vwaShapes; // The collection of all the shapes on the current page.

    function onApplicationLoad()

    {

    try{  

    vwaControl= new Vwa.VwaControl(webPartElementID);

    vwaControl.addHandler("diagramcomplete", onDiagramComplete);

    vwaPage = vwaControl.getActivePage();

    // Firefox special

    if (vwaPage != null)

    {

    vwaPage.setZoom(-1);

    vwaShapes = vwaPage.getShapes();

    vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);

    }

    }

    catch(err){

    alert(err);

    }

    }

    function onDiagramComplete()

    {

    try{

    vwaPage = vwaControl.getActivePage();

    vwaPage.setZoom(-1);

    vwaShapes = vwaPage.getShapes();

    textArea = document.getElementById('MouseOutput');

    vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);

    }

    catch(err){

    alert(err);

    }

    }

    onShapeSelectionChanged = function (source, args)

    {

    // Don't process the shapeselectionchanged event raised when

    // the selection was cleared (for example, when the user tabs out of the drawing page).

    try{

    if (vwaShapes.getItemById(args).getHyperlinks().length > 0)

    {

    var link = vwaShapes.getItemById(args).getHyperlinks()[0].value;

    if (link !=null)

    {

    location.href=link;

    }

    }

    }

    catch(err){

    alert(err);

    }

    } </script>

Page 1 of 1 (5 items)