Visio services in sharepoint 2013
-
Upload
biwug -
Category
Technology
-
view
1.166 -
download
4
Transcript of Visio services in sharepoint 2013
![Page 1: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/1.jpg)
Visio Services in Sharepoint 2013
Thomas Browet
![Page 2: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/2.jpg)
What is Visio Services
• Visio Services in SharePoint 2013 enables you to load, display, and interact programmatically with Visio files on SharePoint Server 2013 and Microsoft SharePoint Online.
![Page 3: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/3.jpg)
Why Visio Services
• Visio diagrams can be rendered by Visio Services and viewed in a Web browser. This lets users view Visio documents without having Visio or the Visio Viewer installed on the local computer. This also allows diagrams to be viewed on mobile devices.• Basic exploration and navigation of these rendered diagrams are
supported within the Visio Web Access Web Part. Page designers can configure the user interface and functionality of the Web Part.• Visio Services can also refresh the data and recalculate the visuals of a
Visio diagram hosted on a SharePoint site. This enables published diagrams to refresh connections to various data sources (SQL, Excel, ….) and to update affected data graphics and text fields.
![Page 4: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/4.jpg)
Agenda
• VISIO JSOM• Creating Visio Shapes with Data Binding• SharePoint, Visio and SVG
![Page 5: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/5.jpg)
Visio JSOM
![Page 6: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/6.jpg)
Visio JSOM
• 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 )
![Page 7: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/7.jpg)
VWA Javascript Object Model
getActivePage()
setActivePage()
getShapes()
getItemById() getItemAtIndex()
diagramComplete
shapeMouseEnter
shapeMouseLeave
selectionChanged
diagramError
getSelectedShape()setSelectedShape()
VWA Control
Page
Shapes
Shape
getShapeData()getHyperlinks()
Shape
![Page 8: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/8.jpg)
Getting started
Web Part PageVisio Web
Access Web Part
Content Editor Web Part
Document Library
File containing JScript
Visio Diagram
![Page 9: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/9.jpg)
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 10: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/10.jpg)
Get the VWA web part instance
• Getting the VWA Instance
![Page 11: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/11.jpg)
Or Find the VWA web part instance via code
![Page 12: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/12.jpg)
Handle the diagramcomplete event
• Connecting handlers to events
![Page 13: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/13.jpg)
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 14: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/14.jpg)
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 15: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/15.jpg)
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 16: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/16.jpg)
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 17: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/17.jpg)
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 18: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/18.jpg)
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 19: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/19.jpg)
Deployment
• Manual• Upload Visio 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 20: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/20.jpg)
Debugging• Debug your scripts using browser developer tools• In browser, 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 21: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/21.jpg)
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 22: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/22.jpg)
In summary…
• JavaScript API• Allow developers to build rich dashboard applications using javascript, html, 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\15\TEMPLATE\
LAYOUTS\VisioWebAccess\workflowstatus.js
![Page 23: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/23.jpg)
Demo
![Page 24: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/24.jpg)
Creating Visio Shapes with Data Binding
![Page 25: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/25.jpg)
Enable developer mode in visio
![Page 26: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/26.jpg)
Create a shape from the shape library
![Page 27: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/27.jpg)
Editing with Shapesheet
![Page 28: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/28.jpg)
Binding data value
![Page 29: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/29.jpg)
Changing data value
![Page 30: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/30.jpg)
DataBinding the color of the shape
![Page 31: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/31.jpg)
Playing with the value
![Page 32: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/32.jpg)
Saving the shape
• Once finished you can drag and drop your shape to a stencil• So user can use your shape and it’s
shape data easily.• You can now easily bind these data
value to SQL Server or an Excel File.
![Page 33: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/33.jpg)
SharePoint, Visio and SVG
![Page 34: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/34.jpg)
Why did we use this ?
• We had to build :• An interactive map of an hospital campus. With a menu that allows to hide
and show buildings or highlight roads.
• Problem : VISIO JSOM, can’t dynamically hide Shapes or change it’s data value.
![Page 35: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/35.jpg)
SVG
• So we had an idea, why not use SVG.• Visio can export SVG.• Wikipedia says :
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape.
All major modern web browsers—including Mozilla Firefox, Internet Explorer 9and 10, Google Chrome, Opera, and Safari—have at least some degree ofsupport for SVG and can render the markup directly.
![Page 36: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/36.jpg)
Inserting a SVG in SharePoint
• Different ways to add a SVG• Object tag in sharepoint are not allowed.• Embed tag, don’t allow us to browse the SVG DOM.
• Solution : • Load the SVG through an ajax call.
![Page 37: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/37.jpg)
Demo
![Page 38: Visio services in sharepoint 2013](https://reader036.fdocuments.net/reader036/viewer/2022062312/554f1588b4c905723a8b48e8/html5/thumbnails/38.jpg)
Thank You