{"id":6373,"date":"2021-05-20T10:50:05","date_gmt":"2021-05-20T18:50:05","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6373"},"modified":"2021-05-20T10:50:05","modified_gmt":"2021-05-20T18:50:05","slug":"announcing-new-file-components-msal-2-provider-and-sharepoint-framework-library-in-microsoft-graph-toolkit","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-new-file-components-msal-2-provider-and-sharepoint-framework-library-in-microsoft-graph-toolkit\/","title":{"rendered":"Announcing\u00a0new file components,\u00a0MSAL 2 Provider, and SharePoint Framework library\u00a0in\u00a0Microsoft Graph Toolkit\u00a0"},"content":{"rendered":"

Today,\u00a0we are excited\u00a0to share a new release of the Microsoft Graph Toolkit. This release includes\u00a0several\u00a0exciting 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\u00a0new\u00a0SharePoint Framework library for Microsoft Graph Toolkit,\u00a0and\u00a0more.\u00a0<\/span>\u00a0<\/span><\/p>\n

As a recap, the\u00a0<\/span>Microsoft Graph Toolkit<\/span><\/a>\u00a0is a collection of functional UI components and authentication providers that makes your integration with Microsoft Graph as easy as writing two lines of\u00a0code.\u00a0If you\u2019re not familiar with the Toolkit yet, learn more by reading\u00a0our\u00a0<\/span>documentation<\/span><\/a>, visiting\u00a0our\u00a0<\/span>component playground<\/span><\/a>, or following the newly available\u00a0<\/span>Microsoft Graph Toolkit Learn Path<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n

Updating your application<\/span>\u00a0<\/span><\/h3>\n

To take advantage of the new features, you\u2019ll need to update your application to use the newest version of the Microsoft Graph Toolkit. If you\u2019re using the Toolkit via\u00a0npm, go to your project directory and run:<\/span>\u00a0<\/span><\/p>\n

Npm\u00a0i\u00a0@microsoft\/mgt@latest\u00a0<\/em><\/p>\n

If you\u2019re using the Toolkit via\u00a0unpkg, your application will automatically be updated to the newest version.<\/span>\u00a0<\/span><\/p>\n

What\u2019s New<\/span>\u00a0<\/span><\/h3>\n

File and File List Components\u00a0<\/strong><\/p>\n

We\u2019ve added two new components to the Toolkit for retrieving and rendering\u00a0<\/span>files<\/span><\/a>\u00a0from Microsoft Graph\u00a0using the OneDrive and SharePoint APIs.\u00a0These\u00a0new\u00a0components make it quick and simple to bring\u00a0your\u00a0users\u2019 and\/or\u00a0organizations\u2019 documents and files\u00a0into\u00a0your\u00a0application\u00a0(including web apps, PWAs, Microsoft Teams tabs, SharePoint webparts, and desktop apps.\u00a0<\/span>\u00a0<\/span><\/p>\n

The\u00a0<\/span>File component<\/span><\/b>\u00a0can be used to display a\u00a0single file or folder\u00a0that is stored in\u00a0OneDrive or\u00a0a\u00a0SharePoint\u00a0document library. The component retrieves\u00a0a\u00a0file\u2019s data from Microsoft Graph and renders the file using its name, an icon representing the file type, and other\u00a0configurable\u00a0properties such as the last modified date, file size, or\u00a0author.\u00a0As 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.<\/span>\u00a0<\/span><\/p>\n

The image below shows an example of the same file\u00a0rendered\u00a0three times\u00a0using the file component, but\u00a0configured with different views\u00a0and properties.<\/span>\u00a0<\/span><\/p>\n

\u00a0<\/span>\"Example<\/p>\n

\"Example<\/p>\n

The\u00a0<\/span>File List component<\/span><\/b>\u00a0builds on top of the File component\u00a0and enables you to\u00a0display a list of multiple files and\/or folders\u00a0with 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\u00a0<\/span>insight type<\/span><\/a>\u00a0such as trending, used, or shared, to show\u00a0only\u00a0files that are most relevant to the signed in user.<\/span>\u00a0<\/span><\/p>\n

Below is an example that displays\u00a0all\u00a0files in the\u00a0signed in user\u2019s root drive, which is the default behavior:<\/span>\u00a0<\/span><\/p>\n

 <\/p>\n

\"An<\/p>\n

\"Code<\/p>\n

 <\/p>\n

\u00a0<\/span><\/p>\n

\u00a0<\/span>This next example shows a\u00a0list of the\u00a0user\u2019s\u00a0most\u00a0recently used files:<\/span>\u00a0<\/span><\/p>\n

\u00a0<\/span>\"Example<\/p>\n

\"Code<\/span><\/p>\n

To try out these components, check out the\u00a0<\/span>samples on our playground<\/span><\/a>, and visit\u00a0the\u00a0documentation\u00a0for\u00a0<\/span>File<\/span><\/a>\u00a0and\u00a0<\/span>File List<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n

MSAL 2.0 Authentication Provider<\/strong>\u00a0<\/span><\/p>\n

We\u2019ve introduced a new authentication provider\u00a0for\u00a0<\/span>MSAL 2.0<\/span><\/a>.\u00a0This new provider uses\u00a0authorization code flow,\u00a0<\/span>which is more secure than the implicit grant flow<\/span><\/a>\u00a0used in\u00a0our original MSAL provider, so we\u00a0recommend\u00a0the use of this provider when building web applications going forward.<\/span>\u00a0<\/span><\/p>\n

If you are\u00a0already\u00a0using the original MSAL provider in your application,\u00a0you can easily switch\u00a0over\u00a0with just a couple of steps\u00a0by following the instructions\u00a0<\/span>here<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n

SharePoint Framework\u00a0Library\u00a0for Microsoft Graph Toolkit\u00a0<\/strong><\/p>\n

Another new feature included in this release is a new SharePoint Framework library for Microsoft Graph Toolkit.\u00a0The new\u00a0package allows developers to\u00a0deploy\u00a0the Microsoft Graph Toolkit\u00a0to their tenant and reference\u00a0components in any webpart, avoiding any registration conflicts and duplication across webparts.\u00a0If 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.<\/span>\u00a0<\/span><\/p>\n

To learn more about this library and how to use it, see the\u00a0<\/span>documentation<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n

Bug Fixes and Improvements\u00a0<\/strong><\/p>\n

This release also includes numerous bug fixes and improvements. To see the full list, check out\u00a0our\u00a0<\/span>release notes<\/span><\/a>.\u00a0<\/span>\u00a0<\/span><\/p>\n

Thank you to everyone who has reported bugs or sent us feature requests since the last release! We are continuously reading your feedback\u00a0and making improvements to make the Toolkit valuable for our community.\u00a0<\/span>\u00a0<\/span><\/p>\n

Thank you to those who have contributed features and bug fixes\u00a0to make this release possible! If you would like to\u00a0contribute to\u00a0the Microsoft Graph Toolkit,\u00a0visit\u00a0our\u00a0<\/span>GitHub\u00a0issues<\/span><\/a>\u00a0and look for\u00a0those\u00a0tagged with \u201cgood first issue\u201d or \u201chelp wanted\u201d.<\/span>\u00a0<\/span><\/p>\n

We\u2019re 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\u00a0our\u00a0<\/span>GitHub repository<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n