Using Microsoft Graph Toolkit with SPFx solutions

Using Microsoft Graph Toolkit with SPFx solutions

SharePoint Framework (SPFx) is an extensibility model for Microsoft 365 enabling developers to build different kinds of extensibility for Microsoft Viva, Microsoft Teams, Outlook, Microsoft 365 app (Office), and SharePoint. SPFx has multiple benefits like automatic Single Sign On, automatic hosting in the customer tenant, reuse same code across the service and industry standard web stack tooling.

  • I’d like to use the awesome Microsoft Graph Toolkit with my SPFx solutions. Is this possible?
  • That is a great question. You can absolutely use the Microsoft Graph Toolkit (MGT) within your SPFx solutions. MGT is an awesome set of controls which increase the productivity of the developers and helps you to implement polished UX which is connected to the Microsoft Graph APIs with few lines of code.

This blog post is part of a month long SPFx series for January 2023. Each business day we’ll publish a new blog post covering different aspects of the SPFx.

Using Microsoft Graph Toolkit with SPFx solutions

Using Microsoft Graph Toolkit (MGT) within the SPFx solutions is really straightforward and can be done easily as the MGT takes advantage of the fully automatic single-sign. This means that the token handling is completely automatic, and you can focus on building your custom experience.

With MGT you can create engaging solutions with only a few lines of code and with SPFx – your solution is automatically hosted and available for production usage with few simple steps.

MGT loves SPFx

The process to get started on using the MGT within your SPFx solution is as follows:

  1. Set up your development environment and create a SPFx solution
  2. Install the Microsoft Graph Toolkit SharePoint Framework package to solution project
  3. Import the SharePoint Provider in your code
  4. Use MGT components based on your business requirements
  5. Configure permissions for the SPFx solution in package-solution.json file
  6. Deploy the Microsoft Graph Toolkit SharePoint Framework package to tenant app catalog – this package contains MGT SPFx provider as a library component which is then used by all SPFx solutions in the tenant
  7. Build and deploy your solution to the tenant - remember to grant the required API permissions
  8. Test your solution and start using it in the production

Here’s a great video by Sébastien Levert (Microsoft) on the required steps.

Documentation and references for the Microsoft Graph Toolkit usage within SPFx solutions

Frequently asked questions on MGT usage within SPFx solutions

Do I need to use MSAL in my code to make this work?

No. MSAL and auth is completely automatic with the SPFx and you do not need to perform any additional tricks to get the access token for the used APIs. All of this is abstracted from your code.

Can I use any Microsoft Graph Toolkit Control?

Yes. As long as you grant the permissions for the SPFx solution for them. This really comes back to ensure that you have requested and granted the right permissions for the controls using the permission request model from the package-solution.json file.

References

Here are some initial references to get started with the SPFx in your development. Please do provide us with feedback and suggestions on what is needed to help you to get started with the SPFx development for Microsoft 365.

We will provide more details on the different options and future direction of the SPFx in upcoming blog posts. This post focused on the getting started steps with SPFx - more details coming up with this series with one post within each business day of January 2023.