PnP Modern Search V4 | Getting started & beyond

PnP Modern Search v4 is a fully open-sourced solution created and maintained by the open-source community that empowers non-coders and coders alike to create custom search experiences in Microsoft 365—primarily SharePoint and Graph—in a matter of minutes! If you want to be able to tap into data that’s been indexed in Microsoft 365 and present that data in a custom way on a SharePoint page or Teams tab, then Modern Search V4 is your go-to solution.  

V4—a big evolutionary step from v3—is composed of 4 webparts:  

  • search results 
  • search filter (i.e. search refiners) 
  • search box 
  • And search verticals (i.e. search navigation) 

These webparts can be added to SharePoint pages or Teams tabs in unique combinations and hooked up to each other in different ways. As more Microsoft Search functionality becomes exposed via the Microsoft Graph Search API’s, v4 will continue to innovate, allowing you to surface these capabilities. 

How do I get started using v4? 

Modern Search v4 is a straightforward installation. It’s just a one file install with great installation instructions. It installs a standard SharePoint package, and it’s instantly available in Microsoft Teams, SharePoint, etc., allowing you to get started right away. For example, if you have a SharePoint page that must: 

  • return search driven results for all documents within your tenant that have been tagged in a specific way 
  • display results in a certain format (i.e. cards, detail view, etc) 
  • Include a search box 

you could do this in about 10 minutes, from start to finish, without any code at all with PnP Modern Search v4. 

And since it’s open-source, you can turn it into anything you want. 

V4 Empowers Extensibility 

One of the main goals of v4 was to take the innovations from v3 while allowing greater flexibility in extending the solution. With v4, you can add coded customizations to the solution without having to recompile the solution itself. Three primary extensibility possibilities include: 

  1.  Custom web components 
    To help with the rendering, you can create custom web components to create custom displays of data without having to recompile the base code.  
  2. Custom search suggestion providers 
    If you have a custom way to provide search suggestions, you can build your own and plug it into the search box. 
  3. Handlebars customization 
    By nature, the solution renders results with handlebars. With v4, you can add your own custom helpers and partials without recompiling the code and point the solution to it. Before v4, you had to rebuild the solution to make any of this work in the past. 

Why would I need PnP Modern Search v4? 

One of the greatest powers of SharePoint and Microsoft 365, in general, is the indexing of data, and in order to extract and present that data the way you want requires search. With PnP Modern Search v4, you have a ready-built solution to use that data right away without any coding knowledge or expertise required. 

If you’re doing anything with search within SharePoint, Microsoft 365, or Graph, and you need that data displayed in SharePoint or a Teams tab, this is your starting solution.  

For anything search-driven, this truly is your starting point. You’ll start with the V4 codebase, and you’re either going to configure it on the front end, or you’ll rebuild it on the backend. I’d love to hear a scenario where this is not the case, but I haven’t seen one so far.  

How can you use PnP Modern Search V4 today without customization? 

As soon as you complete the install, you can start adding components to a page. An impressive and slightly overwhelming fact is there are more than 100 configuration options across the four webparts. With this many options and variables, you really want someone who understands SharePoint search to help you get started. You want to ensure the base search schema you build from is properly configured, and this requires understanding the basic search terminology, such as ‘refiners,’ ‘building proper queries,’ etc. Plus, on the rendering side, unless you want pre-defined layouts (there are some cool ones, like lists and card view), you need to know how SharePoint search would retrieve that data. You don’t necessarily need a coder, but you should involve someone who understands the basic structure and architecture of SharePoint search configuration. 

How can I extend it?  

There are two primary ways:  

Follow their extensibility model.   

The value here is you don’t have to recompile the modern search solution. This means you can continue to update your Modern Search installation as the community updates the package. If you touch the code of the community project, then you’ve basically forked the code base, and it’s much more difficult to merge updates from the community into your solution. 

If you need to accomplish any of the following tasks, using the extensibility model is a no-brainer:  

  1. Change the way the handlebars render results. 
  2. Insert react components into the rendering through custom web components. You just want to change the rendering of the data by creating custom web components.   
  3. Change the process in which suggested queries are created in your search box. You have your own method to suggest results⁠—using an azure web app, for example—you can build that connector and simply plug it in. 

Why is number 3 important? Well, search suggestions that come out of SharePoint are notoriously messy. Essentially, it’s a text file that you upload into the entire tenant, so updating it means you have to upload a tenant-wide text file. With Modern PnP Search v4, you can create your own suggestion provider and link to it without rebuilding the whole project.    

2. Make it your own and dive into the code  

The second way to extend is If you want to build your own custom search-driven component. Essentially you can fork the project and make it your own.   

For example, your organization manages hundreds of projects, and each project requires a new team to be created (this means each project has its own site and its own documents). But as we just learned, searching in OOTB SharePoint means I must search the entire tenant, and I want to be able to see a rollup of specific documents related to the project I’m working on actively. So, I want to build a component that automatically and consistently displays a specific kind of document—a rollup of all PowerPoint presentations or AutoCAD files, for example. Sure, you can preconfigure the OOTB SharePoint search webpart to do this, and content authors could add it to a page, but they will have to configure 50-80 settings, including queries, setting the display, etc., every time. Empower your team by building a custom webpart that gets deployed for every project.

Building this webpart from scratch would take days; with PnP Modern Search V4 as your base, you can do this in 30 minutes.   

Are you ready to take PnP Modern Search v4 and make it your own?  

All you have to do is strip out what you don’t need and code away. Want to see this in action? Check out my session, Developer’s Lab | Deep dive into the code of the PnP Modern Search v4 Project, where I lift the hood of v4, shows you how it’s built, and take you on a live coding adventure to customizing your own web part using the power of the existing codebase. Go beyond simple search results and utilize the power of Microsoft Search and SharePoint Search to deliver true search-driven applications. If you want to skip right to the heart of the demo, go here.   

Do you need to build a custom search-driven component for your digital workspace while saving thousands of hours of development time but need a little help from a coder? One of our search experts would love to chat with you today.  

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under


The Microsoft Viva modules are revolutionary tools used to aid one's work stability and improve their digital workspace experience. Find out more by tuning into to Eric Overfield's "The State of Microsoft Viva & The Digital Workspace" PixelMill Webinar!

Not sure what an Employee Experience Platform is and how Microsoft Viva fits into that? Then check out the PixelMill Webinar "The state of Microsoft Viva and The Digital Workspace" by Eric Overfield!

Get excited for our next episode of the #PixelMillWebinars! In this session:
-Power Platform 101:Power Automate, Power Apps, Power Virtual Agents, Power Pages & Power BI  
-Power Platform in action on an intranet  
-Power Platform adoption best practices

Imagine having all the tools and resources you need to be successful in just one place! Eric Overfield digs deeper into the details of Microsoft Viva and how Teams + Viva can make that dream a reality. Watch the latest PixelMill Webinar to learn more!

Get excited for our next episode of the #PixelMillWebinars! Our CPO, Microsoft MVP & Regional Director Eric Overfield breaks down:
-Each of the 9 GA Viva Modules
-How the modules integrate
-Successful practices when rolling out Viva in your organization

Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch