The PnP Modern Search solution contains multiple SharePoint Online modern web parts. Each of these web part is highly flexible and customizable. It means that each web part and more specifically the Search Results web part has many properties that you can set.
If you want to use PnP Modern Search web parts on many pages, it can be time consuming to set every time the same properties.
This blog post introduces two methods that will help you speed up PnP Modern Search web part configurations.
Content
Using the property pane
The first option that you have to quickly edit properties of a PnP Modern Search web part can be found directly on the web part’s property pane (page 4).
Clicking on the Edit properties button will open up a new pane with raw web part properties in edit mode.
There you can directly edit properties from the embedded code editor. You can also Export properties (as a JSON file), edit it in your favorite code editor and finally Import the JSON file with updated properties.
As an example, let’s try to hide the results count of the Search Results web part:
By default, the the PnP – Search Results web part displays results count => showResultsCount property is set to true.
Now if you change the showResultsCount to false, the results count will be hidden:
Using PowerShell
Now if you have to edit a lot of pages you can automate things using PowerShell and more specifically the PnP PowerShell module.
Prerequisites
In this section we are going to use the PnP PowerShell module. If you haven’t already used it, please follow instructions there: Installing PnP PowerShell.
Get current properties
First, you need current web part properties. Let’s use the Get-PnPPageComponent cmdlet to retrieve current web part properties as an object:
$pageName = "Search"
$wpInstanceId = "4f78965f-3c5f-485f-9099-e0c98f1c6edd"
$currentSearchProperties = (Get-PnPPageComponent -Page $pageName -InstanceId $wpInstanceId).PropertiesJson | ConvertFrom-Json
You can easily find the instance Id of a PnP Modern Search web part using its property pane:
Edit properties
Now you can edit web part properties.
As an example let’s edit the query template property in order to get only News posts in the Site Pages library:
$currentSearchProperties.dataSourceProperties.queryTemplate = 'Path:"https://{tenant}.sharepoint.com/sites/organization-portal/SitePages" AND ContentType:"Site Page" AND PromotedState:2'
Update web part
Once you have edited the properties, you can update the web part using the Set-PnPPageWebPart cmdlet:
$pageName = "Search"
$wpInstanceId = "4f78965f-3c5f-485f-9099-e0c98f1c6edd"
Set-PnPPageWebPart -Page $pageName -Identity $wpInstanceId -PropertiesJson ($currentSearchProperties|ConvertTo-Json -Depth 3)
What is important here is to convert the $currentSearchProperties to JSON so it can be accepted by the cmdlet.
Conclusion
In this blog post we covered how to quickly edit PnP Modern Search web parts properties using either the web part property pane or the PnP PowerShell module.
Aimery Thomas' blog 