honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-onedrive-finder/README.md

6.0 KiB
Raw Blame History

OneDrive finder

Summary

This sample access drives from OneDrive and navigate between his content using Graph OneDrive and Site API and Microsoft Graph Toolkit react controls "@microsoft/mgt-react" with the addition of new controls Mgt-File-List FileList and Mgt-File File . This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file.

FileList control allow to load files base on graph querys or parameters ids.

File control allow to File component is used to represent an individual file/folder from OneDrive or SharePoint base on graph querys or parameters ids.

Below a draw resuming the custom query's made and what control uses to retrieve associated folders and files from different locations. Demo

Retrieve Sites with drives associate

Demo

Navigate between folders and Breadcrumb

Demo

Navigate, search Files and filter extensions

Demo

Compatibility

SPFx 1.11 Node.js v10 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Teams Incompatible Local Workbench Incompatible Hosted Workbench Compatible

Applies to

Solution

Solution Author(s)
react-onedrive-finder André Lage (http://aaclage.blogspot.com, @aaclage)

Version history

Version Date Comments
2.0 May 20, 2021 Update MGT to version 2.2.0, include new Features (Localization, cache refresh).
1.2 April 30, 2021 Include content Search on Drive Library, file details and Minimal style change.
1.1 April 24, 2021 Fixes, optimization, Styling and extension filter included
1.0 April 16, 2021 Initial release

Minimal Path to Awesome

  • Clone this repository
  • Ensure that you are at the solution folder
  • in the command-line run:
    • npm install
    • gulp serve
    • gulp bundle --ship
    • gulp package-solution --ship
    • Add to AppCatalog and deploy

Prerequisites

Grant the service principal permission to the Microsoft Graph API

Once installed, the solution will request the required permissions via the Office 365 admin portal > SharePoint > Advanced > API access. If you prefer to approve the permissions in advance, for example when testing the solution in the Workbench page without installing it, you can do so using the CLI for Microsoft 365:

o365 spo login https://contoso-admin.sharepoint.com
o365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'Files.Read'
o365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'Files.Read.All'
o365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'Sites.Read.All'

Features

Description of the extension that expands upon high-level summary above.

This extension illustrates the following concepts:

  • Easy to navigate between shared Drives using Graph API and Breadcrumb
  • Search in OneDrive Library
  • Filter by File Extension
  • Change theme of control and Localization
  • Caching refresh
  • FileList New mgt-file-list control.
  • File New mgt-file control.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Help

We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.