May 20th, 2021

Announcing new file components, MSAL 2 Provider, and SharePoint Framework library in Microsoft Graph Toolkit 

Today, we are excited to share a new release of the Microsoft Graph Toolkit. This release includes several exciting new features, including new components for interacting with files from OneDrive and SharePoint, as well as a new authentication provider for MSAL 2.0, a new SharePoint Framework library for Microsoft Graph Toolkit, and more.  

As a recap, the Microsoft Graph Toolkit is a collection of functional UI components and authentication providers that makes your integration with Microsoft Graph as easy as writing two lines of code. If you’re not familiar with the Toolkit yet, learn more by reading our documentation, visiting our component playground, or following the newly available Microsoft Graph Toolkit Learn Path. 

Updating your application 

To take advantage of the new features, you’ll need to update your application to use the newest version of the Microsoft Graph Toolkit. If you’re using the Toolkit via npm, go to your project directory and run: 

Npm i @microsoft/mgt@latest 

If you’re using the Toolkit via unpkg, your application will automatically be updated to the newest version. 

What’s New 

File and File List Components 

We’ve added two new components to the Toolkit for retrieving and rendering files from Microsoft Graph using the OneDrive and SharePoint APIs. These new components make it quick and simple to bring your users’ and/or organizations’ documents and files into your application (including web apps, PWAs, Microsoft Teams tabs, SharePoint webparts, and desktop apps.  

The File component can be used to display a single file or folder that is stored in OneDrive or a SharePoint document library. The component retrieves a file’s data from Microsoft Graph and renders the file using its name, an icon representing the file type, and other configurable properties such as the last modified date, file size, or author. As a developer, all you need to do is drop the component in your app and provide a set of identifiers or a query to the file you want to show. 

The image below shows an example of the same file rendered three times using the file component, but configured with different views and properties. 

 Example of the same file rendered three times using the file component

Example of same file rendered three times configured with different views and properties

The File List component builds on top of the File component and enables you to display a list of multiple files and/or folders with just one line of code. You can specify what files to show by providing a set of identifiers or a query to the desired drive or site, or you can provide an insight type such as trending, used, or shared, to show only files that are most relevant to the signed in user. 

Below is an example that displays all files in the signed in user’s root drive, which is the default behavior: 

 

An example that displays all files in the signed in user’s root drive

Code for an example that displays all files in the signed in user’s root drive

 

 

 This next example shows a list of the user’s most recently used files: 

 Example showing a list of the user’s most recently used files

Code for example showing a list of the user’s most recently used files

To try out these components, check out the samples on our playground, and visit the documentation for File and File List. 

MSAL 2.0 Authentication Provider 

We’ve introduced a new authentication provider for MSAL 2.0. This new provider uses authorization code flow, which is more secure than the implicit grant flow used in our original MSAL provider, so we recommend the use of this provider when building web applications going forward. 

If you are already using the original MSAL provider in your application, you can easily switch over with just a couple of steps by following the instructions here. 

SharePoint Framework Library for Microsoft Graph Toolkit 

Another new feature included in this release is a new SharePoint Framework library for Microsoft Graph Toolkit. The new package allows developers to deploy the Microsoft Graph Toolkit to their tenant and reference components in any webpart, avoiding any registration conflicts and duplication across webparts. If you are looking to build SharePoint web parts that use Microsoft Graph Toolkit components, this library now makes it easier to develop and manage your web parts. 

To learn more about this library and how to use it, see the documentation. 

Bug Fixes and Improvements 

This release also includes numerous bug fixes and improvements. To see the full list, check out our release notes 

Thank you to everyone who has reported bugs or sent us feature requests since the last release! We are continuously reading your feedback and making improvements to make the Toolkit valuable for our community.  

Thank you to those who have contributed features and bug fixes to make this release possible! If you would like to contribute to the Microsoft Graph Toolkit, visit our GitHub issues and look for those tagged with “good first issue” or “help wanted”. 

We’re looking forward to hearing your thoughts and feedback on this new release. Please submit any bugs, feature requests, and feedback by opening an issue in our GitHub repository. 

  • The Microsoft Graph Toolkit team