Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating a Visio web part with SharePoint SPFx

98 views

Published on

Watch a webcast of this presentation at https://bvisual.net/2020/02/18/webinar-on-visio-sharepoint-and-teams-using-spfx/ and read about it at https://bvisual.net/creating-visio-tabs-and-apps-for-teams-with-sharepoint-framework-spfx/

Published in: Technology
  • Be the first to comment

Creating a Visio web part with SharePoint SPFx

  1. 1. Visit bVisual.net Embedding Visio diagrams in SharePoint and Teams using SPFx David J Parker, Microsoft MVP (Visio) March 2020
  2. 2. Microsoft MVP (Visio) Independent Visio Consultant bVisual.net @VisioRules visiorules.com blog.bvisual.net visualizinginformation.com • Started as building architect (RIBA) • Linked CAD to databases for merchant banks in London & New York • Switched to Visio in mid ‘90’s • Founded bVisual in 1998 • Visio consultant, developer, trainer, blogger, author • 15 years MVP • UK based, global reach bit.ly/Visio2016Data About David J Parker
  3. 3. Understanding the possibilities with Visio diagrams Reviewing the Visio JavaScript API Introducing the SharePoint Framework (SPFx) Creating a SPFx WebPart Supporting Microsoft Teams Adding the Visio package Agenda
  4. 4. Understanding the possibilities with Visio diagrams
  5. 5. SharePoint Web page (View) Web Windows Desktop (Create/Edit) Windows Desktop SharePoint / OneDrive for Business Cloud Store Positioning Visio in the Web Data source Visio document JavaScript C++ .Net VB VBA VBA Visio document Visio document Power BI Visio document Visio document Power BI Desktop
  6. 6. Interacting with Visio in the Cloud – March 2020 Visio documents in OneDrive or SharePoint Edit in Visio Plan 2* Create/ update diagrams View/Edit data View/ edit/ follow hyperlinks View/ edit layers Search text and data Print / Export Edit in Visio Plan 1 Simple diagrams Print / Export to pdf & image View in Visio File Viewer View data Follow hyperlinks Search text View in Visio Viewer for iOS View layers Search text * Windows only
  7. 7. A Solution with Visio embedded in a SharePoint page
  8. 8. Visio diagrams in file viewer or custom web pages
  9. 9. Visio Desktop Custom Template Custom shapes • Automate appearance, colours, icons, hyperlink • Automatic high contrast text Linked SharePoint Lists • Centralise data for consistency • Automatically update shape data and colours Accessibility • Automate Alt Text • Automate text high contrast • Expose navigation order to interface Hyperlinks • Visio page to Visio page • Visio document to Visio document • Visio shape to documentation Validation rules • Ensure correct structure
  10. 10. JavaScript API aided by Visio ShapeSheet Page loaded • Web part height adjusted suit the aspect ratio of the page • Significant shapes listed in navigation order • Legend is automatically displayed List item selected • Shape selected • Shape text, alt title and description displayed • Previous and Next buttons displayed • Hyperlinks are grouped by type Shape selected • Arrows go to other pages Mouse enters shape • Custom tooltip appears Shape data • Values provides data for list and groupings • Alt title and description automatically updated from shape data • Navigation order exposed in data Shape hyperlinks • Arrows can be clicked to go to other pages • Some hyperlinks open a target Visio document within the same web part • Some hyperlinks open external links in a controlled manner Shape graphics • Graphics change by data value or containment • Icons displayed if specific data or hyperlinks present
  11. 11. Reviewing the Visio JavaScript API
  12. 12. Hierarchy of Objects in the JavaScript API Application Document DocumentView Page(s) PageView Selection/ Shape(s) ShapeView ShapDataItem(s) Hyperlink(s) Comment(s) Comment(s)
  13. 13. Overview Application Document DocumentView Page PageView PageCollection ShapeCollection Shape ShapeView ShapeDataItemCollection HyperlinkCollection Hyperlink ShapeDataItem CommentCollection Comment <<Interface>> BoundingBox <<Interface>> Highlight <<Interface>> Position RequestContext Selection <<Interface>> DataRefreshCompleteEventArgs <<Interface>> DocumentLoadCompleteEventArgs <<Interface>> PageLoadCompleteEventArgs <<Interface>> PageRenderCompleteEventArgs <<Interface>> SelectionChangedEventArgs <<Interface>> ShapeMouseEnterEventArgs <<Interface>> ShapeMouseLeaveEventArgs <<Enumeration>> ErrorCodes <<Enumeration>> OverlayHorizontalAlignment <<Enumeration>> OverlayType <<Enumeration>> OverlayVerticalAlignment <<Enumeration>> ToolBarType Visio JavaScript API -context -load(...) -showBorders -showToolbars -set(...) -showToolbar(...) -toJSON() -application -getActivePage() -context -pages -view -load(...) -set(...) -setActivePage(...) -startDataRefresh() -toJSON() -context -disableHyperlinks -load(...) -set(...) -disablePan -disablePanZoomWindow -disableZoom -hideDiagramBoundary -toJSON() -allShapes -activate() -context -height -index -load(...) -set(...) -toJSON() -comments -isBackground -name -shapes -view -width -context -load(...) -set(...) -zoom -toJSON() -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -getCount() -items -toJSON() -getItem(...) -load(...) -getBounds() -context -hyperlinks -id -load(...) -set(...) -toJSON() -comments -name -subShapes -view -select -shapeDataItems -text -context -addOverlay(...) -set(...) -highlight -toJSON() -load(...) -removeOverlay(...) -showOverlay(...) -getCount() -toJSON() -getItem(...) -load(...) -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -description -extraInfo -load(...) -toJSON() -address -subAddress -context -format -formattedValue -load(...) -toJSON() -label -value -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -date -text -load(...) -toJSON() -author -set(...) -height -width -x -y -color -width -x -y -(constructor)(url) -document -context -shapes -toJSON() -load(...) -document -success -success -pageName -success -pageName -success -pageName -shapeNames -pageName -shapeName -pageName -shapeName -accessDenied -unsupportedOperation -generalException -itemNotFound -notImplemented -center -left -right -html -image -text -bottom -middle -top -commandBar -pageNavigationBar -statusBar -context -items Classes Interfaces Enums
  14. 14. Application to Page Classes Application Document DocumentView Page PageView PageCollection ShapeCollection Shape ShapeView <<Interface>> BoundingBox <<Interface>> Highlight <<Interface>> Position RequestContext Selection <<Interface>> DataRefreshCompleteEventArgs <<Interface>> DocumentLoadCompleteEven <<Interface>> PageLoadCompleteEventArgs <<Interface>> PageRenderCompleteEventArg<<Enumeration>> ErrorCodes <<Enumeration>> ToolBarType -context -load(...) -showBorders -showToolbars -set(...) -showToolbar(...) -toJSON() -application -getActivePage() -context -pages -view -load(...) -set(...) -setActivePage(...) -startDataRefresh() -toJSON() -context -disableHyperlinks -load(...) -set(...) -disablePan -disablePanZoomWindow -disableZoom -hideDiagramBoundary -toJSON() -allShapes -activate() -context -height -index -load(...) -set(...) -toJSON() -comments -isBackground -name -shapes -view -width -context -load(...) -set(...) -zoom -toJSON() -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -getCount() -items -toJSON() -getItem(...) -load(...) -getBounds() -context -hyperlinks -id -load(...) -set(...) -toJSON() -comments -name -subShapes -view -select -shapeDataItems -text -context -addOverlay(...) -set(...) -highlight -toJSON() -load(...) -removeOverlay(...) -showOverlay(...) -height -width -x -y -color -width -x -y -(constructor)(url) -document -context -shapes -toJSON() -load(...) -document -success -success -pageName -success -pageName -success-accessDenied -commandBar Classes • Application • RequestContext • Document • DocumentView • PageCollection • Page • PageView
  15. 15. Selection and Shape Classes Application Document DocumentView Page PageView PageCollection ShapeCollection Shape ShapeView ShapeDataItemCollection HyperlinkCollection Hyperlink ShapeDataItem CommentCollection Comment <<Interface>> BoundingBox <<Interface>> Highlight <<Interface>> Position RequestContext Selection <<Interface>> DataRefreshCompleteEventArgs <<Interface>> DocumentLoadCompleteEventArgs <<Interface>> PageLoadCompleteEventArgs <<Interface>> PageRenderCompleteEventArgs<<Enumeration>> ErrorCodes <<Enumeration>> ToolBarType -context -load(...) -showBorders -showToolbars -set(...) -showToolbar(...) -toJSON() -application -getActivePage() -context -pages -view -load(...) -set(...) -setActivePage(...) -startDataRefresh() -toJSON() -context -disableHyperlinks -load(...) -set(...) -disablePan -disablePanZoomWindow -disableZoom -hideDiagramBoundary -toJSON() -allShapes -activate() -context -height -index -load(...) -set(...) -toJSON() -comments -isBackground -name -shapes -view -width -context -load(...) -set(...) -zoom -toJSON() -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -getCount() -items -toJSON() -getItem(...) -load(...) -getBounds() -context -hyperlinks -id -load(...) -set(...) -toJSON() -comments -name -subShapes -view -select -shapeDataItems -text -context -addOverlay(...) -set(...) -highlight -toJSON() -load(...) -removeOverlay(...) -showOverlay(...) -getCount() -toJSON() -getItem(...) -load(...) -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -description -extraInfo -load(...) -toJSON() -address -subAddress -context -format -formattedValue -load(...) -toJSON() -label -value -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -date -text -load(...) -toJSON() -author -set(...) -height -width -x -y -color -width -x -y -(constructor)(url) -document -context -shapes -toJSON() -load(...) -document -success -success -pageName -success -pageName -success-accessDenied -commandBar -context -items Classes • ShapeCollection • Selection • Shape • ShapeView • ShapeDateItemCollection • HyperlinkCollection • CommentCollection • ShapeDataItem • Hyperlink • Comment
  16. 16. Misc Interfaces and Enums DocumentView PageView ShapeView <<Interface>> BoundingBox <<Interface>> Highlight <<Interface>> Position RequestContext Selection <<Interface>> DataRefreshCompleteEventArgs <<Interface>> DocumentLoadCompleteEventA <<Interface>> PageLoadCompleteEventArgs <<Interface>> PageRenderCompleteEventArgs <<Interface>> SelectionChangedEventArgs <<Interface>> ShapeMouseEnterEventArgs <<Interface>> ShapeMouseLeaveEventArgs <<Enumeration>> ErrorCodes <<Enumeration>> OverlayHorizontalAlignment <<Enumeration>> OverlayType <<Enumeration>> OverlayVerticalAlignment <<Enumeration>> ToolBarType -toJSON() -view -load(...) -setActivePage(...) -startDataRefresh() -context -disableHyperlinks -load(...) -set(...) -disablePan -disablePanZoomWindow -disableZoom -hideDiagramBoundary -toJSON() -activate() -load(...) -set(...) -toJSON() -name -shapes -view -width -context -load(...) -set(...) -zoom -toJSON() -getBounds() -load(...) -set(...) -toJSON() -subShapes -view -shapeDataItems -text -context -addOverlay(...) -set(...) -highlight -toJSON() -load(...) -removeOverlay(...) -showOverlay(...) -height -width -x -y -color -width -x -y -(constructor)(url) -document -context -shapes -toJSON() -load(...) -document -success -success -pageName -success -pageName -success -pageName -shapeNames -pageName -shapeName -pageName -shapeName -accessDenied -unsupportedOperation -generalException -itemNotFound -notImplemented -center -left -right -html -image -text -bottom -middle -top -commandBar -pageNavigationBar -statusBar Miscellaneous Interfaces • BoundingBox • Highlight • Position Enums • ErrorCodes • ToolBarType • OverlayType • OverlayHorizontalAlignment • OverlayVerticalAlignment
  17. 17. EventArg Interfaces DocumentView PageView ShapeView CommentCollection Comment <<Interface>> BoundingBox <<Interface>> Highlight <<Interface>> Position RequestContext <<Interface>> DataRefreshCompleteEventArgs <<Interface>> DocumentLoadCompleteEventArgs <<Interface>> PageLoadCompleteEventArgs <<Interface>> PageRenderCompleteEventArgs <<Interface>> SelectionChangedEventArgs <<Interface>> ShapeMouseEnterEventArgs <<Interface>> ShapeMouseLeaveEventArgs <<Enumeration>> ErrorCodes <<Enumeration>> OverlayHorizontalAlignment <<Enumeration>> OverlayType <<Enumeration>> OverlayVerticalAlignment <<Enumeration>> ToolBarType Visio JavaScript API -context -disableHyperlinks -load(...) -set(...) -disablePan -disablePanZoomWindow -disableZoom -hideDiagramBoundary -toJSON() -activate() -load(...) -set(...) -toJSON() -context -load(...) -set(...) -zoom -toJSON() -getBounds() -load(...) -set(...) -toJSON() -context -addOverlay(...) -set(...) -highlight -toJSON() -load(...) -removeOverlay(...) -showOverlay(...) -getCount() -toJSON() -getItem(...) -load(...) -context -description -extraInfo -load(...) -toJSON() -address -subAddress -context -getCount() -items -toJSON() -getItem(...) -load(...) -context -date -text -load(...) -toJSON() -author -set(...) -height -width -x -y -color -width -x -y -(constructor)(url) -document -shapes -toJSON() -load(...) -document -success -success -pageName -success -pageName -success -pageName -shapeNames -pageName -shapeName -pageName -shapeName -accessDenied -unsupportedOperation -generalException -itemNotFound -notImplemented -center -left -right -html -image -text -bottom -middle -top -commandBar -pageNavigationBar -statusBar -context -items EventArgs Interfaces • DataRefreshCompleteEventsArgs • DocumentLoadCompleteEventArgs • PageLoadEventArgs • PageRefreshEventArgs • SelectionChangedEventArgs • ShapeMouseEnterEventArgs • ShapeMouseLeaveEventArgs
  18. 18. Introducing the SharePoint Framework (SPFx)
  19. 19. SPFx is a page and web part model • provides full support for client-side SharePoint development It is framework-agnostic. • use any JavaScript framework like React, Handlebars, Knockout, Angular, and more End users can use SPFx client-side solutions • if approved by the tenant administrators (or their delegates) on all sites • including self-service team, group, or personal sites. SPFx web parts are multi-functional • can be added to both classic and modern pages • can be made into Microsoft Teams Tabs or Personal Apps What is the SharePoint Framework (SPFx )?
  20. 20. Toolset Comparison nodeJs • Asynchronous event-driven JS runtime npm • Node Package Manager Visual Studio Code • Code editor for modern web development Yeoman • Generic scaffolding system TypeScript • Syntactical superset of JavaScript, with static typing Gulp • Build tool
  21. 21. Creating a SharePoint React Web Part
  22. 22. Creating a SharePoint and/or Teams web part •docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant Set up the Office 365 tenant •docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment •MUST be NodeLJ LTS version 10 Set up the development environment •docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part •Select React framework rather than No JavaScript framework •Add url and zoomLevel extra properties, rather than the test* rows Build a web part •docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab Add support for Teams •docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page Deploy to SharePoint •Available as SharePoint web part, a Teams Tab or a Teams Personal App Sync to Teams
  23. 23. Add Visio service to the web part •npm install @types/office-js save • Add type “office-js” to the tsconfig.json Install OfficeJS • Add external reference to visio-web-embedded.js in config/config.json • Create src/shared/services folder • Add index.ts file • Add sample VisioService.ts file from bit.ly/2uQ5dn8 Add Visio Service • Add import { VisioService } from "../../../shared/services"; • Update export visioService: VisioService; Update Props interface •Add .iframeHost{height: 600px;width:100%;} Update styles • Update render() by replacing most <div>s with iframeHost div • Add componentDidMount() and componentDidUpdate() Update tsx file • Add import 'officejs'; • Add import { VisioService } from '../../shared/services'; • Update the interface with visioService: VisioService; • Declare private _visioService: VisioService; • Add onInit() function • Add visioService: this._visioService, to the ReactElement Update WebPart
  24. 24. Add Teams support for the Visio service • docs.microsoft.com/javascript/api/overview/msteams- client?view=msteams-client-js-latest • npm install --save @microsoft/teams-js Install Teams client SDK • Add import * as microsoftTeams from "@microsoft/teams-js"; • Update export teamsContext: microsoftTeams.Context; Update Props interface • Add import * as microsoftTeams from "@microsoft/teams-js"; • Declare private _teamsContext: microsoftTeams.Context; • Update onInit() function to add alternate retVal • Update ReactElement teamsContext: this._teamsContext,Update WebPart
  25. 25. Deploy to SharePoint and Teams •docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page •>gulp bundle --ship •>gulp package-solution --shipDeploy to SharePoint •Available as SharePoint web part, a Teams Tab or a Teams Personal App •Drag and drop the package in sites/AppCatlog/AppCatalog •Tick make available to all sites •Click Sync to Teams Sync to Teams Add the web part in SharePoint Add the Tab in Teams Add the Personal App in Teams
  26. 26. Learn how to integrate data with SmartShapes Mastering Data Visualization with Microsoft Visio… Publisher’s website : bit.ly/Visio2016Data Power Up Visio … a White Paper on Visio with Power BI Available from : bit.ly/PowerUpVisio
  27. 27. © Copyright Microsoft Corporation. All rights reserved. Creating Visio Tabs and Apps for Teams with SharePoint Framework (SPFx) /bvisual.net/creating-visio-tabs-and-apps-for-teams-with-sharepoint-framework-spfx/
  28. 28. Visit bVisual.net Thank you. David J Parker, Microsoft MVP (Visio) davidp@bvisual.net blog.bvisual.net @VisioRules

×