Visio Services 2013 Mashup API

Copyright© 2012 Microsoft Corporation

Visio Services 2013Mashup APIChris HopkinsSenior Consultant - Premier Developer PracticeMicrosoft


Agenda

Goals & Challenges

Capabilities Configuration Deployment


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.


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


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.


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.


Demo


Agenda

Goals & Challenges



getActivePage()

setActivePage()

getShapes()

getItemById() getItemAtIndex()

diagramComplete

shapeMouseEnter

shapeMouseLeave

selectionChanged

diagramError

getSelectedShape()setSelectedShape()

VWA Control

Page

Shapes

Shape

getShapeData()getHyperlinks()

Shape

VWA JavaScript Object Model


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


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


Get the VWA web part instance

• Getting the VWA Instance

web part ID


Find the VWA web part instance id

• ‘View source’ for the web part page and search for class=“VisioWebAccess”

• <div … id=“WebPartWPQ#”


Or Find the VWA web part instance via code


Handle the diagramcomplete event

• Connecting handlers to events

Function callback

Event name


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


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


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

http://msdn.microsoft.com/en-us/library/ff394531.aspx



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!




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


Demo


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



Agenda

Goals & Challenges



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


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


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

http://blogs.msdn.com/b/cdnwebdevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

http://blogs.msdn.com/b/cdnwebdevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx


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


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


Thank You


© 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.

Visio Services 2013 Mashup API

Documents

Transcript of Visio Services 2013 Mashup API