Vwa.ShapeCollection.getItemAtIndex Method

Last modified: June 27, 2011

Applies to: SharePoint Server 2010

Returns the shape at the specified index position in the ShapeCollection collection.

var value = ShapeCollection.getItemAtIndex(integer index)

index An integer that specifies the zero-based index of the shape to return.

The method returns null if index is not greater than or equal to 0 and less than the value of ShapeCollection.getCount.

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.