Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior...
-
Upload
allen-tate -
Category
Documents
-
view
216 -
download
0
Transcript of Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior...
![Page 1: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/1.jpg)
Copyright© 2012 Microsoft Corporation
Visio Services 2013Mashup APIChris HopkinsSenior Consultant - Premier Developer PracticeMicrosoft
![Page 2: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/2.jpg)
Copyright© 2012 Microsoft Corporation
Agenda
Goals & Challenges
Capabilities Configuration Deployment
![Page 3: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/3.jpg)
Copyright© 2012 Microsoft Corporation
JSOM for VGS
• 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 )
Use the JSOM to dynamically update a Content Editor web part as you select shapes on a Visio diagram with no server post back.
![Page 4: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/4.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 5: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/5.jpg)
Copyright© 2012 Microsoft Corporation
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.
![Page 6: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/6.jpg)
Copyright© 2012 Microsoft Corporation
Typical API Scenarios
• Events on the page trigger changes in the diagramOnClick() { shapes = page1.getShapes(); foreach shape in shapes { if (shape.data[0].value = TextBox.value) { shape.addHighlight(); } }} // NOTE: this is pseudo code.
![Page 7: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/7.jpg)
Copyright© 2012 Microsoft Corporation
Demo
![Page 8: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/8.jpg)
Copyright© 2012 Microsoft Corporation
Agenda
Goals & Challenges
Capabilities Configuration Deployment
![Page 9: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/9.jpg)
Copyright© 2012 Microsoft Corporation
getActivePage()
setActivePage()
getShapes()
getItemById() getItemAtIndex()
diagramComplete
shapeMouseEnter
shapeMouseLeave
selectionChanged
diagramError
getSelectedShape()setSelectedShape()
VWA Control
Page
Shapes
Shape
getShapeData()getHyperlinks()
Shape
VWA JavaScript Object Model
![Page 10: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/10.jpg)
Copyright© 2012 Microsoft Corporation
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
Visio Web Access Web
Part
Content Editor Web Part
Document LibraryFile containing
JScriptVisio Diagram
![Page 11: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/11.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 12: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/12.jpg)
Copyright© 2012 Microsoft Corporation
Get the VWA web part instance
• Getting the VWA Instance
web part ID
![Page 13: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/13.jpg)
Copyright© 2012 Microsoft Corporation
Find the VWA web part instance id
• ‘View source’ for the web part page and search for class=“VisioWebAccess”
• <div … id=“WebPartWPQ#”
![Page 14: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/14.jpg)
Copyright© 2012 Microsoft Corporation
Or Find the VWA web part instance via code
![Page 15: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/15.jpg)
Copyright© 2012 Microsoft Corporation
Handle the diagramcomplete event
• Connecting handlers to events
Function callback
Event name
![Page 16: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/16.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 17: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/17.jpg)
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); } }}
Handling the selection changed event
![Page 18: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/18.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 19: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/19.jpg)
Copyright© 2012 Microsoft Corporation
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
nextShape.addHighlight(4, "red");
Pixel width
Color, Hex or Name
![Page 20: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/20.jpg)
Copyright© 2012 Microsoft Corporation
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!
![Page 21: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/21.jpg)
Copyright© 2012 Microsoft Corporation
Managing Overlays
• What about older VDW diagrams?• Ensures that your HTML overlays work
for both VSDX and VDW formats displayed in the same web part
• XAML can be used with VDW if needed• But some users may not have
Silverlight and will be accessingVGS using PNG and HTML only
![Page 22: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/22.jpg)
Copyright© 2012 Microsoft Corporation
Demo
![Page 23: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/23.jpg)
Copyright© 2012 Microsoft Corporation
Handling additional events
• Additional VWA events• http://msdn.microsoft.com/en-us/library/ff394574.aspx• Follows model for Excel Web Access ( EWA )
Event VwaControl Methods Description
Diagram Complete addHandler() / removeHandler() Triggered when the diagram is loaded, refreshed, or changed
Diagram Error addHandler() / removeHandler() Occurs when a request to render the diagram fails
Shape Mouse Enter addHandler() / removeHandler() Triggered when the mouse pointer is moved into the bounding box of the shape
Shape Mouse Leave addHandler() / removeHandler() Triggered when the mouse pointer is moved out of the bounding box of the shape
Shape Selection Changed addHandler() / removeHandler() Occurs when the shape that is currently selected on the page changes
![Page 24: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/24.jpg)
Copyright© 2012 Microsoft Corporation
Agenda
Goals & Challenges
Capabilities Configuration Deployment
![Page 25: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/25.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 26: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/26.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 27: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/27.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 28: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/28.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 29: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/29.jpg)
Copyright© 2012 Microsoft Corporation
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
![Page 30: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/30.jpg)
Copyright© 2012 Microsoft Corporation
Thank You
![Page 31: Copyright© 2012 Microsoft Corporation Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft.](https://reader036.fdocuments.us/reader036/viewer/2022081514/5697c0131a28abf838ccc7a5/html5/thumbnails/31.jpg)
Copyright© 2012 Microsoft Corporation
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.