Share via


Vwa.Shape.getId Method

Applies to: apps for SharePoint | SharePoint Server 2013

Returns the identifier (ID) of the shape within the Web Drawing.

var value = Shape.getID()

Return value

string The ID of the shape within the Web Drawing.

Remarks

The shape ID returned is based on the value of the Shape.ID property of the corresponding Microsoft Visio 2013 shape when the diagram is published as a Web Drawing. For shapes that are not on background pages, the ID is constructed by prefixing that property value with an underscore character.

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 adds a handler to the Vwa.shapeselectionchanged event that creates either an HTML or a XAML transparent overlay on the selected shape, depending on the display mode.

<script type="text/javascript">

// Hook into the AJAX Sys.Application.load event.
Sys.Application.add_load(onApplicationLoad)

// Define global variables.
var vwaControl;
var vwaPage;
var vwaShapes;
var currentlyAnnotatedShape;  

// 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 the SharePoint page to get the WebPartID# for the Visio Web Access Web Part.
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;
}

// Capture references to the global variables and register a handler for shapeselectionchanged event.
function onDiagramComplete() {
    try{
        vwaPage = vwaControl.getActivePage();
        vwaShapes = vwaPage.getShapes(); 
        vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
    }
    catch(err){
        alert(err);
    }
}

function onShapeSelectionChanged(source, args){
    try{
        // Ignore the shapeselectionchanged event raised when the selection is cleared.
        if (args != null && args != Sys.EventArgs.Empty){

            // Get the value of the display mode for the Visio Web Access Web Part.
            var displayMode = vwaControl.getDisplayMode();

            // Remove any existing overlay from the diagram.
            removeAnnotation();
            currentlyAnnotatedShape = vwaShapes.getItemById(args);

            // Test to see what the current display mode is.
            if (displayMode == 1) {
                
                // The display mode is Silverlight; add a XAML overlay.
                currentlyAnnotatedShape.addOverlay(
                    "Overlay", 
                    "<Rectangle Height=\"" + currentlyAnnotatedShape.getBounds().height + "\"" + 
                    " Width=\"" + currentlyAnnotatedShape.getBounds().width + "\"" + 
                    " Stroke=\"Black\" StrokeThickness=\"1\" Fill=\"#88FF0000\"" + 
                    " RadiusX=\"0.0\" RadiusY=\"0.0\"\/>",
                    1, 
                    1,
                    currentlyAnnotatedShape.getBounds().width,
                    currentlyAnnotatedShape.getBounds().height);
            }
            else {
                
                // The display mode is raster format; add an HTML overlay.
                currentlyAnnotatedShape.addOverlay(
                    "Overlay", 
                    "<div id=\"HTMLDiv\" style=\"width: 100%; height:" + 
                    "100%;background-color:#FF0000;z-order:32;" + 
                    "filter:alpha(opacity=30);\"><\/div>", 
                    1, 
                    1,
                    currentlyAnnotatedShape.getBounds().width,
                    currentlyAnnotatedShape.getBounds().height);
            }
            
            // Re-center the drawing on the selected shape.
            vwaPage.centerViewOnShape(currentlyAnnotatedShape.getId());
        }
    }
    catch(err){
        alert(err);
    }
}

// Remove any existing overlay.
function removeAnnotation() {
    if (typeof(currentlyAnnotatedShape)!="undefined") {
            currentlyAnnotatedShape.removeOverlay("Overlay");
    } 
}
</script>

See also

Reference

Vwa.Shape Class

Vwa.Shape Class Methods