Copy PnP search results web part settings easily across pages

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:

  1. 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.

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.

Using the extension

After the query/settings is changed in a page (source) we need to do the following:

  1. Select “Copy PnP search settings” from the command.
  2. Provide the name of the source page and location of the web part on the source page i.e. the section, column and order.
  3. Provide the location of the web part in the destination pages.
  4. Press submit.

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anoop

Anoop

154 Followers

Microsoft MVP. M365 Developer Architect at Content+Cloud.