Pages

Monday, June 25, 2012

Visio Services 2010: How to create relative links

Unfortunately relative links in Visio Services 2010 don't work. You press on the shape, but nothing happens. For most projects using absolute links is no alternative.
So what we do instead is to subscribe an event with the Visio api, read the (relative) URL and do a javascript redirect. Don't be afraid if you are not an experienced developer, with this code snippets it should be just copy and pasting.
1. Copy the following javascript code to an new file (RelativeLinkScripts.js) and deploy it to the layouts folder (14 hive). For this script I created a sub folder named "VisioExtensions".

if (typeof Sys !== 'undefined')
{
    Sys.Application.add_load(onApplicationLoad);
}


function onApplicationLoad()
{
    try{
        vwaControl= new Vwa.VwaControl(getVWAWebPartID());
        if (vwaControl != undefined)
        {
            vwaControl.addHandler("diagramcomplete", onDiagramComplete);
        }
    }
    catch(err){
    }
}

function onDiagramComplete() {
    vwaPage = vwaControl.getActivePage();
    vwaShapes = vwaPage.getShapes();
    var displayMode = vwaControl.getDisplayMode();
    //Uncomment this to take the sheets zoom level.
    vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
}

function getVWAWebPartID()
{
    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 onShapeSelectionChanged(source, args){
    try{
        // Get the array of hyperlinks from the selected shape.
        var currentShape = vwaShapes.getItemById(args);
        // Check to see whether the shape has any hyperlinks.
        var urlArray = currentShape.getHyperlinks();
        if (urlArray.length> 0)
        {
            url = urlArray[0].value;
            window.location.href = url;
        }
    }
    catch(err){
        alert(err);
    }
}


2. Add the following reference to the page where the visio services webpart is located. I like to create a custom page layout for pages with visio services.
(Should I write a post about that?)
Another quicker way would be to add the ContentEditor webpart and put this HTML in there.
<script type="text/javascript" src="/_layouts/VisioExtensions/RelativeLinkScript.js"></script>
3. In your visio sheet you just add relative links to the objects

Attention: For your visio services webpart keep in mind that you must not "disable selection". (selection must be enabled). You find that in the webpart properties.

That's it!

Please use the comments for further questions.

No comments:

Post a Comment