Visio Services 2013 Mashup API

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

2. Agenda Deployment Goals & Challenges Capabilities Configuration

3. JSOM for VGS Use the JSOM to dynamically update a Content Editor web part as you select shapes on a Visio diagram with no server post back. • What is it? • A JavaScript based object model for communicating with the Visio Web Access web part • What can you do with it? • Read shape data, hyperlinks, comments • Select shapes • Add highlights and overlays (HTML + HTML5) • Respond to mouse events • Change the pan and zoom settings • Navigate pages and diagrams ( drill down )

4. Mashup API advantages • The API is not limited to communicating with a specific number of web parts on a page • Actions and data can affect one or many web parts • Even non-web part content on the page such as Silverlight, HTML, ASPX controls • The API is not limited to the scenarios provided by web part connections • Get Drawing URL and Page Name + Get Shape to View From = not supported • The API is client side and does not require any page refreshing providing a Web 2.0 experience

5. Typical API Scenarios • Events in the diagram trigger changes on page 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. Typical API Scenarios • Events on the page trigger changes in the diagram OnClick() { shapes = page1.getShapes(); foreach shape in shapes { if (shape.data[0].value = TextBox.value) { shape.addHighlight(); } } } // NOTE: this is pseudo code.

7. Demo

8. Agenda Deployment Goals & Challenges Capabilities Configuration

9. VWA JavaScript Object Model

10. Getting started • Create a text file containing desired JavaScript / html • Save script file to document library or other location • Add Content Editor Web Part & link to script file via URL • Add Visio Web Access web part & link to Visio diagram Web Part Page Content Editor Web Part Visio Web Access Web Part Document Library File containing JScript Visio Diagram

11. Hooking to add_load() • When the page is loaded you want to call your function that retrieves the instance of the VWA web part • This reference is needed to hook events and access VWA objects within the hosted diagram • Alternate load methods that do not work with VWA • window.attachEvent("onload", vwaOnPageLoad); • window.addEventListener("DOMContentLoaded", vwaOnPageLoad, false); • $(document).ready(vwaOnPageLoad); // jQuery

12. Get the VWA web part instance • Getting the VWA Instance web part ID

13. Find the VWA web part instance id • ‘View source’ for the web part page and search for class=“VisioWebAccess” • <div … id=“WebPartWPQ#”

14. Or Find the VWA web part instance via code

15. Handle the diagramcomplete event • Connecting handlers to events Event name Function callback

16. Handling the selection changed event • Additional Handlers once the diagram has been rendered • removeHandler before adding it again At this point the JSOM is initialized and the specified diagram is rendered in the VWA web part

17. Handling the selection changed event function onShapeSelectionChanged(source, shapeId) { varvwaPage = vwaControl.getActivePage(); varvwaShapes = vwaPage.getShapes(); varvwaShape = 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. Access Shape Data • VWAShape.getShapeData() • returns an array of objects corresponding to shape data items associated with a shape • data[4].label; • data[4].value; // .formattedValue

19. Managing Highlights • Highlights allow you to outline a shape( draws a rectangle around the shape bounds) • Shape Methods • addHighlight • http://msdn.microsoft.com/en-us/library/ff394531.aspx • removeHighlight • http://msdn.microsoft.com/en-us/library/ff394510.aspx • Note - Only a single highlight rectangle is allowed per shape Pixel width nextShape.addHighlight(4, "red"); Color, Hex or Name

20. Managing Overlays • Overlays allow you to define custom highlights/graphics • Shape Methods • addOverlay • http://msdn.microsoft.com/en-us/library/ff394546.aspx • removeOverlay • http://msdn.microsoft.com/en-us/library/ff394409.aspx • Multiple overlays are allowed • Defined using HTML • even HTML5 elements like Canvas!

21. Managing Overlays • What about older VDW diagrams? • Ensures that your HTML overlays workfor both VSDX and VDW formats displayed in the same web part • XAML can be used with VDW if needed • But some users may not haveSilverlight and will be accessingVGS using PNG and HTML only

22. Demo

23. Handling additional events • Additional VWA events • http://msdn.microsoft.com/en-us/library/ff394574.aspx • Follows model for Excel Web Access ( EWA )

24. Agenda Deployment Goals & Challenges Capabilities Configuration

25. Deployment • Manual • Upload VDW files • Upload JS/HTML files for Content Editor web parts • Or paste source directly into HTML Form web parts • Site Template • Paths may need to be updated for the specified VDW files for the VWA web parts Drawing URL property • WSP • Included as part of a SharePoint solution package • Empty SharePoint Project or a Visual Web Part

26. Debugging • Debug your scripts using IE10’s developer tools ( same as IE9 ) • In IE, press F12 to display the developer tools • Click on the Script tab to access script debugging features • Browse your code, set breakpoints, then reload the page to start debugging on the client

27. Script logging in IE developer tools • function tryConsole(){ if (typeof console != "undefined") { console.log("hello world"); } } • http://blogs.msdn.com/b/cdnwebdevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

28. Script logging to a CEWP • Add basic script logging capability to your dashboard • Capture basic diagnostic information • Log to a content editor or html forms web part • Toggle On/Off Content Editor Web Part Visio Web Access Web Part

29. In summary… • JavaScript API • Allow developers to build rich dashboard applications using javascript, html, asp, etc. • Incorporate additional functionality using HTML and Silverlight overlays • Events from these overlays can call additional functions • Incorporate VWA API scenarios into other SharePoint development projects • Site Pages • Robust Dashboards • Visual Web Parts • Want to see how the dev team did it • C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\VisioWebAccess\workflowstatus.js

30. Thank You