Microsoft 365 Community Community Demos, 5 Dec 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnPjs v2 new features

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 5, 2019.

In this 12-minute video, Patrick Rodgers shows how to create a PnP presets file within your project. The new external web factory method and simpler setup model in PnPjs v2, facilitate selective importing which decreases bundle sizes.

Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Documentation: http://aka.ms/pnpjs
• PnPjs v2 Testing Help: https://github.com/pnp/pnpjs/issues/900

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp

A

I want to show this idea, so in PMP, jsv 2, we very much we have this idea of selective imports and selective imports is the idea that you can choose which parts of P and pjs you want to import into your project. So this is the benefit of giving you much smaller bundle sizes and limiting what you include to just what you need so, for example, in v1 everything is attached to the web object.

A

Basically, so you imagine, web has lists and content types and everything else, and that tree of stuff means that your bundle gets all that stuff, even if you just want to do some simple operations around webs, for example, or lists, you still end up with the entire bulk of p.m. PJs. In your project, which you know, isn't horrible, it's not going to end the world, but we could do better. So in v2 we took a lot of time to come up with these.

A

This idea of selective imports and we restructured the entire internals of the library around that, and so what this project is showing is this idea that it's great that we can selectively import? Just the pieces we want, but that could be sort of annoying if we have to do that across every file in our project. So we might have a project that has six different web parts and if I have to have 12 different imports for PJs in six different files, that's kind of annoying. We can do better right.

A

So this pattern that I want to share today is this idea of creating a but I'm calling a preset file within your project. So in one spot you can include everything you need from p.m. PJs, so we're gonna include our extend factory method. We're gonna include the SP rest class.

A

Then we're gonna do our selective imports so we're importing webs items list sites, fields, we're importing a couple: the objects, we're gonna need and we're importing this URL format type and then, in this sample we want to show how to extend the Taipings, how to extend the declarations. So so you get nice and tell a sense with the things you're, adding via extensions and I'm, not going to spend a lot of time on extensions, because that's not what this demo is exactly about, but we've got articles on extensions, and this is actually a sample.

A

I'll show you where to swear to find this in just a second, but this is actually out there and available for you to have a look at after the call. So we have it we're gonna. Add a method to web called ensure special list, just as an example. It's not really actually that special, but I like to think of it as special and then we're using that extend factory method. So this is a new v2 capability. We're gonna extend the web factory.

A

Sorry we're gonna extend the web Factory so that every web we create within our project will have our new method. So we can have our insurer special list method. You know defined here and it's a method that takes a couple of parameters, and this is just something out of five. Is it's a title in the description it gives us back a promise and what we're actually doing is then using P and pjs to say this dot list and we can type the lists in typescript using the this.

A

You know syntax, if you're not familiar with that. It's a way to type this object in a function, though you do have to define it as a function. Arrow functions have no concept of this, so we're using a function here. We're saying this is an I web instance and we're gonna say we're gonna ensure this list and then we're gonna say the first time.

A

So, if you haven't used the ensure method for lists, you get back an object that tells you whether or not we created it with that call and if we did create it, what we're gonna do is in a batch so again showing off the very simple fluid batching for P and PJs we're in a batch, we're gonna, add two fields: we're gonna, add a text field and we're gonna, add a URL field, very cleverly called text field and URL field, and then we're gonna wait.

A

The execution of that batch and then we're just gonna, that's it. We've created our list, we're happy and then the other thing we could do in a preset is. We can actually export some of the stuff we might need in our projects, so we don't have to import them from p.m. PJs directly. We import them here, one time and then we can export them from here, so we can use them easily and then we're going to export this SP const.

A

So what this this is actually creating, essentially the root of our fluent API and there's no difference from exporting it here versus importing the one from p.m. PJs. But the idea here and that what I want to show you is we then in our project, so I've jumped over to now my web part code in my project- and this is just an out-of-the-box SharePoint framework web part built using no framework and then added just this PJs example code, so we're just gonna import SP from our preset.

A

