Microsoft 365 Community Community Demos, 1 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Copy PnP Search results web part settings

Description

During this 13-minute developer-focused demo, Anoop Tatti opens with a scenario: Many of your pages are based on a template page that you now need to update. After updating your template page, use this list view command set extension accessed from the Pages Library, to copy the settings of the PnP search results web part present on a page to the settings of the PnP search results web part present on other selected pages. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 1, 2021.

Demo Presenter: Anoop Tatti (Content and Code) | @anooptells

Supporting materials:
• Weparts – PnP Modern Search v4 | https://microsoft-search.github.io/pnp-modern-search/
• Extension Repo - Copy PnP search results webpart settings | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-copy-pnp-search-webpart-settings
• Control - Animated Dialog | https://pnp.github.io/sp-dev-fx-controls-react/controls/AnimatedDialog.html

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

This demo is about copying, pnp search results, uh web parts settings just a quick introduction about myself. uh My name is anub tati. I am a sharepoint developer at content and cloud based in london, so I I write some blogs on uh spfx related uh things or on the under the platform called medium and then that's the link to my blog.

A

I know he dot medium.com, I'm on twitter as well, and the username on hotels and my github username is you can follow me on on those platforms if needed. So what we'll do is uh we'll we'll do a demo first and then uh have a look at the code of of this particular extension.

A

uh So for this demo, what I'll do is I'll quickly establish a scenario and then tell you what it it's all about so uh so what I have got here is a page in my dev tenant, and uh this page, if I just quickly edit it uh you can see, it has got. A pnp search is also a part, and uh uh you know a page properties web part. So you know all this does. Is it is rolling up some of the pages based off a certain content type and then displaying it over here now?

A

What I've also done? Is I've created uh a few other pages as well based off this template? uh You know with a similar format. One is called all about parker again, a pnp search, part and then page properties, and then this there's one called all about giraffe or graph, which has again a search for part and page properties.

A

Now, let's imagine that there are. You know uh quite a few uh pages created like this, so maybe uh you know if we had a template somewhere or a template page uh or someone went ahead and just uh did a new copy of this page and there are a lot of pages with this setup yeah now what happens is um you know? Everything is fine. This this page is rolling up all the other pages and then the new requirement comes in. uh uh You know. It might say it.

A

This page, which says all about water roses is, is rolling up a lot of content. uh You know it is bringing giraffe or graph content and also parker content. So you know we need to change this and we also need to change the the layout of the the result of the part. So for that, what I'll do is I'll go ahead and change this particular page.

A

So you know I'll edit, the webpart and I'll change the query slightly I'll, just paste this uh query, which which says you know bring me all the pages that have got uh you know the topic as the current page topic. uh So I'll apply that and you can see it now only has warrior host related pages and then, if I go next and then change the layout, uh we've got the cards layout.

B

A

Now you know this, this has to be done in in the other pages, as well, basically, the parker page and even in the giraffe page, because what is chris kent doing in the giraffe page he's? He should be in the warrior horse's space right, so so that that's that's the whole point, so you know in order to apply this change on the other pages.

A

You know I've got a few options. The first one basically is. I can go ahead and edit this page and manually change the web part. You know I would have to do this on on all the.

B

Other pages, which.

A

Are based off this template? That would be a long task and the the second option is you know if I edit this page, uh the the pnp uh search web parts, team uh they've, given us a nice facility of uh you, know exporting and importing properties. uh So we could use that as well. uh We can use some powershell uh pnp powershell script as well in order to update uh the web part on all the other pages.

A

Now in this particular demo, we will look at another option wherein we can use spfx extension to do that. So so, basically, our aim is to copy the settings of this webpart or just copy the settings for of this webpart on this page onto all the other pages, which is the departure page and the giraffe page. So uh what I'll do is I'll just go to my pages library and then let me just hit refresh- and uh you know I'll I'll select the pages uh where the settings need to be copied.

A

uh So those are the the parker page and the giraffe page, and I also have a random page created over here I'll select that as well and then uh you know this new option comes up which is copy, uh search web part settings, and then I press that and then it puts it. It opens up a dialog and it asks various you know inputs. So, firstly, we have to specify our source space I.e, the page where we made the change, and that was nothing but the warrior horses page.

A

So let's go ahead and copy that and paste it over there and then we have to select which version of the pnp search web part.

A

Did we make the change in so that's the search results, v4 and then we get to see select whether it's whether the web part is in you know vertical section or any other section. So in this case it is in the zeroth section, zero column number zero and then order zero uh and then, similarly, in the destination pages, uh we've got the web part in the same page in the same position. So it is zeroth, column, zero, uh sorry, zero, section, zero column and the order is zero. This this can be.

