Microsoft 365 Community / Getting started with PnPjs v3

In this 5-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0. You created a centralized config file in the previous session, now initialize and import the _sp variable into your project. In a React web part, call getSP() function within a component with no parameters and get back the previously stored _sp instance located in your pnpjsConfig.ts file. In your web part set the local instance this.sp = getSP() inside your component. Reusing a centrally configured (global) variable across all your components is just simple and clean. This is part 3 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 6-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0 and specifically using a single batching call (batchedSP.web.lists) to update list items rendered in a table. They show using an onClick event to call the private updateTitles method. Results state gets updated and a table containing a list of documents shows updated document title names. Check out the code in the PnPjs Example linked below. This is part 5 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 7-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0 by passing properties to and using the sp object to render a component (table) on screen. Create your own unique instance of the sp object by extending the sp object without modifying it! Create a new sp object that includes caching behavior. Calls made with the sp cache instance will cache the content of the call into session storage. Map through items and create a file item that will be render files details in a nicely formatted table. This is part 4 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 9-minute demo, Julie Turner and Patrick Rodgers show viewers how to get started on creating a very basic SharePoint Framework React JS web part using the PnPjs v3 library. Scaffold out a SharePoint Framework project, install libraries (@pnp/sp and @pnp/logging libraries), inspect dependencies in the package json, verify using rush-stack-complier 4.2 and gulpfile.js. Set up the pnpjsConfig.ts files (selectively import parts of library needed for project and GetSP function that includes spfi (Fluent interface) and PnPLogging behavior. These activities centralize and simplify the setup and configuration for the PnPjs library. This is part 2 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 7-minute demo, Julie and Patrick show how to get started with #PnPjs 3.0. They show us the repository (https://github.com/pnp/pnpjs) that also holds the documentation with change log and lots of guidance. This is part 1 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community