Make no mistake, I’m not a Visio expert. Another member of the team (a Visio MVP!) generated and customized the Visio files as required. I was amazed with some of the things that Visio can do that I was not aware of before the project started.
Unfortunately, due to client constraints, we had to create the solution as a classic script editor web part. But I was determined to create a sample SharePoint framework web part with some of my findings.
You can get the code from my GitHub repository here.
I created a pull request to the SharePoint PnP sample web parts repository, so will update this paragraph later.
Update September 2018: The sample is now also available on the SharePoint PnP sample web parts repository
Before you can start development, you will need some additional configuration.
- Load external script
- Install type definitions
Load external script
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.
Next, open your web part TS file and add the following import to load the module previously declared: import ‘officejs’.
Install type definitions
Now that the script reference is complete, we need to add the type definition files for Office: @types/office-js. You can install them from npm as a dev dependency
npm install --save-dev @types/office-js
But configuration is not yet complete as an additional step is required. After you install the type definitions, if you try to use a type or class from the imported ‘officejs’ module, it will still not be recognized. In order to resolve this, you need to update tsconfig.json to include the specific office-js type.
"types": [ "es6-promise", "webpack-env", "office-js" ],
And that’s it!
My sample web part has a VisioService.ts file with some sample code and some basic operations (some of them based on documentation samples converted to TypeScript) that you can reuse. Give it a try and any feedback is welcome.