Microsoft 365 Community Getting started series, 14 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnPjs v3 – Using batching with PnPjs v3

Description

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

A

Welcome this is our last video in our pmpjs version, 3 overview and in this video we're going to show how to use the batching method to update a bunch of list items all with one call, and so from our last video we were going to talk through the update titles method, and so, let's dig into that now.

A

Okay, so now we're going to show what the on click event of that button is going to do, which is going to be to call the method. uh Private method, update titles, so update titles is going to uh make a batched call to update all the items in our library. So we're going to start off by using a method on the sp object, called batched, and so we're going to call this dot. Sp underscore sp.

A

Excuse me dot batch and that method returns a tuple, and so what a tuple is is an array of objects, and in this case the first object in the array is our new sp object that will manage our batching and the second is a method called execute that will execute our batch.

A

So we're going to start off then on line 87 cloning, the items that we already have in state because we need to do that for react and then we're going to walk through each one of those items and add a call to our batched sp to go update the item.

A

So it's batched, sp.web.list get by title, get item get item by id, and so we know what item id is because we stored that when we got the items to begin with so we'll pass in the id, then we'll do dot update and where, in the update, we're saying the object is title. We want to update the title property to be the old name plus the word dash updated, and then it pushes the results onto an array of objects.

A

So once we loop through all the items so that we've added a request for each item to be updated, then we await the execute method and so that execute method will then execute the batch request and all the results will then come back on that results object where we pushed them onto in the then of each call. So now that we have the results.

B

I was just going to jump in real, quick julie. That's really interesting! So can I just anything: that's chained off of that batched sp object will be included in the batch. Is that how that works? That's.

A

B

So could I do other calls? I could, for example, get the web information as part of that batched sp using batchesp.web, or I could get the lists using batchesp.web.list and execute that all as part of the same batch. Just by using that batched sp. We got up above exactly.

A

How it works, and oh.

B

A

What's great about that, and and but being careful in our documentation, there are some endpoints that don't support batching. So you need to be careful about that. We did update the docs to reflect that those.

B

Are typically going to be ones where you're, updating or uploading file contents.

A

Are typically not.

B

A

For patches attachments, yeah, anything sharing sharing is a tough one, too.

B

uh Yeah sharing has trouble right now, but we're working on those as we can, but the file stuff probably won't ever be in batch.

A

Right um so then, after we get our results, we're just gonna, update all our items and then set them back on the state and the the reason we did. That is because remember we had caching before so. If I just use the old caching function that I had before it's gonna go, get the cached values and not the updated values. So I'm just utilizing the results that we already got to update our items to show the new name and then update the state.

A

So I think that's one way of doing it, there's obviously others, but that shows how we're going to use that results to update our state so that you can see the changes. So do you want to show that quickly.

B

Yeah, let's have a quick look at our web part in action, so here I am running gulp serve on this sample, so it's here just running away in this little window here um and here's our web part. I've already loaded that on this is uh our online dashboard or my online dashboard of my dev tenant. You do need to hit preview.

B

uh So just a heads up there you go hit preview, so the buttons uh will will activate the way you think they will and we're just gonna hit update item titles, but before we do that, I'm just gonna call your attention to the name column here uh and as well. I'll show you the list. So there's no uh secrets behind. What's going on, here's the title, column and.

A

We're going to include.

B

Yeah, no tom, fuller at all, we'll click. The update item. Titles button um wait a second there we go so you've seen this uh our display updated. That was the state uh updating that julie talked about a second ago and.

A

B

Go back to our library, we'll actually refresh this page, real quick! You can see all the titles of our documents uh have been changed to dash updated, so it worked so definitely check out that sample and I hope you've enjoyed our series of videos here introducing uh v3 of pnpjs anything you want to say to close out julie, no.

A

I think that's it and you know definitely check out those docs, as we talked about in the first video and that will help you get started. But if you have any issues or questions, certainly post them to our issues list in github thanks so much everyone thanks. Everybody.

B