SharePoint Framework with Visio JavaScript APIs

I’ve recently worked on a client project where I used the Visio JavaScript APIs to create a custom SharePoint web part to embed Visio files on a SharePoint page, and access custom properties on the Visio file that were then used to generate a custom and dynamic UI.

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)

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

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:

“officejs”: {
“globalName”: “officejs”
}
Next, open your web part TS file and add the following import to load the module previously declared: import ‘officejs’.
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
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). Give it a try and any feedback is welcome.
Advertisements

3 thoughts on “SharePoint Framework with Visio JavaScript APIs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s