05 - Visio Services and the Mashup API

05 - Visio Services and the Mashup API

Visio Services 2013 Mashup API Chris Hopkins Senior Consultant - Premier Developer Practice Microsoft Copyright 2012 Microsoft Corporation Agenda Goals & Challenges Capabilities

Configuration Deployment Copyright 2012 Microsoft Corporation 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 ) 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 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. Copyright 2012 Microsoft Corporation 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. Copyright 2012 Microsoft Corporation Demo Copyright 2012 Microsoft Corporation Agenda Goals & Challenges

Capabilities Configuration Deployment Copyright 2012 Microsoft Corporation VWA JavaScript Object Model VWA Control getActivePage() setActivePage()

diagramComplete Page getShapes() shapeMouseEnter shapeMouseLeave Shapes selectionChanged getItemById()

getItemAtIndex() diagramError Shape Shape getSelectedShape() setSelectedShape() getShapeData() getHyperlinks() 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 Content Editor Web Part Document Library

File containing Visio Web Access Web Part JScript Visio Diagram 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 Copyright 2012 Microsoft Corporation Get the VWA web part instance Getting the VWA Instance web part ID Copyright 2012 Microsoft Corporation

Find the VWA web part instance id View source for the web part page and search for class=VisioWebAccess

Connecting handlers to events Event name Function callback 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

Copyright 2012 Microsoft Corporation Handling the selection changed event 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);

} } } 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 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 Pixel width nextShape.addHighlight(4, "red");

Color, Hex or Name 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! 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 accessing VGS using PNG and HTML only Copyright 2012 Microsoft Corporation

Demo 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 Copyright 2012 Microsoft Corporation Agenda Goals & Challenges Capabilities

Configuration Deployment 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 Copyright 2012 Microsoft Corporation Debugging Debug your scripts using IE10s 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 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

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 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 Copyright 2012 Microsoft Corporation Thank You 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 theCorporation date of Copyright 2012 Microsoft

Recently Viewed Presentations

  • The Fortune is in the Follow Up - Isagenix

    The Fortune is in the Follow Up - Isagenix

    Follow Up Building A Team - Creating Leaders Create the Urgency (24 - 48 hours) The time is NOW o'clock Be enthusiastic NOW Recap Follow up with every prospect until they: Become a customer Become a business partner Tell you...
  • 1 Presented by Jimmy D. Clark July 11,

    1 Presented by Jimmy D. Clark July 11,

    Presented by Jimmy D. Clark July 11, 2006 Characteristics of Best Games: Fun Interactive Adaptive (Flow) Competition Basic principles of Using Games in the Classroom: 1. Relate to
  • The Limits of Translatability Exemplified by Metaphor Translation

    The Limits of Translatability Exemplified by Metaphor Translation

    The most accustomed metaphors, the usual ones, now pass for truths and as standards for measuring the rarer ones. The only intrinsic difference here is between custom and novelty, frequency and rarity. Knowing is nothing but working with the favorite...
  • Plasmid w/ kanamycin resistance (pKAN)

    Plasmid w/ kanamycin resistance (pKAN)

    Humans often cut open plasmids…attach a desired gene…reinsert the plasmid to the bacteria. When complete, the bacteria will contain a new gene (instructions) to create a desired protein such as insulin. ... Plasmid w/ kanamycin resistance (pKAN)
  • OCCUPATINAL LIVER DISEASE Route of Exposure Inhalation  Ingestion

    OCCUPATINAL LIVER DISEASE Route of Exposure Inhalation Ingestion

    Hepatotoxins can block fat metabolism at accumulation of free fatty acids and triglycerides. Fatty liver (steatosis). Patients are usually asymptomatic. Screening tests (AST, ALT) may not detect. steatosis in the absence of inflammation and necrosis.. Diagnosis is complicated by confounding...
  • Modifying Your Teaching Styles  In the Classroom and

    Modifying Your Teaching Styles In the Classroom and

    Questions to ask Parents. IEP/504: Is the individual on an IEP/504 plan at school?. Independent with ADL's: Is the individual able to dress themselves, do laundry, use the stove, cross the street independently, make a sandwich, manage money or checking...
  • AP EURO Unit #1 - Renaissance and Reformation Lesson #2 - The ...

    AP EURO Unit #1 - Renaissance and Reformation Lesson #2 - The ...

    a relatively hidden form of rule. ... They've just surrendered their two-row boat navy without a fight. You're now going to negotiate their fate away, but first, you need to plan your end state. Your group is the newly appointed...
  • Binary Subtraction - Oakland University

    Binary Subtraction - Oakland University

    Times New Roman Helv Courier New Arial Default Design Microsoft Word Document VISIO 5 Drawing Binary Subtraction Binary Subtraction Half Subtractor Full Subtractor Full Subtractor Full Subtractor Full Subtractor Binary Subtraction Negative Numbers Negative Numbers Negative Numbers Finding 2's Complement...