Vwa.Page.getShapes Method

Applies to: SharePoint Server 2010

Returns the collection of shapes on the active page.

var value = Page.getShapes()

Return Value

ShapesCollection The collection of shapes on the active page.

Remarks

The collection includes only the shapes on the top level in the Visio Web Drawing and the shapes that have points of interest (hyperlinks or shape data) from the foreground page and the associated background pages.

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.

Example

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.
Sys.Application.add_load(onApplicationLoad)

// 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() {
    try{
        vwaControl= new Vwa.VwaControl(getVWAWebPartID());
        vwaControl.addHandler("diagramcomplete", onDiagramComplete);
    }
    catch(err){
        alert(err);
    }
}

// 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;
            break;
        }
    }
    return webPartElementID;
}

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

        // 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.
        displayMessage();
    }
    catch(err){
        alert(err);
    }
}

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.
    vwaControl.displayCustomMessage(htmlFragment);

    // 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]");
        }
        else{
            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.
        newNode.appendChild(nodeText);
        document.getElementById("shapelist").appendChild(newNode);
    }
}

// Go to the shape in the list clicked by the user and dismiss the displayed message.
function goToShape(callingNode){
    try
    {
        // Get the ID from calling DOM node and select the corresponding shape.
        vwaPage.setSelectedShape(callingNode.id);
        
        // Dismiss the custom message.
        vwaControl.hideCustomMessage();
    }
    catch(err)
    {
        alert(err);
    }
}

</script>

See Also

Reference

Vwa.Page Class

Vwa.Page Class Methods