Visio in the cloud
•Download as PPTX, PDF•
0 likes•1,205 views
Microsoft have just announced the public preview of Visio Online. This includes a JavaScript API. More power will be added in the furture ....
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Visio in the cloud
Similar to Visio in the cloud (20)
Recently uploaded
Recently uploaded (20)
Visio in the cloud
- 2. Visio BVISUAL.NET visiorules.com blog.bvisual.net visualizinginformation.com • Started as building architect (RIBA) • Linked CAD to databases • Switched to Visio in mid ‘90’s • Visio Corp. European Business Partner 1997 • Founded bVisual 1998, MS Partner • Visio consultant, developer, trainer, blogger, author • 14 years MVP bit.ly/1SeVfwW bVisual.net
- 3. VISIO FOR EVERYONE Organizational Management Facility Management Work Flow Design Mockup Planning IT Management Process Modeling Mind mapping Dashboard Quality Management Software Development Layout Design
- 4. A C C E L E R AT E D PA C E O F C A PA B I L I T Y D E L I V E R Y N E W R E L E A S E S E V E R Y 3 Y E A R S T R A D I T I O N A L D E V E L O P M E N T C Y C L E I N N O V A T I O N I N T H E C L O U D CONSISTENC Y WITH OFFIC E DATA CONNECTIV IT Y S H A R E P O I N T I N T E G R A T I O N , E N H A N C E M E N T S T O P R O C E S S M A N A G E M E N T V I S I O W I T H C L O U D S U B S C R I P T I O N GETTING STARTED EXPERIENCE ONE-STEP DATA LINKING SECURITY AND COMPLIANCE CORE DIAGRAMMING SOLUTION UPDATE A STRONG DECADE OF INNOVATIONS
- 5. Core Investment Areas Data-driven diagrams Operational intelligence dashboards Data Marketplace for third- party content Smart diagram API Ecosystem Native apps for iPad and iPhone Intuitive diagramming in the web Mobile and cloud Natural user interface Modern templates, add-ins, and shapes Apps and services integration Windows desktop JS API for the web app
- 6. 1990s • VBA • C++ Add-ons 2000s • COM Add-ins • VSTO Add-ins 2010s • Open Standards (OPC) • SharePoint add- ins • Office add-ins
- 7. Visio Pro for Office365 Continual updates Advanced add-ins Cloud deployment Office365 benefits Visio Professional Advanced templates Data linking Data graphics Validation rules Co-authoring Secure diagrams Visio Standard Basic templates View / Edit graphics View / Edit data Printing Export to many formats
- 9. Windows OS File Store Cloud Visio Pro for Office365 Visio Professional Visio Standard (licensed) Any modern browser iPad/iPhone Visio Online (free) Visio Viewer for iOS (free)
- 10. Visio Online - Full fidelity access across devices View in high fidelity from anywhere. View Visio diagrams in full fidelity in your favorite browser. Hyperlink and shape data. View shape data and navigate to hyperlinked document with ease. Real-time shape data refresh. Obtain the most up- to-date diagram details using data refresh and Shape Details pane. Search with ease. Search text in metadata to locate shapes in large diagrams.
- 11. JS API for the web Interactive dashboards. Create operational dashboards with rich interactions such as drill-down and workflow integration using JS API. Process portal. Build process library with simple navigation. SharePoint mashup. Mashup Visio diagrams with data and content on SharePoint to create no-code solutions.
- 12. Visio documents in OneDrive or SharePoint Edit in Visio Pro for Office365 * Create / update diagrams View / Edit / Refresh data View / edit / follow hyperlinks View / edit layers Print / Export View in Visio Online Viewer View / refresh data Follow hyperlinks JavaScript API View in Visio Viewer for iOS ** View layers Print Share * Windows only ** iOS only
- 13. SharePoint Web page* (View) Windows Desktop (Create/Edit) Data source Visio document JavaScript C++ .Net VB VBA VBA Visio document SharePoint / OneDrive for Business Visio document (.vsd,.vsdx.vs dm) * Also view in Outlook.com, Hotmail and Exchange Online
- 15. • • • • •
- 16. •2D (Box) •1D (Connectors) •Containers & Lists •Callouts Types of Shapes •Master – Shape Instance •Connectivity •Containment •Grouping Relationships •Layers •Z-Order Display •Shape Data •Cell formulas •Events Content Sensitive
- 18. • • • • • •
- 22. • • • • • • • • • Text Callouts Icon Sets Data Bars Color By Value
- 24. • • • • • • • •
- 25. Content Creator Create Data-linked Diagram using Data Linking and Data Graphics Data Source • Excel Services • SharePoint Service List Data Consumer • Updates Data Graphics by clicking refresh button • Data refresh can be automated by setting interval time Content Creator Save VSDX/M file to SP/OOS Server Data Consumer • Views data-linked diagram in web browser • Can open the diagram in Visio Import latest data to update Data Graphics
- 27. VISIO JAVASCRIPT API • • • • SharePoint Page Iframe • Embedded Visio diagram Script Editor Web Part • JS code to interact with the embedded diagram
- 37. application showToolbars load(param: object) document application pages view getActivePage() load(param: object) setActivePage(PageName: string) startDataRefresh() documentview disableHyperlinks disablePan disableZoom hideDiagramBoundry load(param: object) page height index isBackground name width shapes view activate() load(param: object) pagecollection items getCount() getItem(key: number or string) load(param: object) pageview zoom centerViewportOnShape(ShapeId: number) fitToWindow() getPosition() getSelection() isShapeInViewport(Shape: Shape) load(param: object) setPosition(Position: Position) selection shapes load(param: object) shapecollection items getCount() getItem(key: number or string) load(param: object) Based on data from GitHub: OfficeDev/office-js-docs repository (VisioJs_1.1_OpenSpec branch) as of 26th January 2017 Courtesy of visualSignals ltd at http://visualsignals.typepad.co.uk/vislog/
- 38. highlight color width load(param: object) hyperlink address description subAddress load(param: object) hyperlinkcollection items getCount() getItem(Key: number or string) load(param: object) shape id name select text hyperlinks shapeDataItems subShapes view getBounds() load(param: object) shapedataitem format formattedValue label value load(param: object) shapedataitemcollection items getCount() getItem(key: string) load(param: object) shapeview highlight addOverlay(OverlayType: OverlayType, Content: string, HorizontalAlignment: HorizontalAlignment, VerticalAlignment: VerticalAlignment, Width: number, Height: number) load(param: object) removeOverlay(OverlayId: number) Based on data from GitHub: OfficeDev/office-js-docs repository (VisioJs_1.1_OpenSpec branch) as of 26th January 2017 Courtesy of visualSignals ltd at http://visualsignals.typepad.co.uk/vislog/
- 39. boundingbox height width x y load(param: object) loadoption select expand top skip position x y load(param: object) Based on data from GitHub: OfficeDev/office-js-docs repository (VisioJs_1.1_OpenSpec branch) as of 26th January 2017 Courtesy of visualSignals ltd at http://visualsignals.typepad.co.uk/vislog/ datarefreshcomplete eventargs pageloadcomplete eventargs selectionchanged eventargs shapemouseenter eventargs shapemouseleave eventargs
- 41. Developing Microsoft Visio Solutions Microsoft Visio on YouTube Microsoft Visio 2010 Demo Content Pack Visio JavaScript APIs 1.1 Visio Development Visio Blog Microsoft Tech Community
- 42. John Goldsmith (UK) Chris Roth (Germany/USA) Senaj Lelic (Germany) David Parker (UK) John Marshall (Canada) Scott Helmers (USA) Michel Laplane (France) Sandro Pereira (Portugal) Ed Richard (Australia)
- 43. PART 1 PART 2 https://channel9.msdn.com/Blogs/MVP-Office-Dev/Visio-a-flyby-for-developers-Part-2https://channel9.msdn.com/Blogs/MVP-Office-Dev/Visio-a-flyby-for-developers-Part-1
- 44. • http://bit.ly/2jFsy0j Basic tasks in Visio Online • http://bit.ly/2jdkGHa Importing data into Visio, an overview • http://bit.ly/2jFiEM5 Import data to shapes in your drawing • http://bit.ly/2ktWb5B Data refresh for Visio Online • http://bit.ly/2jxwnXL Visio Online FAQ
- 45. visit bvisual.net for all productsRulesTools Metro Icons visViewer Document ImagermultiSelect pdSelect Multi-Language Text
Editor's Notes
- Visit http://www.bvisual.net to find list of add-ins for Visio (some free) inquire about Visio knowledge transfer get development service for Visio shape libraries, templates and add-ins Visit http://blog.bvisual.net for a technical blog for people interested in learning more about Visio
- Developing Microsoft Visio Solutions - https://msdn.microsoft.com/en-us/library/aa245244(v=office.10).aspx
- As of November 2016 Visio Online Viewer does not support layers Visio Viewer for iPad does not allow shape data or hyperlinks to be viewed
- As of November 2016 * Windows OS only ** iPad only Visio Online Viewer does not support layers Visio Viewer for iPad does not allow shape data or hyperlinks to be viewed
- <script src='https://visioonlineapi.azurewebsites.net/visio.embed.js' type='text/javascript'/> </script> Enter Visio File Url:<br/> <script language="javascript"> document.write("<input type='text' id='fileUrl' size='120'/>"); document.write("<input type='button' value='InitEmbeddedFrame' onclick='initEmbeddedFrame()' />"); document.write("<br />"); document.write("<input type='button' value='SelectedShapeText' onclick='getSelectedShapeText()' />"); document.write("<textarea id='ResultOutput' style='width:350px;height:60px'> </textarea>"); document.write("<div id='iframeHost' />"); var textArea; // Loads the Visio application and Initializes communication between developer frame and Visio online frame function initEmbeddedFrame() { textArea = document.getElementById('ResultOutput'); var sessionInfo = Math.random().toString(); var origin = window.location["origin"] || window.location.protocol + "//" + window.location.host; var iframeElement = document.createElement("iframe"); iframeElement.id = "embed-iframe"; iframeElement.style.height = "900px"; iframeElement.style.width = "100%"; var url = document.getElementById('fileUrl').value; if (!url) { window.alert("File URL should not be empty"); } // APIs are enabled for EmbedView action only. url = url.replace("action=view","action=embedview"); url = url.replace("action=interactivepreview","action=embedview"); iframeElement.src = url + "&EmbeddingPageOrigin=" + encodeURIComponent(origin) + "&EmbeddingPageSessionInfo=" + encodeURIComponent(sessionInfo); // load the Visio online application in Iframe document.getElementById("iframeHost").appendChild(iframeElement); OfficeExtension.Embedded.getEmbeddedContext({ sessionInfo: sessionInfo, timeoutInMilliseconds: 60000, forceRefresh: true }).then(function (context) { // Initilization is successful OfficeExtension.Embedded._initInternalConfiguration("webembedrichapi.debug.js"); textArea.value = "Initilization is successful"; }).catch(function (ex) { // Initilization is failed :-( textArea.value = "Initilization is failed :-("; }); } // Code for getting selected Shape Text using the shapes collection object function getSelectedShapeText() { Visio.run(function (ctx) { var page = ctx.document.getActivePage(); var shapes = page.shapes; shapes.load(); return ctx.sync().then(function () { textArea.value = "Please select a Shape in the Diagram"; for(var i=0; i<shapes.items.length;i++) { var shape = shapes.items[i]; if ( shape.select == true) { textArea.value = shape.text; return; } } }); }).catch(function(error) { textArea.value = "Error: "; if (error instanceof OfficeExtension.Error) { textArea.value += "Debug info: " + JSON.stringify(error.debugInfo); } }); } </script>