Magazine
PnP Modern Search v4, the modern that returns to its classics
January 14, 2025
Microsoft 365
Remember SharePoint search?
Since SharePoint was created, we have always encountered the need to retrieve information from that vast ocean of indexed data we could provide to SharePoint.
Do you remember our very dear Content Search Web Parts and others like Refiner Web Parts that we loved customizing with HTML, CSS, and JavaScript to display our search results exactly as we imagined? Well, Microsoft, preferring to promote its global M365 search, has never given these Web Parts a ticket to the modern world.
With the advent of the modern experience and Web Parts designed using the SharePoint Framework (SPFx), our classic and outdated Web Parts were replaced by the Highlighted Content Web Part, which, while not allowing us to express our creativity, enables a quick deployment and distribution of our information.
The loss of interest from Microsoft in the SharePoint search engine in its modern version led to the arrival of the new powerful but rigid and non-customizable global search API. Years have passed without any alternative being proposed, and none of our complex scenarios can truly be formulated the way we want them.
What if our salvation depended on the strong Microsoft community?
And what about PnP Modern Search?
The 4 Main Web Part Components
1. What is the Search Results Web Part?
This is the main Web Part, the core of the solution that connects the various Web Parts together.
Its primary objective is to retrieve information from a data source and display it in a specific format.
- The input data can either come from a static query or a dynamic query. In the case of a static query, the same result can be displayed each time the page is visited. With a dynamic query, it’s possible to capture the various interactions the user has with the system, especially through the Search Box Web Part.
- The output data can be presented using 5/6 pre-configured templates that can be slightly adjusted, or by creating a custom template using Handlebars. If that’s not enough, it’s always possible to create an extension, but in that case, web development skills will be required.
2. What is the Search Box Web Part?
This is the search bar, which is the main source of interaction with the search engine. It is connected to the Results Web Part and allows for passing the search keywords.
It also has a very useful feature that allows it to pass a query through the URL. This makes it possible to imagine advanced use cases where the search bar is not necessarily located on the same SP page as the Results Web Part.
3. What is the Search Filters Web Part?
This Web Part allows filtering the information retrieved by the Results Web Part. It is configurable and offers multiple filter formats. This enables it to refine search results and help you find exactly what you’re looking for.
4. What is the Vertical Search Web Part?
The vertical search Web Part conditionally displays different Web Parts of search results. It allows you to build a complete search center based on a variety of search results, each appearing when requested. It precisely defines the scope of the search center and a specific range for each result.
So, how do I get started with this?
- Download the latest version of the solution.
- All information can be found in the documentation of the repository.
- If you encounter any issues, you can use the GitHub channel of the repository.
- Once deployed in your tenant’s app catalog, you will have access to the 4 Web Parts from the SharePoint Web Parts toolbox on any site in your tenant.
- And if you’re more curious, we provide more information later in this document (coming soon).
To conclude, if the goal is to disseminate and promote information on your site SharePoint in a personalized way, PnP Modern Search v4 is the solution combining easy and quick deployment, intuitive use, accessible and effective customization, and extensibility, as much as possible, with some knowledge of modern web technologies.
Author: Laurent Freyss – Microsoft 365 Consultant