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-graph-pnpjs
History
Hugo Bernier 86013372c0 Added all 1.12.1 and 1.13 containers 2022-02-14 02:52:18 -05:00
..
assets Removing unnecessary office product from the sample metadata 2021-12-10 19:55:32 +02:00
config Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
src Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
teams Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
.editorconfig Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
.gitignore Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
.yo-rc.json Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
README.md Added all 1.12.1 and 1.13 containers 2022-02-14 02:52:18 -05:00
gulpfile.js Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
package-lock.json Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
package.json Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
tsconfig.json Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00
tslint.json Added PnPjs with MS Graph sample. (#750) 2019-01-09 17:46:24 +02:00

README.md

Using PnPJS with Microsoft Graph

Summary

This web part demonstrates how to use PnPJS with SharePoint Framework and how to query Microsoft Graph with PnPJS. It requests a list of Azure AD groups at your tenant and shows them using Office UI Fabric React list.

Main UI

Compatibility

SPFx 1.7.1 Node.js v8 Compatible with SharePoint Online Compatible with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible

Applies to

Solution

Solution Author(s)
react-graph-pnpjs Sergei Sergeev (@sergeev_srg, spblog.net)

Version history

Version Date Comments
1.0 Jan 09, 2019 Initial release

Minimal Path to Awesome

  • clone this repo
  • navigate to the folder with current sample
  • restore dependencies: $ npm i
  • bundle solution: $ gulp bundle --ship
  • package solution: $ gulp package-solution --ship
  • locate solution at ./sharepoint/solution/pn-p-graph-web-part.sppkg and upload it to your tenant app catalog
  • you will see a message saying that solution has pending permissions which need to be approved:
    Pending permission requests
  • you should approve permission requests from your SharePoint Framework web part. There are different options available - new SharePoint Admin UI, PowerShell, $o365 cli. For the matter of this sample, the fastest way to do it is through new SharePoint Admin UI. Open Web API permission management page by navigating to the url https://<org>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement (changing <org> to your real organization name) or by going to the new Admin UI directly from old SharePoint Admin Center. Select Pending Group.Read.All request and approve it: Approve request from new Admin UI
  • run $ gulp serve and open hosted workbench, i.e. https://<org>.sharepoint.com/sites/<your site>/_layouts/15/workbench.aspx
  • add PnPGraph web part to see it in action

Features

Web part in this solution illustrates the following concepts on top of the SharePoint Framework:

  • showcases PnPJS configuration inside SharePoint Framework
  • showcases how to use MS Graph with PnPJS
  • showcases how to correctly configure SharePoint Framework solution and tenant to allow PnPJS to call MS Graph

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.