Download to read offline
Uploaded byDavid Parker
Visio in the cloud
The document provides an overview of Visio's evolution and features, detailing its transition from a building architect's tool to a comprehensive software solution for diagramming and process management. Key highlights include data-driven diagrams, cloud integration, and advanced add-in capabilities, emphasizing its role in various fields such as organizational and facility management. The content also outlines resources for developers and users, promoting the use of Visio via Office 365 and various integration options.
More Related Content
![[Draskovic] The next chapter: What's new in SharePoint Server 2019?](https://cdn.slidesharecdn.com/ss_thumbnails/emu0xnrcqfqlcb5tqaku-signature-d4523b3bf020616e67040d2a940ba8bf9aeab187b20da49956548f98de22ea12-poli-180606121948-thumbnail.jpg?width=640&height=640&fit=bounds)
Visio in the cloud
- 2. Visio BVISUAL.NET visiorules.com blog.bvisual.net visualizinginformation.com • Started asbuilding 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 WorkFlow Design Mockup Planning IT Management Process Modeling Mind mapping Dashboard Quality Management Software Development Layout Design
- 4. A C CE 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 Marketplacefor 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 forOffice365 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 VisioPro 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 forthe 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 inOneDrive 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) WindowsDesktop (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.
- 20.
- 21.
- 22. • • • • • • • • • Text Callouts Icon Sets DataBars Color By Value
- 23.
- 24.
- 25. Content Creator Create Data-linkedDiagram 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 • • • • SharePointPage Iframe • Embedded Visio diagram Script Editor Web Part • JS code to interact with the embedded diagram
- 30.
- 35.
- 36.
- 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) Basedon 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 MicrosoftVisio 2010 Demo Content Pack Visio JavaScript APIs 1.1 Visio Development Visio Blog Microsoft Tech Community
- 42. John Goldsmith (UK) ChrisRoth (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 PART2 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 tasksin 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 allproductsRulesTools Metro Icons visViewer Document ImagermultiSelect pdSelect Multi-Language Text
- 46.
Editor's Notes
- #3 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
- #7 Developing Microsoft Visio Solutions - https://msdn.microsoft.com/en-us/library/aa245244(v=office.10).aspx
- #13 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
- #14 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
- #32 <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>