- Issuing a Search Query (KQL) against the Graph API to retrieve documents where the managed property `SharedWithUsersOWSUSER` contains a value
- Iterate through the result of the search query to get the permissions (e.g. sharing information) per file (`/permissions` endpoint of `driveItems` on GraphAPI)
- Show the results in a `ShimmeredDetailsList` and the Pagination control for paging the results
- By selecting a document and clicking on the **Sharing Settings** button will open the **Manage Access** pane for further review of the sharing
Here is an example with a list of shared documents, with a clear distinction when they are shared with external users (notice the tooltip & icon in front of the document)
When you want to know more about the sharing settings of a particular document, you can select the document and then click on the ==Sharing Settings<== button, this will open up the Manage Access page for the selected document which tells you that a sharing link was created for the external user.
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
This sample is optimally compatible with the following environment configuration:
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
Follow the steps below to add the app to the SharePoint App catalog:
- Go to [More features](https://go.microsoft.com/fwlink/?linkid=2185077) in the SharePoint admin center, and sign in with an account that has the SharePoint Administrator or Global Administrator for your organization.
- Under Apps, select Open. If you didn’t have an app catalog before, it might take a few minutes to load.
- On the Manage apps page, click **Upload**, and browse to location for the app package. The package file should have .sppkg extension.
- Select **Enable this app and add it to all sites**. This will automatically add the app to the sites, so that site owners will not need to do it themselves. Uncheck the box **Add to Teams**. If you want to add the App to Teams, you need to follow these instructions. Click **Enable app** at the bottom of the side panel.
You will provide delegated permissions that will allow the application to act on a user's behalf. The application will never be able to access anything the signed in user themselves couldn't access. To learn more about delegated permissions see: <https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#types-of-permissions>
- Browse to the Manage Apps page in the Teams Admin Center: <https://admin.teams.microsoft.com/policies/manage-apps>
- Click **Upload new App**, click **Upload** and browse to the teams app package location. The package file should have .zip extension. After selecting the package, click **Open**. The app will be uploaded.
- You may need to adjust your Teams App policies to make the app available for you organization. For more information see <https://learn.microsoft.com/en-us/microsoftteams/teams-app-permission-policies>.
- Click on **Add to a team**, choose a team and a channel where you want the app to be added and click **Set up a tab** on the bottom right of the pop-up window.
If you face any other errors, you can enable the debugging mode from the configuration pane. When this is enabled, there is a lot more details being outputted to the written to the console.
- In green you see the search (KQL) query what is used to retrieve documents
- In yellow, you see the search results
- In blue, you see the transformation of combining the searchresults and the permission calls
Issue: We can't upload the app because there's already an app in the catalog with the same app ID. To upload a new app, change the app ID and try again. To update an existing app, go to the app details page.
Solution: Delete the app in the Teams Apps overview and re-add the package.
More information about deleting apps in Teams can found here: <https://learn.microsoft.com/en-us/microsoftteams/teams-custom-app-policies-and-settings#delete-custom-apps-from-your-organizations-catalog>
## Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-governor-sharing%22) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-governor-sharing) and see what the community is saying.
If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-governor-sharing&template=bug-report.yml&sample=react-governor-sharing&authors=@robinmeure&title=react-governor-sharing%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-governor-sharing&template=question.yml&sample=react-governor-sharing&authors=@robinmeure&title=react-governor-sharing%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-governor-sharing&template=suggestion.yml&sample=react-governor-sharing&authors=@robinmeure&title=react-governor-sharing%20-%20).
**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.**