A

You know different based on based on the requirement and then so once we are sure that this is what we want to do, I'll go ahead and press submit and what happens is uh it goes ahead and you know, does the tasks and then it gives us these results. So, firstly, it will save what all pages have been successfully completed and uh on the right side it says what all on on what all pages was just not successful. So if we look at the the pnp parker page, uh you know click on it.

A

I can see earlier it was, you know, showing all the pages in the list format now uh it is showing in the card format. Similarly, if I go ahead and click the graph page- and you can see only graph related articles, no more chris and then the giraffe phases so uh only uh graph pages uh and then uh for the pages that was not success or that were not successful in this case only one page, which is a random page.

A

If I click on that, the reason it was not successful was you know uh at that particular location. It had the the text web part and not the pnp, so it's results for part. So that's why it? uh You know it didn't copy the settings right, so that was the demo. Now, let's uh you know, let's look at the code itself, so uh yeah. All this code is present in uh in the github repository.

A

So what we have I've just taken a snippet or a screenshot of the of the code, so we have one uh main component which have called it as uh worker dialogue. So that's the dialogue which we saw pop up uh and that dialog you know what we uh do uh in that is. uh Firstly, we we get the source page uh using pnpjs. Of course uh uh you know based on the the uh the input that was provided.

A

So, in this case, we take the link that was provided and then what we do is uh we get the source web part based on the the section column and the order, uh and then once we have the source web part, uh what we do is we go ahead and grab the the properties of that web part.

A

uh So in this case it's the uh json webpartdata.properties uh and then we also have to grab the dynamic data values, and I think this this one, this property of the web part, is used only in the pnp uh search for parts version. Three, uh I haven't seen it being used in uh before, or I might be wrong, uh but yeah and those are the two or two elements we need to get from the source web part.

A

uh So once we uh once we've got those there's, uh there's some uh a use effect uh method, basically uh which gets triggered because we have changed, we've changed the or rather gotten the source of web part properties.

A

What that does is it calls a method called as update destination web parts um and that one in that method, what we do is we go through all the destination pages that have been selected uh and then we go ahead and uh load the page and then load the destination web part based on the uh the destination location, ie, uh the section column and the order entered.

A

So once we've got those details. um What we do is we go ahead and set the uh the webpart data.properties and the dynamic data values uh for the destination web parts based on the uh you know, the source web part uh values that we've got and then finally, uh we go ahead and save the page and then uh push that to the uh you know, successful pages array and that's what gets displayed in the in the dialog as well right. So one thing you might notice here is that I'm I'm using the the thumbnail url.

A

I guess this is only in my tenant that I've seen that if, if I save the page for some reason, the thumbnail of the page was getting removed. So that's why, before saving we just get the existing thumbnail uh and then uh set the thumbnail again to the uh to the value that that we've copied? That's all right.

A

So that's what the code does uh now. One other thing I wanted to show you was: uh you know the uh this control called as uh animated dialog. So if I just quickly jump into the code, uh so uh this this is basically the uh uh you know the the dialog.

A

So if I just quickly jump into my tenant, so yeah and refresh this page again so what's happening is when I select these pages. uh You know this dialog appears it. It just appears as a normal dialogue. So instead of normal dialogue, we can make use of this pnp spfx control called as animated dialog.

A

So if I just change this from dialog to animated dialog and change the end tag as well and then just save this and then go back here, wait for this to automatically refresh so now I don't know if you'll be able to see in the recording, but uh when I, uh when the dialogue appears there's some animation uh that happens and then, when I cancel um you know it has a different animation. uh If needed, we can control the uh the animation. uh So in this uh this uses uh the library called as animate css.

A

So we can add in um the custom animations like fading down, fade out uh down when if I save that and wait for this to automatically refresh and then select a couple of pages and now you can see the animation slightly different, so it slides down. And then, when I press cancel, um you know it fades out so yeah, that's the animated dialog control.

A

So it's just the uh done the same same as the fluent ui dialog, but with some extra properties, and you can check the check the details about that in the chat right and then to finish off just a few more improvements that we can add to the extension itself. We can expand the same code for other web parts at the moment. It's only bnb, so it's a search for part, but it can be easily changed to other web parts based on the requirement and then we can add a few more checks at the moment.

A

It is checking only for the web part version, but if needed, you can check for web part title as well uh based on the scenario- and these are a few links that we'll use that are related to this extension and yeah. That's it from my side, thanks everyone, patrick over to you.

B

Great, thank you. A new fantastic demo, as always, really excited to see that animated dialogue is a nice little extra there as well, very cool stuff. I'm imagining that's stuff folks can definitely have a look at and use in their projects.