In this post we will have a look at how we can easily copy the settings of the PnP search results web part from one page to many pages with the help of PnP JS in an SPFx extension.
PnP search web parts
PnP search web parts are a set of modern web parts which help us a lot in providing a smooth search experience in modern SharePoint sites. More information about those web parts can be found here.
Editing the settings
In a SharePoint site we can create pages based on a template that might have these web parts on them. Say for example, we might have PnP search results web part(s) on the pages at a particular location, to roll up content based on the metadata of the page. If we want to change the settings in those results webpart across all the pages, then we have a couple of options:
- Manually edit each page that has these webparts and update the settings.
- Change the settings in one page, export the settings and import those settings, in all the other pages manually. This is with the help of “Import / Export settings” capability seen in the web part property pane.
This blog post aims to introduce a 3rd option to update the settings of the PnP search results webpart across all the pages.
Copy PnP search results web part settings SPFx extension
We now have a list view command set available to carry out the above task. Let’s establish a scenario to see how this extension works.
Say we have created hundreds of department pages in our site that have a PnP search results webpart in the second column of the first section. This web part rolls up all the documents of department content type. A new requirement comes up to say each of these department pages must roll up only documents belonging to that department. We then come up with a query/settings to do solve this requirement. Now our task is to apply that query/settings to the web part in all the pages.
That is when we can use the copy PnP search results web part settings SPFx extension. If we change the query/settings in one page, then using this extension we can copy those changes to all other pages.
Using the extension
After the query/settings is changed in a page (source) we need to do the following:
- Navigate to the pages library and select all the other pages (destination) where the web part query/settings needs to be changed.
- Select “Copy PnP search settings” from the command.
- Provide the name of the source page and location of the web part on the source page i.e. the section, column and order.
- Provide the location of the web part in the destination pages.
- Press submit.
This will then copy the query/settings of the PnP search results web part from the source to the web part in all destination pages and output the result by showing which pages were successfully updated and which were not.
Details of the code
Based on the details provided the extension uses PnP JS to get the properties of the web part where the query was updated. This can be seen in the getSourceWebpartSettings method. We get the json of the web part using PnP JS and then webPartData.properties.
After that, in the updateDestinationWebpartSettings method, we can see that the extension uses PnP JS to update the properties of the webparts in the destination pages. The extension also provides to perform this operation in batches using the PnP JS batching capability. This can be seen in upddateDestinationWebpartSettingsUsingBatch method.
The extension also provides an option to export the PnP JS code. This code can be copied and then tweaked as per the requirement. After that the SP editor browser extension can be used to run the code.
Enhancements
Currently this SPFx extension is developed such that it works with PnP search results web part only. It can be changed to work with other web parts if needed. This would involve updating the code to get and set intended web part properties (from the web part json) based on the type of the web part.
Summary
Settings/properties of a web part in a modern page can be easily copied from one page to other pages using PnP JS. We need to get the web part object first based on it’s location and then get the webPartData.properties property of that object. This data then needs to be set as the properties of the web part on other pages. We saw how we can do the same for PnP search results web part using an SPFx extension.
