Vwa.Page.getSelectedShape Method

Last modified: June 27, 2011

Applies to: SharePoint Server 2010

Returns the Vwa.Shape object that represents the currently selected shape.

var value = Page.getSelectedShape()

Vwa.Shape An object that represents the currently selected shape.

Only one shape can be selected at any given time. If no shape is selected, the method returns null.

For more information about how to add a Visio Web Access Web Part to a SharePoint Web Parts page, see Customizing Visio Web Drawings in the Visio Web Access Web Part.

The following example displays a custom HTML message in the Visio Web Access Web Part that lists each shape in the active page of the Web Drawing.

<script language="javascript">
// Add a button to display or dismiss the custom message.
document.write("<input type='button' value='Show Message' onclick='displayMessage()' />");

// Hook into the AJAX Sys.Application.load event.

// Declare global variables.
var vwaControl;
var vwaPage;
var vwaShapes; 

// Capture a reference to the current session of the Visio Web Access Web Part.
function onApplicationLoad() {
        vwaControl= new Vwa.VwaControl(getVWAWebPartID());
        vwaControl.addHandler("diagramcomplete", onDiagramComplete);

// Search SharePoint page to get WebPartID# for Visio Web Access Web Part.
function getVWAWebPartID() {
    // Get a NodesList of all the div tags on the page. 
    var divArray = document.getElementsByTagName("div");
    var webPartElementID;
    // Iterate through the NodesList to get the node with the class attribute "VisioWebAccess."
    for (var i = 0; i < divArray.length; i++) {
        var node = divArray[i];
        // Return the first instance of the Visio Web Access Web Part.
        if (node.className == "VisioWebAccess") {
            webPartElementID = node.parentNode.parentNode.id;
    return webPartElementID;

// Capture references to global variables and display message in the Web Part after rendering is complete.
function onDiagramComplete() {

        // Get references to the current Visio page displayed in the Web Part and the shapes on the page.
        vwaPage = vwaControl.getActivePage();
        vwaShapes = vwaPage.getShapes();

        // Display the custom message.

function displayMessage(){
    var shapeCount = vwaShapes.getCount();
    var currShape;
    var htmlFragment;

    // Create an HTML fragment.
    htmlFragment = "<h1>Shapes On This Page</h1><br />";
    htmlFragment += "Select a shape from the list to dismiss this message.<br />";
    htmlFragment += "<ol id='shapelist'></ol>";
    // Display the HTML fragment in Visio Web Access Web Part.

    // Add DOM nodes (HTML content) for each shape in the displayed HTML fragment.
    for (var i = 0; i < shapeCount; i++){
        // Get a shape from VwaShapeCollection.
        currShape = vwaShapes.getItemAtIndex(i);
        // Create a new list item element and text for the list item.
        var newNode = document.createElement("li");
        var nodeText;
        // Determine whether the current shape is selected.
        if (currShape == vwaPage.getSelectedShape()) {
            nodeText = document.createTextNode(currShape.getName() + " [Selected]");
            nodeText = document.createTextNode(currShape.getName());
        // Set the id attribute for list item to the ID of the VwaShape object and set a callback for the onclick event.
        newNode.setAttribute("id", currShape.getId());
        newNode.setAttribute("onclick", "javascript:goToShape(this)");
        // Append new nodes to the displayed HTML fragment.

// Go to the shape in the list clicked by the user and dismiss the displayed message.
function goToShape(callingNode){
        // Get the ID from calling DOM node and select the corresponding shape.
        // Dismiss the custom message.