Export (0) Print
Expand All

Vwa.Shape.getShapeData Method

apps for Office and SharePoint

Last modified: June 21, 2012

Applies to: apps for SharePoint | SharePoint Server 2013

Returns an array of anonymous objects, each of which corresponds to a shape data item associated with the shape.

var value = Shape.getShapeData()

Object[] An array of anonymous objects, each of which corresponds to a shape data item associated with the shape.

Each anonymous object in the array that is returned has the following properties:

  • label A string that specifies the label of the shape data item, which corresponds to the value of the Label cell of a shape data row in Microsoft Visio 2013.

  • value A string that specifies the value of the shape data item, which corresponds to the value of the Value cell of a shape data row in Visio 2013.

  • format A string that specifies the format of the shape data item, which corresponds to the value of the Format cell of a shape data row in Visio 2013.

  • formattedValue A string that specifies the formatted value of the shape data item, used for display purposes.

Shape data that is hidden in Visio 2013 is not returned by this method.

If there are no shape data items associated with the shape, the method returns an empty array.

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 creates an HTML or Silverlight overlay on shapes in a Visio Web Access Web Part when the mouse enters the bounding box of the shape.

<script type="text/javascript">

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

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

// 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() {

    // 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 add event handlers.
function onDiagramComplete() {
    try{
        vwaPage = vwaControl.getActivePage();
        vwaShapes = vwaPage.getShapes();

        // Remove the handlers from the Visio Web Access Web Part before adding them back.
        vwaControl.removeHandler("shapemouseleave", onShapeMouseLeave);
        vwaControl.removeHandler("shapemouseenter", onShapeMouseEnter);
        vwaControl.addHandler("shapemouseleave", onShapeMouseLeave);
        vwaControl.addHandler("shapemouseenter", onShapeMouseEnter);
        
    }
    catch(err){
        alert(err);
    }
}

// Determine whether a shape contains data when the mouse hovers over it.
function onShapeMouseEnter(source, args) {
    try{
        // Get the shape that raised the event from the arguments passed in.
        var shapeId = args;
        vwaShape = vwaShapes.getItemById(shapeId);
        
        // Get the shape's data in an array of anonymous objects.
        var shapeDataArray = vwaShape.getShapeData();

        // Display the shape's data, if the shape has any.
        if (shapeDataArray.length > 0) {
            displayShapeData(shapeDataArray);
        }
    }
    catch(err){
        alert(err);
    }
}

// Display shape data over a shape.
function displayShapeData(dataArray) {

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

    // Test to see what the current display mode is.
    if (displayMode == 1) {
        // The display mode is Silverlight; add Silverlight graphic overlays.
        createOverlaySL(dataArray);
    }
    else {
            
        // The display mode is raster format; add HTML graphic overlays.
        createOverlayHTML(dataArray);
    }
}

// Create a Silverlight overlay over a shape.
function createOverlaySL(dataArray) {

    // Create formatted XAML fragment to contain the shape data.
    var xamlBuilder = "<TextBlock Height='100' Width='100' FontSize='10'>";

    // Add HTML to the fragment for each label/value pair in the array of shape data.
    for (var i = 0; i < dataArray.length; i++) {
        xamlBuilder += dataArray[i].label + ": " + dataArray[i].formattedValue + "<LineBreak/>";
    }
    xamlBuilder += "</TextBlock>";

    vwaShape.addOverlay(
        "overlay_" + vwaShape.getId(), 
        "<Canvas>" +
        "<Rectangle Height='100' Width='100' Fill='#880000FF' ></Rectangle>" + 
        xamlBuilder + 
        "</Canvas>",
        1, 
        1,
        100,
        100);
}

// Create an HTML overlay over a shape.
function createOverlayHTML(dataArray) {

    // Create the formatted HTML fragment to contain the shape data.
    var htmlBuilder = "<div style='font-family:Segoe;color:#000000'>";
    
    // Add HTML to the fragment for each label/value pair in the array of shape data.
    for (var i = 0; i < dataArray.length; i++) {
        htmlBuilder += dataArray[i].label + ": " + dataArray[i].formattedValue + "<br />";
    }
    htmlBuilder += "</div>";
    
    // Create a formatted div tag for visual overlay.
    vwaShape.addOverlay(
        "overlay_" + vwaShape.getId(), 
        "<div id=\"HTMLDiv\" style=\"width: 100%; height:" + 
        "100%;background-color:#0000FF;z-order:32;" + 
        "filter:alpha(opacity=30);\"><\/div>", 
        1, 
        1,
        100,
        100);

    // Display the HTML as a predefined text overlay, centered over the shape.
    vwaShape.addPredefinedOverlay(Vwa.OverlayType.text, 
                                "text_" + vwaShape.getId(), 
                                htmlBuilder,
                                1,
                                1,
                                100,
                                100);
}

// Dismiss the overlay from the shape two seconds after the mouse leaves the shape's bounding box.
onShapeMouseLeave = function (source, args) {
    try{
        var tmpShape = vwaShapes.getItemById(args); 
        setTimeout(
            function() {
                vwaShape.removeOverlay("text_" + tmpShape.getId()); 
                vwaShape.removeOverlay("overlay_" + tmpShape.getId());
            }, 
            2000);
    }
    catch(err){
        alert(err);
    }
}

</script>

Show:
© 2014 Microsoft