SPFx Application customizer to display agenda using Microsoft Graph Toolkit

Published on 15/10/2019

Recently Microsoft Graph Toolkit went GA and I thought this is the perfect time to explore/read about the toolkit and what it offers.

A nice set of UI components with M365 look and feel readily availbale which integrates with Microsoft Graph, multiple providers for seemless authentication and templating options for the components are the prime attractions in the toolkit.

A very detailed first look can be found in this blog by Sergei Sergeev, one of my favourite technical bloggers.

My Events Application customizer

I have quickly created an SPFx Application customizer in under 30 mintues to get the below component up and running and I have not touched the UX part of it!

image-events

How easy was that?

I have used the SharePointProvider to connect to the toolkit and the rest is very similar to any other react SPFx component I have created in the past.

Pros

  • Easy to use components
  • M365 look and feel
  • Seemless Authentication
  • Custom templating

Issues/Unknowns

  • Typescript will throw an error when trying to use a component in tsx. The workaround is to define the custom element in code. Read here
  • Unclear on whether React components can be used inside templates

Source code

Find source code to My events application customizer here https://github.com/rabwill/msgraph-myagenda-panel Once you package and upload solution to the app catalog make sure you approve all requested permissions from the API Management in the admin center. Clone the source and try it yourself. #sharingiscaring