Make no mistake, I’m not a Visio expert. Generation and customization of the Visio files was done by a different element of the team (a Visio MVP!). I was amazed with some of the things that Visio can do that I was absolutely not aware of before the project started.
Unfortunately, this project had to be based on a classic script editor web part, but early on the project I was determined to create a (very basic) sample SharePoint framework web part with some of my findings.
You can get the code from my GitHub repository here.
I have created a pull request to the SharePoint PnP sample web parts repository, so if the PR is merged I will update this paragraph.
Update 2018-08-31: The sample is now also available on the SharePoint PnP sample web parts repository (dev branch as of today)
Before you can start development, you will need some additional configuration.
- Load external script
- Install type definitions
Start by adding a new entry to the “externals” section of you config.json file to load the visio-web-embedded.js file from the appsforoffice.microsoft.com CDN. In this case you will have to also add a “globalName” property to it. To ensure that you use the required format for external scripts, you can use the awesome SPFx Script Check tool from Rencore.
For this script: