Copy PnP search results web part settings easily across pages

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

Editing the settings

  1. Manually edit each page that has these webparts and update the settings.
  2. 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

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

  1. Navigate to the pages library and select all the other pages (destination) where the web part query/settings needs to be changed.
  2. Select “Copy PnP search settings” from the command.
  3. Provide the name of the source page and location of the web part on the source page i.e. the section, column and order.
  4. Provide the location of the web part in the destination pages.
  5. 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

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

Summary

SharePoint developer at Content+Cloud.