Microsoft 365 Community Getting started series, 14 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnPjs v3 – Using sp object in your solution to access information in SharePoint Online

Description

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

A

Thank you, hi everybody and welcome to video 4 in our series of getting started with key and PJs version. 3. in our last video Patrick got us started with initializing our SP object using our config file and how to use our on init function to establish that context, and so now we're going to talk about the components themselves and how we're going to use that SP object to actually get some work done and so we're starting here in the root of the web. Part where we're going to render that component.

A

It's called pmp.js example, and so we're passing in properties to that component and that will get that component rendered onto the screen. So when we get in here, we are, as we mentioned in the last video, getting our SP contacts and putting it in a private variable for this component.

A

And so then, we can use that in the component did Mount we're going to make a call to read all file sizes, and so when we call that private function, we're going to use the spfi factory interface to pass in the SP object to it, so that we can establish a whole new SP object that then uses dot using caching, and so the caching Behavior means that any call made using the new SP cache instance will cache the contents of the call into session storage.

A

And so what we're essentially doing is extending the SP object without modifying the SP object. So we're going to have this special new variable called SP cache and it works just like the SP objects. But it's going to add that caching functionality, but our original private variable this dot SP still holds our original SP object that we could use for other calls, and so this is sort of the big change with version. Three is that we can create our own unique instances of the SP object that have different root URLs that have different functionality.

A

Any of those things can be done so now that we have that SP cache object, we're.

B

Going to Julie real quick does that SP cache object then inherit All, The, Observers and behaviors that were loaded onto the disk.underscore SP object.

A

It does it's a good thing that you brought that up or I would have forgotten to say that it's.

B

Pretty cool, so that means it's kind of additive and we can have a base kind of setup that we add to Within in our application as we need. It's super.

A

Cool that is super cool and that's what the new behaviors extension is all about. Is that extending an object and creating a new instance inheriting all those observables and then extending it, but keep maintaining that original object so that we can use it for other purposes. So it's like it's like having a base recipe right. We have vanilla cake and we're going to take some of our vanilla cake and we're gonna make a chocolate, some of our vanilla cake and we'll make it strawberry and we have all of those pieces still.

A

So that's really a powerful new functionality in V3. So now that we have that SP cache object, we're going to make calls to uh the sbcash.web.list we're going to get by title. A library name in this case we're just going to use the the standard documents, library that comes with the SharePoint site. We're then going to get items yep, there's our there's, our Deca uh definition of which Library we're going to use. Then we're going to get items we're going to do a select here, we're going to very specifically say.

A

We only want the ID title file, Leaf, ref and file slash length uh Fields. Now the file slash length is an extension or an expansion of a uh sort of like the lookup column ID, so that we're going to add a DOT expand, saying that we want to expand out that file.link.

A

So we can get the length of our files and then this extension, we got rid of all the gits that used to exist in V2, and so you you could use invocables before, but the dot gets still existed now the dot gets are gone and you just use the parens to invoke that object to get a response. So once we get the response, then we can in line 64. We can use.

B

This really real quick. Why is it important to always just select the fields we want to show, as opposed to just bringing everything back for these objects? X, because.

A

It keeps our payload a little bit smaller, plus we could type this. We didn't do that. We mentioned in video one that we have some documentation about typings, so we could have typed this, so we would have had intellisense um on the object that we brought back on the items we brought back. We didn't do that, but you could do that.

A

So that's important to keep your payload small and know exactly what you're getting instead of these very large payloads, especially if you're getting lots and lots of items like if you're trying to get upwards of 5000 items from a list, keeping your payload small is can help overall.

A

So there's our response item. Yes, our definition for our response item: um oh you're fixing my code on the Fly I love that look at that nice. Wonderful fix! Thank you Patrick! So now that we have our items we're going to map through them, wow you're just going Craig right now, all right, we're gonna map through them and we're gonna, create a file item, and the file item just does some morphing uh for the contents of the of the object so that we can then render them.

A

So if we go down to the render function, which is on line 118 and we scroll down into that, we're essentially going to just render a table of all the files and because we expanded that size, we can render the size of the file. So we are showing the title, the name and the size of each file in like a table and there's a you know: a label at the top and there's also a button, and that button is going to update all the titles in the uh Library.

A

So when that button is clicked Patrick, if you can scroll up and let's show people these.

B

A

B

Looks like we're not going to click the button. Quite yet we'll talk about that in a second. Don't click the button yeah, but uh this is the web part Julie just describes. This is the time uh the table and we've got the fields uh we're pulling back. That's the title name size and we've got some totals going on there. um So this is what the the web part looks like that we've just rendered.

B

So if you, if you uh look through that code, this is what you should end up with on your screen and we'll come back to that uh just as soon as Julie walks us through what the actual uh on click button with update titles does.

A

Thanks Patrick yep, that's gonna, be our next video, so in the next one, we're gonna show how to use. Do that update titles method which uses batching to make one call to update a bunch of list items all at one time so stay tuned for that next, video.