Vwa.Page.setSelectedShape Method

Last modified: August 06, 2011

Applies to: apps for SharePoint | SharePoint Server 2013

Sets the current selection to the specified shape.

var value = Page.setSelectedShape(string shapeID)

shapeID A string that specifies the identifier of the shape to be selected.

Void Returns nothing.

You can use the Vwa.Shape.getId method to determine the identifier of the shape you want to select.

If you pass a shapeID value that does not correspond to an existing shape, the method returns a ShapeIDNotFound error.

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.