1. Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft

2. Copyright© 2012 Microsoft Corporation

3. Use the JSOM to dynamically update a Content Editor web part as you select shapes on a Visio diagram with no server post back.

4. Copyright© 2012 Microsoft Corporation

5. OnClick() { for (var j = 0; j < data.length; j++) { if (data[j].label == "Step") { document.getElementById('StepData').src= "http://localhost:8080/details.aspx?ID=" + "'" + data[j].value + "'"; return; } }} // NOTE: this is pseudo code.

6. Copyright© 2012 Microsoft Corporation OnClick() { shapes = page1.getShapes(); foreach shape in shapes { if (shape.data[0].value = TextBox.value) { shape.addHighlight(); } } } // NOTE: this is pseudo code.

7. Copyright© 2012 Microsoft Corporation Demo

8. Copyright© 2012 Microsoft Corporation

10. Web Part Page Document Library

11. Copyright© 2012 Microsoft Corporation

12. web part ID

13. Copyright© 2012 Microsoft Corporation

15. Function callback Event name

16. Copyright© 2012 Microsoft Corporation At this point the JSOM is initialized and the specified diagram is rendered in the VWA web part

17. Copyright© 2012 Microsoft Corporation function onShapeSelectionChanged(source, shapeId) { var vwaPage = vwaControl.getActivePage(); var vwaShapes = vwaPage.getShapes(); var vwaShape = vwaShapes.getItemById(shapeId); var data = vwaShape.getShapeData(); for (var j = 0; j < data.length; j++) { if (data[j].label == "Step") { alert(data[j].value); }

18. Copyright© 2012 Microsoft Corporation

19. nextShape.addHighlight(4, "red"); Pixel width Color, Hex or Name

20. Copyright© 2012 Microsoft Corporation

22. Demo

23. Copyright© 2012 Microsoft Corporation EventVwaControl MethodsDescription Diagram CompleteaddHandler() / removeHandler()Triggered when the diagram is loaded, refreshed, or changed Diagram ErroraddHandler() / removeHandler()Occurs when a request to render the diagram fails Shape Mouse EnteraddHandler() / removeHandler()Triggered when the mouse pointer is moved into the bounding box of the shape Shape Mouse LeaveaddHandler() / removeHandler()Triggered when the mouse pointer is moved out of the bounding box of the shape Shape Selection ChangedaddHandler() / removeHandler()Occurs when the shape that is currently selected on the page changes

24. Copyright© 2012 Microsoft Corporation

28. Content Editor Web Part Visio Web Access Web Part

29. Copyright© 2012 Microsoft Corporation

30. Thank You

31. Copyright© 2012 Microsoft Corporation