Microsoft 365 Community Getting started series, 14 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnPjs v3 – Using and adjusting PnPjs v3 config file in your SPFx solution

Description

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

A

Okay, welcome back. This is the third video in our series and we've just gone over configuring. Our sharepoint framework react js web part by using a config file, and so we've just discussed that config file and now we're going to sort of say: okay, we've got our config file and how do we actually get started using it? So patrick, do you want to show where we're going to initialize and import this config file.

B

I do julie thanks for having me back. We are going to look now at how we've actually used this get sp function that we talked about last time as a way to centralize our configuration of pjs to a single file, so we've got, of course, in our web part. This is react based web part, but this would apply to lots of different uh frameworks and such so it's not just react specific, but we have kind of the web part class.

B

This is the sharepoint framework class that represents our web part and you're used to with v2 to doing some work in the on init to set up the sp, because that's uh one of the first things called in the web part life cycle, and it's also one of the first times you have access to the context object of the web part.

B

So what we want to do is make sure we get things set up, so lots of ways to do this, but what we're going to kind of do is use get sp here in the on init of the web part passing it the this dot context, which is going to be the uh sharepoint framework context, or it's actually, the class names like web part context, or something like that.

B

We're going to pass that to the sp looking again at how the sp works if sp is not defined, or rather null and context, is not equal to null we're going to go ahead and set up the sp. We showed that talked about that last time, using the context, the spfx behavior and we're going to return that sp that we've set up or we're going to return, one that was previously set up, because each web part represents a closure.

B

This sp underscore sp is going to be essentially a global inside uh that web part, so we're gonna be able to access it uh from all of our components. So you can see we're not getting the return here like here. We could say contest p equals get sp. We get that back for sure, but we don't need to do that here.

B

We're just sort of registering things, initializing things with that context, where we're going to use them later, I'm going to jump over real, quick we're going to talk about the components in more depth in our next video, but just want to show you real, quick how we use that within what is now a react component, so we're inside our react component, p and pjs example component, ignoring for now the overall functionality of this component, which julie's going to cover in our next video. I just want to show you here now within that component.

B

We can call getsp with no parameters and we're going to get back that sp we've stored previously in the config, that being the sp up here and so we're able to use that sp and we set this.sp as a local reference inside this example component, but it's just a pointer back essentially to uh our sp instance that lives off in that config that centralized module here.

B

So it's a nice way to to reuse that as much as we need and then below in our web part again ignoring for now exactly what's going on in the code, we're able to use the this dot sp in a number of places. uh One of them is collapsed for future reference, but we're able to do this.sp there and again we're only just pointing back to that centrally configured sp instance.

B

So that's a nice way again to put all your imports here, have a single kind of function to initialize and get that sp set up, and then, of course, you know this sp could take lots of other parameters. Different urls. You know different behaviors to apply. There's lots of ways to do this, but this is just a nice simple, clean example of sharing nsp thing um across all our components and it sort of emulates uh what used to work or how it used to work in v2 where the sp object itself was a global.

B

So we're sort of recreating that, while allowing us to to configure it and set things up exactly how we want for our projects and so in our next.

A

B

Julie's going to talk through what this project actually does.

A

Yeah, we're definitely going to do that and the other thing I wanted to add about the the multiple components is: if you decide that you need new functionality and you add a new component, you can put all your extra imports that you need back in that config file and everything will then be available versus having to define all your imports in each place where you're using your sp object.

A

So that's a super uh fun and um better way to handle it so that you have everything centralized in one location, so yeah we're gonna, definitely go through the details of this component in our next video, so stay tuned. For that.

B

Fantastic, I can't wait talk to you soon, julie,.

B