Visio document imported into a SharePoint VisioWebAccess webpart : open links in new tab or window

Question

Hello.

I'm using a SharePoint Server 2010, with a Visio Web Access WebPart.
With Visio 2010, I created a vdw document which I put in this webpart.
This works very well, but i have some hyperlinks which I want to be opened in a new tab (or a new window), so that he SharePoint page won't be replaced by the target page.

So, in Visio, I tried to modify the ShapeSheet of each hyperlink, by setting the "NewWindow" to true. Unfortunately, it does not work : links are replacing the current page.
I found nothing on the web that could give me a trick to do this.

Has anyone an idea ?

Thanks a lot

_David

Answer 1

Hi David,

I have the same requirement and face the same problem that you are having.
If I find a solution (just started to figure this one out) I will be happy to give it to you.
If there is anyone else facing this and came up with a solution please let us know!

Thanks

Niax

Answer 2

Hi Niax

So you have already been here with todays problem!

Still no answer then.

/Staffan

Answer 3

Hello _David C,

You can create some JavaScript code that will open the hyperlink in a new window. Here is a JavaScript sample that will open the first hyperlink applied to a shape in a new browser window. I have tested it in both IE and FireFox.

 

<script type="text/javascript">

// Declare the global variables for the script, for the Visio Web Access Web Part, the active page in the Web Part,
// the shapes on the active page, and the shape on the page without hyperlinks.
var vwaControl;
var vwaPage;
var vwaShapes;
var coldShape;

// Add a handler to the AJAX Sys.Application.load event.
Sys.Application.add_load(onApplicationLoad)

function onApplicationLoad()
{
  try{
    // Capture a reference to the current instance of the Visio Web Access Web Part.
    // Add a handler to the 'diagramcomplete' event.
    vwaControl= new Vwa.VwaControl(getVWAWebPartID());
    vwaControl.addHandler("diagramcomplete", onDiagramComplete);
  }
  catch(err){
    alert(err);
  }
}

function getVWAWebPartID() 
{
  // Search all of the <div> tags on the page to find the div tag with the ID of the VWA Web Part.
  var divArray = document.getElementsByTagName("div");
  var webPartElementID;
  for (var i = 0; i < divArray.length; i++) {
    var node = divArray[i];
    if (node.className == "VisioWebAccess") 
    {
      webPartElementID = node.parentNode.parentNode.id;
      break;
    }
  }
  return webPartElementID;
}

function onDiagramComplete()
{
  try{
    // Set the vwaPage and vwaShapes variables to the active page and the shapes collection on that page, respectively.
    vwaPage = vwaControl.getActivePage();
    vwaShapes = vwaPage.getShapes();
    
    // Set the 'cold shape' for the current active page in the drawing.
    selectColdShape();

    // Remove the handler from the shape selection changed event and then add it back to the event.
    vwaControl.removeHandler("shapeselectionchanged", onShapeSelectionChanged);
    vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
    
  }
  catch(err)
  {
    alert(err);
  }
}

onShapeSelectionChanged = function (source, args)
{
  try{
    // Get the array of hyperlinks from the selected shape.
    var vwaShape = vwaShapes.getItemById(args);
    var newURLArray = vwaShape.getHyperlinks();
    var newURL;

    // Check to see whether the shape has any hyperlinks.
    if (newURLArray.length > 0) 
    {
      newURL = newURLArray[0].value; 

      // Check to see if the hyperlink goes to another page in the drawing.
      if (newURL.indexOf('vdw') < 0) 
      {
        // Open the hyperlink in a new window.
        var newWindow = window.open(newURL);
      }
      else 
      {
        // Set the active page to the new page.
        setNewPage(newURL);
      }
    }
  }
  catch(err)
  {
    alert(err);
  }
}

function selectColdShape() {
  try {
    // Set variables with the names of shapes on the pages that do not contain hyperlinks.
    // Customize the values for these variables to fit your web drawing.
    var coldShapePg1 = "Sheet.6";
    var coldShapePg2 = "Sheet.10";

    // Check to see if the coldShape exists on this page.
    if (vwaShapes.getItemByName(coldShapePg1)) {
      // Set the active shape to the shape without hyperlinks on page 1.
      coldShape = vwaShapes.getItemByName(coldShapePg1);
      vwaPage.setSelectedShape(coldShape.getId());
    }

    else if (vwaShapes.getItemByName(coldShapePg2)) {
      // Set the active shape to the shape without hyperlinks on page 2.
      coldShape = vwaShapes.getItemByName(coldShapePg2);
      vwaPage.setSelectedShape(coldShape.getId());
    }
  }
  catch (err) {
    alert(err);
  }
}

