Microsoft 365 Community Getting started with PnPjs v3, 12 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnPjs v3 – Create a SPFx React JS web part using the PnPjs library

Description

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

A

Okay, welcome everybody. This is video two of our series and in the last video we just introduced the version three of pmpjs and sort of went over all our documentation and transitioning between v2 and v3, and in this video we're going to get, you started doing a very basic sharepoint framework, react.js webpart, using the pmpjs library and so patrick. Why don't you get us started? What are we going to do? First,.

B

Hey julie, great to be back so what we've got here is: we've set up: uh we've scaffolded a sharepoint framework project, uh so it's gonna, be a web part project and we've just scaffolded it using the yeoman generator and that's what we've done so far as far as anyone knows, but the next step we're gonna do here is we're gonna install uh the libraries we need, and so that's going to be, the at p and p s, p library and the at p and p logging library, one change from v3 is none of the libraries directly depend on logging themselves anymore.

B

So if you want to use our logging library, you just need to install that and use that as you have in the past, but it is no longer brought in automatically by uh the sp or common or uh the graph libraries. So you would need to add that yourself.

A

Yeah, I think that was um something that maybe a lot of people depended on in previous v2 versions, where they would just start using the logger right from the get-go without having installed it. So it's definitely a good reminder to that. You need to do the extra step of installing our logger.

B

Yep and all that functionality that you've been using is still there in the uh the v3 logging package. uh We just made this decision to reduce for folks that aren't using the logging, our logging library, you don't have to include it anymore, so that was a conscious decision on our part to reduce dependencies which we're always trying to do so. I encourage you to still use it and we've got some extra functionality in there to help integrate with the new v3 uh setup and uh design.

B

But uh otherwise, if you don't want to use hour, logging no worries, you just don't need to install it and you don't have the dependency anymore. So it's not just.

A

Right and it keeps your bundle size a little.

B

A

Which is always good, yeah.

B

Always looking to help out there as much as we can so, we've got our packages updated there. So that's great, and now I want to go ahead and open my solution, and so you can see we've got a nice sharepoint framework project. That's all scaffolded out! If you look at the package.json you'll see our logging and sp are set up there.

B

A couple of notes. You will have set up- probably uh this in the past with sharepoint framework, but currently we in the pnp libraries require the typescript version four, uh so you will need to update the rush stack uh compiler. Those instructions are in the getting started guide we mentioned in the previous video, but those steps are uninstalling.

B

The default rush stack compiler installing the 4.2 rush stack, compiler and then in your I'm sorry, ts, config, file, updating the extends uh property here to use the rush, stat, compiler, 4.2 and then as well in your gulp file. You would need to disable the ts lint task, because tslint does not support a typescript for so uh those steps again are outlined in the getting started guide but uh wanted to call them out here as they are needed to get started. We.

A

Do recognize yeah yeah. The issues with that we've been seeing since v3 started have often revolved around people missing that step. So it's a big step to remember. I've even skipped it myself a time or two and went what the oh yeah okay forgot to make that that adjustment, so definitely, if you're, having typings uh bugs right away when you're, you know first trying to start things up double check that you've made those changes, because it's an it's an easy one to over overlook.

B

And I do want to recognize that is a bit of friction for folks and uh but I do think long term. It's the right decision, there's some capabilities in typescript. Four. We wanted to make use of and didn't want to sort of limit ourselves for, uh because sharepoint framework will hopefully very soon be in typescript, 4 and it'll just become a non-issue for folks.

B

So that's really the goal there um and then the next thing we want to show is kind of a pattern we have talked about before, which is setting up these config files so having a central place to set up and configure your pnp js library. So one of the things that makes uh sense v2 of pnp js is this idea of selective imports where you import the parts of the library you need.

B

So in our case, we've got webs lists items and batching as well as some of the core stuff from sp and then some of the things from logging there, and we do this in one place, one central spot, so we don't have to do it in all our files, and then we have this function. We've created here called get sp and that takes optionally, a context, object and we'll talk in later videos about how we actually use that and use this function within our code.

B

But what it does is take a sharepoint uh framework context in this part, in this case the webpart context, and if we don't have this sp defined, it's going to go ahead and set one up, so this is using uh spfi, which is our fluent interface factory. It's using the new using which is allowing us to apply different behaviors, and one of those behaviors we're going to apply is the spfx behavior that takes the context and sets everything up. This is very similar to in v2.

B

You did set up and pass the context, so this is just using a dedicated, spfx, behavior and the context and then as well we're using uh pnp logging. So this is that extra functionality in the logging library we're talking about to use with v3. So there is now a pnp logging, behavior and one of the nice things about that is because we no longer have global sp is no longer a global right. You create the sps.

B

You need in these fluent using the fluent interface factory, but you can now attach logging to it at specific levels and because these behaviors are passed down through the sub-objects, so like sp.web.list.items is going to share all the behaviors registered at the top. um You can change the logging behaviors at different levels, in your request, structure or get say, for example, verbose logging from just one request.

B

Instead of having to get it from everything which is how it worked in the past, so again, moving away from that global structure into a more isolated structure by design which makes things a little more powerful.

A

So is this, then, something that people can go. Look at that advanced documentation to sort of understand how this behavior chaining is working, and all of that so I think that's. um This is definitely a more advanced topic, but this is going to get you started with that using these behaviors and then there's the ability to build your own behaviors, which is an advanced topic as well.

A

So this is something that if people want to do a little bit more with the library, this is something that they can look into is adding more features using behaviors.

B

Yeah for sure, I'd love to see what folks in the community come up with with their own behaviors, uh doing lots of different advanced scenarios, um and I think, a lot of possibilities for folks to come up with very cool stuff. um That used to require deep changes to the library and now, hopefully, is a little bit more. uh You can just subscribe and do what you need to do that way.

B

A

So how are we going to use this then.

B

Well, we are in our next video going to talk about how we use the imported pnp at pnp, sp library and this config file. We've set up here to actually make some requests and do some work against sharepoint, but this was getting started and setting things up with the spfi and the spfx behavior, which takes the context.

B

This code could have been in our web part itself in the init, but this is a way to share it across your projects and as well to share it across react components without having to pass things down as props to everything. So this is an approach, lots of other approaches. uh You know, there's react context, there's you know global kind of states and different things. You could do.

A

Yeah services, you can build.

B

uh Sharepoint framework library components you could build, there's lots of ways to handle what we're doing here. But this is a nice simple way to centralize and simplify your setup and configuration for the pmpjs library.

A

Awesome well thanks, we'll look to see you in our next section.

B

Yeah look forward to it talk to you soon, julie, bye,.