SharePoint Framework with Visio JavaScript APIs

I’ve recently worked on a client project where I used the Visio JavaScript APIs in a custom SharePoint web part. The web part was used to embed Visio files on a SharePoint page, and access custom properties from the file. The property values are then used to generate a custom and dynamic user interface.

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

Setup

Before you can start development, you will need some additional configuration.

We are going to use the JavaScript dependencies for Visio from the original CDN on the API documentation, so we will need two things:

• Load external script
• Install type definitions

Load external script

Start by adding a new entry to the “externals” section of your 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.

"officejs": { 
    "path": "https://appsforoffice.microsoft.com/embedded/1.0/visio-web-embedded.js", 
    "globalName": "officejs" 
} 

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.