New File components in Microsoft Graph Toolkit v2.2.0

Context

With the latest release of Microsoft Graph Toolkit (MGT) v2.2.0, Microsoft Graph’s team introduced two brand new UI components File and File list to work with files and folders from OneDrive or SharePoint. In this article, I’ll show you a quick overview of what’s available with these new components so let’s go!

File component

This first UI component is used to display information of a specific file/folder from OneDrive or SharePoint. There is a large set of properties available to customize the component for your business needs like file-query, site-id, list-id, insight-type, etc.

Here is a really simple example in a SharePoint Framework (SPFx) web part with React context to display a specific file information from user’s OneDrive:

<File userId="92a498a3-44d1-4fc5-b249-3860c30c4d45" itemPath="/Demo/FlooringEstimates.xlsx"></File>

The File component displays information about a specific OneDrive or SharePoint file/folder.

File list component

The second UI component is used to display information of multiple files/folders from OneDrive or SharePoint. Like File, there is also a large set of properties available to customize the component for your business needs. Both components can be used together inside the same application for a better experience.

Here is a really simple example in a SharePoint Framework (SPFx) web part with React context to display last used files (OneDrive or SharePoint) from a specific user:

<FileList userId="92a498a3-44d1-4fc5-b249-3860c30c4d45" insightType="used"></FileList>

The File list component displays information about multiple OneDrive or SharePoint files/folders.

File components are a really great add to the Microsoft Graph Toolkit and can be really usefull in all your applications to work with files and folders from OneDrive or SharePoint and I’m pretty sure you’ll save time using them in your app developments 😉

Remember that you can try all the components live on the mgt.dev website (Microsoft Graph Toolkit Playground).

Happy coding everyone!