My path to receive the Microsoft MVP award

On the 1st of September, I opened my inbox and found a very  pleasant surprise. I had received the Microsoft MVP for Office Development award!

This post covers some of the things that led to the MVP award and also some personal thoughts about the MVP award program. Please note that this is only my own opinion, I don’t know the award criteria. Hope you find the post interesting.

Continue reading “My path to receive the Microsoft MVP award”

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 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.

"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.

Evolve conference – Birmingham, UK

The Evolve conference in Birmingham, UK, is less than a month away!

The conference location is superb for anyone in or outside of the UK. It will be next to Birmingham airport and the NEC, so you can come by plane, train or car.

If you live around Birmingham, then you really have no excuse to miss it as the conference is free and the agenda is awesome!

Save you place as soon as possible here

I’m particularly super excited this year as I have been accepted as a speaker to deliver a session on how to get started with Azure Resource Manager (ARM) templates. This time I’m stepping outside of the SharePoint realm as I really like ARM templates and thought this session would be a great fit for the conference.

Finally, a special thanks to the organizers and sponsors for making this conference a reality.