Creating a Visio web part with SharePoint SPFx
â˘Als PPTX, PDF herunterladenâ˘
1 gefällt mirâ˘457 views
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/
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ăhnlich wie Creating a Visio web part with SharePoint SPFx
Ăhnlich wie Creating a Visio web part with SharePoint SPFx (20)
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (20)
Creating a Visio web part with SharePoint SPFx
- 1. Visit bVisual.net Embedding Visio diagrams in SharePoint and Teams using SPFx David J Parker, Microsoft MVP (Visio) March 2020
- 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. 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. Understanding the possibilities with Visio diagrams
- 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. 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. A Solution with Visio embedded in a SharePoint page
- 8. Visio diagrams in file viewer or custom web pages
- 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. 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. Reviewing the Visio JavaScript API
- 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. 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. 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. 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. 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. 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
- 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. 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. Creating a SharePoint React Web Part
- 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. 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. 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. 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. 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. Š 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. Visit bVisual.net Thank you. David J Parker, Microsoft MVP (Visio) davidp@bvisual.net blog.bvisual.net @VisioRules
Hinweis der Redaktion
- I am proud to have been a Microsoft MVP for 15 years, but before that I was a European Business Partner for Visio Corporation until they were acquired by Microsoft in 2000. At that time I was mainly concerned with visualizing the location of personnel and equipment in trading floors and comms rooms of large merchant banks in London and New York. Visio provided the graphical interface into the reams of information held in the corporate database, but it was normally presented to end users as paper plots and prints, created as weekly or monthly reports. We could respond to ad-hoc queries by using our Visio and database skills to locate, highlight and display or print particular regions or assets, but often this required a little bit of coding skills to facilitate it. Indeed, one of my main reasons for starting to use Visio was its graphical flexibility and ability to link shapes to database records. How much easier would it have been if I could have embedded my Visio drawings into PowerBI, and link the shapes to the database directly? The end-user could then ask their own questions, without having to get me to write some custom code. See http://bvisual.net/Case_Studies/ChaseManhattanBank.aspx for a case study of my experiences back then. See http://visio.mvps.org/History/default.html for history of Visio
- https://docs.microsoft.com/javascript/api/visio https://docs.microsoft.com/office/dev/add-ins/reference/overview/visio-javascript-reference-overview
- JavaScript API
- Search text can be entered utilizing SharePoint search of both shape text and shape data Visio diagrams that contain a match are displayed in a list A customised SharePoint web page is opened The first page of the Visio document is loaded and the web part height automatically changes to suit the aspect ratio of the page, maintaining the width as a constant thus allowing the web page height to vary The significant shapes are listed in navigation order if a user selects a list item, then the shape text, Alt title and description are displayed Previous and Next buttons displayed automatically to assist navigation Any hyperlinks are grouped by type A legend is automatically displayed Arrows can be clicked to go to other pages Taller diagrams can be scrolled vertically The shape text automatically displays black or white for the highest contrast The pan & zoom window can be opened The tooltip appears automatically when the cursor enters a shape Can use the pan and zoom window to re-position the visible area The diagram can be toggled between cross-functional and simple flowchart The grade plates automatically appear if displayed without swimlanes Each shape automatically displays icons to denote if specific data or hyperlinks are present
- This was all achieved with just the custom ShapeSheet formulas, and built-in Visio functionality, such as linking to external data. In fact, all of the custom shapes were only provided in the document stencil of the template, so no custom stencils were provided, and the template could be delivered as a content type in a SharePoint library for all diagram creators to utilise.
- https://docs.microsoft.com/javascript/api/visio https://docs.microsoft.com/office/dev/add-ins/reference/overview/visio-javascript-reference-overview
- The Visio JavaScript API provides read-only access to the Visio documents, and the hierarchy of the classes available can conceptually understood as follows: This is broadly a small subset of the Visio desktop API, with a similar hierarchy. There is more detail of the API at docs.microsoft.com/javascript/api/visio, and an overview is available at docs.microsoft.com/office/dev/add-ins/reference/overview/visio-javascript-reference-overview. Here is a breakdown of the classes, interfaces and enums:
- These classes provide context of the Visio diagram in view, and there can only be one Document object within the web part at any time. It is important to realise that a Page needs to be loaded into view before any of its contents, such as shapes or comments can be accessed. Most of the UI elements that are visible in the default Visio file viewer can be made visible or invisible in the Application or DocumentView objects. Each page, and shape, can contain a collection of comments. It is often useful to disable the hyperlinks in the web-part and to handle them either in a panel alongside or within a popup dialog. This will provide the opportunity to intercept and transform these hyperlinks into something more useful, such as allowing the switching the Visio document within the web-part.
- The sub-shapes, data, hyperlinks and comments of each shape can be loaded, but there is no access to any data held in the User-Defined Cells section of the Visio shapes. This means that any values, such as the navigation order, that Visio desktop stores in this section must be made visible in the Shape Data section if its value needs to accessed using the JavaScript API. In addition to setting the selected shape within the visible page, there is the ability to add text, image or html overlays to shapes. Note that the ShapeDataItem object does not have the Type or Visible properties that can be found in the Visio desktop shape objects. Similarly, the Hyperlink object does not have a Visible property. Therefore it is usually best not to display the built-in Shape Info panel which does not control the display of these items.
- These few interfaces and enums provide a structure to some properties.
- There are very few events available within the API, but they are sufficient to create interactive dashboards.
- It runs in the context of the current user and connection in the browser. There are no iFrames for the customization (JavaScript is embedded directly to the page). The controls are rendered in the normal page DOM. The controls are responsive and accessible by nature. It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more. It is framework-agnostic. You can use any JavaScript framework that you like: React, Handlebars, Knockout, Angular, and more. The toolchain is based on common open source client development tools such as npm, TypeScript, Yeoman, webpack, and gulp. Performance is reliable. End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites. SPFx web parts can be added to both classic and modern pages
- SharePoint Framework (SPFx) is a webpart component and page model that fully supports customer-side SharePoint development tasks, provides easy integration with SharePoint data, and supports open source tools. With SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to create productive applications and experiences that are responsive and usable on mobile from the first Day. SharePoint Framework works for SharePoint locally and SharePoint Online (SharePoint 2016 Feature Pack 2 and SharePoint 2019). The main features of SharePoint Framework are: It runs in the context of the current user and the connection in the browser. There is no iFrame for customization (JavaScript is embedded directly in the page). Controls are displayed in a normal page DOM. The controls are responsive and accessible by nature. It allows the developer to access the lifecycle, in addition to rendering, loading, serialization and de-serialization tasks, configuration modification, and much more. It does not depend on infrastructure. You can use any JavaScript infrastructure that's right for you: React, Handlebars, Knockout, Angular and more. The toolchain uses common open source customer development tools, such as npm, TypeScript, Yeoman, webpack and Gulp. Reliable performance. End-users can use customer-side SPFx solutions approved by customer administrators (or their delegates) on all sites, including group sites, personal sites or self-service team sites. WebPart SPFx components can be added to classic and modern pages.
- Andrew Connell, MVP at Voitanus https://www.voitanos.io/understanding-the-sharepoint-framework-development-toolchain-email-course
- https://docs.microsoft.com/javascript/api/visio https://docs.microsoft.com/office/dev/add-ins/reference/overview/visio-javascript-reference-overview
- https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab https://bvisualnet.sharepoint.com/sites/AppCatalog/AppCatalog/Forms/AllItems.aspx HelloWorldProp.ts HelloWorld.tsx               <p className={ styles.description }>{escape(this.props.url)}</p>               <p className={ styles.description }>{escape(this.props.zoomLevel)}</p> HelloWorldWebPart.ts         url: string;         zoomlevel: string;               }),               PropertyPaneTextField('url', {                 label: 'Visio Document URL',                 multiline: true               }),               PropertyPaneTextField('zoomlevel', {                 label: 'Zoom Levelâ HelloWorldWebPart.manifest.json ,       "url": "https://bvisualnet.sharepoint.com/:u:/r/vol/_layouts/15/Doc.aspx?sourcedoc=%7BCB3B9A82-B678-48C8-AF58-44446BD27C1B%7D&file=GAP.vsdx&action=default",       "zoomlevel": "100"
- https://docs.microsoft.com/javascript/api/overview?view=visio-js-1.1 The JavaScript API for Office enables you to create web applications that interact with the object models in Office host applications. Use this section to learn more about the classes, methods, and other types available for building Office Add-ins. "officejs": { "path": "https://appsforoffice.microsoft.com/embedded/1.0/visio-web-embedded.js", "globalName": "officejs" } Tsx <div id='iframeHost' className={styles.iframeHost}></div> export * from "./VisioService"; .iframeHost{ height: 600px; width:100%; }     public componentDidMount() {         if (this.props.url) {           this.props.visioService.load(this.props.url, this.props.zoomLevel);         }       }       public async componentDidUpdate(prevProps: IHelloWorldProps) {         if ((this.props.url && this.props.url !== prevProps.url) ||           (this.props.zoomLevel != prevProps.zoomLevel)) {           this.props.visioService.load(this.props.url, this.props.zoomLevel);         }       } private _visioService: VisioService;   public onInit(): Promise<void> {     this._visioService = new VisioService(this.context);     let retVal: Promise<any> = Promise.resolve();     return retVal;   } visioService: this._visioService,
- https://docs.microsoft.com/javascript/api/overview?view=visio-js-1.1     if (this.context.sdks.microsoftTeams) {       retVal = new Promise((resolve, reject) => {           microsoftTeams.getContext(context => {           this._teamsContext = context;           resolve();         });       });     }
- https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab https://bvisualnet.sharepoint.com/sites/AppCatalog/AppCatalog/Forms/AllItems.aspx HelloWorldProp.ts HelloWorld.tsx               <p className={ styles.description }>{escape(this.props.url)}</p>               <p className={ styles.description }>{escape(this.props.zoomLevel)}</p> HelloWorldWebPart.ts         url: string;         zoomlevel: string;               }),               PropertyPaneTextField('url', {                 label: 'Visio Document URL',                 multiline: true               }),               PropertyPaneTextField('zoomlevel', {                 label: 'Zoom Levelâ HelloWorldWebPart.manifest.json ,       "url": "https://bvisualnet.sharepoint.com/:u:/r/vol/_layouts/15/Doc.aspx?sourcedoc=%7BCB3B9A82-B678-48C8-AF58-44446BD27C1B%7D&file=GAP.vsdx&action=default",       "zoomlevel": "100"
- Of course, I would encourage you all to invest in my book about data visualization with Visio, which covers just about everything except Power BI, so I have also written a White Paper that you can download via my website.