So we're not importing at this point from at P and PJs we're importing directly just the SP object from our preset we're gonna come in here. We still have to do our setup, but you'll note in v2 we have a much simpler, set up model. We've added you. You can now just say SP setup this context, so you don't have to put that sort of object structure in anymore. You still can put this object structure in if you have additional configuration.

A

That's the signature of the setup method has just changed to accept the context, so you don't have to update any of your existing code, but this is the nice quick way to get the context, since this is a very common function. Folks are performing many times so, as we set up this context gives us the setup we need to have the context we need and then I'm doing so again, no framework, so I'm just creating elements manipulating them directly, adding event listeners and then appending those.

A

This is something I like to do in demos, because I think sometimes folks get very focused on including certain frameworks and frameworks. This is better than that, but sometimes if you have a very simple web part or a very simple application, customizer doing direct Dom manipulation, it can be a little bit cleaner but easier a little bit faster and you don't have the weight of say, including react or view or any of these other frameworks for something where I just want to have a button.

A

That does something right and then so you can see now in our button action we're just calling our custom method we've added to web. So our extension method, we've added we're going to call it- and this gives us very clean code here in this example or in this button. But you could say if this was a method you had to call three or four times across your project. You had like four webparts with a common function: you've bottled all that functionality into that preset file.

A

You don't have to copy and paste it across, and that's enabled by that extension functionality.

A

We've added a v2, so you can very easily include your methods right into the fluent chains that you're calling otherwise and then we do a very beautiful Dom element, appendchild, so pretty beautiful stuff there and then, of course, we want to see this running so I'm gonna go to my go to my page, ignore all the meetings I'm skipping to be here with you all today and I'm gonna load up my page and we could see I do not currently have a list called my title, so pay no attention to the man behind the chrome and I'm, just gonna refresh this and I do have a gulp serve already running in the background to save us just a few seconds with that and I'm gonna go to try- and this is something I actually learned on.

A

This call I can search in that box, which I think is amazing. So here's my beautiful web part with my very fancy button I'm going to click that button and I'm gonna, assume stuff is happening, and it now says the list should now be there and now we're gonna come in here and refresh this page and.

A

And oh there it is for a second there. I thought: I had somehow screwed this all up, so we can see, but we've got our list and if I get a gear here in a second get a gear here in a second, we list settings library settings rather and we can see.

A

I've got my very cleverly named text field and URL field, so this is just a fairly simple example, but it's a powerful example in the way that it shows you how, with a preset file, we can import all the things we need to once you can extend P and PJs to include our custom functionality that can be used easily across our entire project.

A

We can export just the things we need, so if we need to import stuff, we can do it within our web part and then like, for example, what we could import web directly from our preset and then we can call very easily our extension methods right directly as part of our fluent method. Chaining in the library so really excited for these capabilities. I think they add a lot to what we can do.

A

You know with PPG sv2 and what you all can do with PJs v2, so I want to show you real, quick I'm in the PNP GS repository now I'm in the dev v2 branch. There's a folder here for samples and I can go to the project preset sample. That's the sample. I just showed you all today and as well. There's two other samples for creating custom bundles with roll-up or with web pack. So you could feel free to check these out. I did just want to mention.

A

These are gonna, be samples that are very specific to pee and PJs they're, showing very isolated techniques for using the PJs. If you're doing samples around SharePoint framework and all those things, those should all still be targeted towards the main samples gallery. So we're not trying to move stuff here or compete, or anything like that. These are gonna, be samples focused strictly on showing things we're talking about in our documentation. So these will be samples really around demonstrating new pjs features.

A

But, of course, if you have ideas for samples that might be appropriate for this for P and pjs v2 and that tie in very tightly to our documentation, reach out, let us know if it's appropriate, we'd love to have those added here. I just want to be clear: we're not trying to just split the world and create two separate places for people to submit samples, so SPF, X samples, you know, dev samples- should still go in the SP dev samples repositories there.

A

So I think with that I get to now stop talking for a few minutes and we can move on to Vincent but excited to show those new features in PJs v2, for you all and I look forward to seeing how folks might use those.