function setNewPage(pageId) {
  // Set the active page in the drawing to the page ID passed in as argument.
  var indexOfAmp = pageId.indexOf("&");
  var page = pageId.slice(6, indexOfAmp);
  vwaControl.setActivePage(page);
}

</script>

 

Note that this code requires that each page have a "cold shape" that does not have any hyperlinks applied to it. In my test drawing, I added a hidden shape (in ShapeSheet, Width = 0, Height = 0) that did not have any hyperlinks. This is because the Vwa.shapeselectionchanged event fires when you switch pages, which creates the possibility that the JavaScript code will open a new window when you change pages in the viewer.

If you are not familiar with the Visio Services JavaScript Object Model, I suggest that you check out the following resources:

http://blogs.msdn.com/b/visio/archive/2010/02/21/the-visio-services-javascript-mashup-api.aspx
http://msdn.microsoft.com/en-us/library/ff394649.aspx
http://msdn.microsoft.com/en-us/library/ff394600.aspx

I hope that this helps,

E. Schmidt, Technical Writer
Microsoft Corporation

 

Answer 4

I tried your code above by adding it to a content editor web part on the same page as the Visio viewer web part. The link does open in a new window, however the original window is also replaced with the destination. I do have a "cold shape". Is there something else that I'm missing?

Answer 5

Hi Peter and David,

I had that same problem as you Peter.

So I asked a collegue to have a look at it and this is what we came up with:

<script type="text/javascript">

// Declare the global variables for the script, for the Visio Web Access Web Part, the active page in the Web Part,
// the shapes on the active page, and the shape on the page without hyperlinks.
var vwaControl;
var vwaPage;
var vwaShapes;
var newURL;


// Add a handler to the AJAX Sys.Application.load event.
Sys.Application.add_load(onApplicationLoad)

function onApplicationLoad()
{
  try{
    // Capture a reference to the current instance of the Visio Web Access Web Part.
    // Add a handler to the 'diagramcomplete' event.
    vwaControl= new Vwa.VwaControl(getVWAWebPartID());
    vwaControl.addHandler("diagramcomplete", onDiagramComplete);
  }
  catch(err){
    alert(err);
  }
}

function getVWAWebPartID() 
{
  // Search all of the <div> tags on the page to find the div tag with the ID of the VWA Web Part.
  var divArray = document.getElementsByTagName("div");
  var webPartElementID;
  for (var i = 0; i < divArray.length; i++) {
    var node = divArray[i];
    if (node.className == "VisioWebAccess") 
    {
      webPartElementID = node.parentNode.parentNode.id;
      break;
    }
  }
  return webPartElementID;
}

function onDiagramComplete()
{
  try{
    // Set the vwaPage and vwaShapes variables to the active page and the shapes collection on that page, respectively.
    vwaPage = vwaControl.getActivePage();
    vwaShapes = vwaPage.getShapes();
    

    // Remove the handler from the shape selection changed event and then add it back to the event.
    vwaControl.removeHandler("shapeselectionchanged", onShapeSelectionChanged);
    vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);

    
  }
  catch(err)
  {
    alert(err);
  }
 }


function setNewPage(pageId) {
  // Set the active page in the drawing to the page ID passed in as argument.
  var indexOfAmp = pageId.indexOf("&");
  var page = pageId.slice(6, indexOfAmp);
 vwaControl.setActivePage(page);
}
onShapeSelectionChanged = function (source, args)
{
  try{
    // Get the array of hyperlinks from the selected shape.
    var vwaShape = vwaShapes.getItemById(args);
    var newURLArray = vwaShape.getHyperlinks();

    // Check to see whether the shape has any hyperlinks.
    if (newURLArray.length> 0) 
    {
      newURL = newURLArray[0].value;

      // Check to see if the hyperlink goes to another page in the drawing.
      if (newURL.indexOf('vdw') < 0) 
      {
        // Open the hyperlink in a new window.
           var newWindow = window.open(newURL, "", 'width=800,height=650')

      }
     else 
      {
         //Set the active page to the new page.
        setNewPage(newURL);
      }

    }
  }
  catch(err)
  {
    alert(err);
  }
}
</script>

I have used it in our own Intranet as well as on a client's and it works well I think.

The good thing is that you don't have to edit the script in any way, just paste it in a Form web part to try it.

 

/niax

http://marriedtosharepoint.com

Answer 6

Hello:

Thanks for the code, it does open the Visio link in a new window, which is helpful, but the original page also goes to the hyperlinked page, instead of staying on the Visio diagram.  Any thoughts?

Thanks.