PnP Modern Search Results - Part 1: Introduction to Search Results Web Part

Hey Folks,

Welcome to this series on the PnP Search Results web part – it is one of the most powerful tools in the SharePoint Framework ecosystem. Whether you’re a beginner or experienced developer, this series will guide you step-by-step towards getting better hands-on PnP Search Result Solutions.

Now let’s learn about PnP Modern Search Results basics.

What is the PnP modern search results web part?

The PnP Search Results web part is the part of PnP Modern Search solutions. It is built using the SharePoint Framework (SPFx). It allows developers to create highly customizable and dynamic search results solutions in SharePoint.

It gives you a fill control over how search queries are executed and how results can be displayed using templates, filters, and layouts. You can also create your own layouts via the Search Extensibility which we will cover later in this series.

Now, the second thought that should come to your mind is why we don’t use the default SharePoint search.

Why do we not use the default SharePoint Search?

SharePoint default search provides the built-in search capabilities. It comes with several limitations. Those limitations are defined below.

Limited UI customization you can’t change the design of search results

Restricted control over result layout like how it look (list, cards, etc.)

It is hard to build custom search pages based on your needs.

You cannot easily add smart filters or customize how data is shown.

The PnP Search Results web part solves the above problems by offering flexibility, extensibility and a developer-friendly approach to building search-based solutions.

What are the Key Features & Capabilities of PnP Search Results?

In PnP Search Result web part, we can use fully customizable search queries.

Handlebars-based template for complete UI control.

You can add filters to easily sort and refine results.

It works together with Search Box and Filter web parts.

It can fetch data from both Microsoft Search and SharePoint Search.

Results look good on all devices, mobile, tablet, desktop.

You can extend and customize it further using SPFx.

Now we will perform a practical for adding PnP Search Results web part to our SharePoint Site.

Before we perform practically, we need the prerequisites below.

SharePoint Online environment & on SharePoint Site

Basic understanding of SPFx

First, we need to download PnP Modern Search Results package from PnP’s Official site or GitHub repository

Download package from here.

Once it is download open your tenant’s SharePoint admin center:- https://YourTenantName-admin.sharepoint.com/

Go to more features section

In More Features click on App section to open.

It will open an App Catalogue for SharePoint, add that downloaded .sppkg package of PnP Moder Search Results by just drag and drop.

Once it is deployed, then go to the SharePoint Site where you want to add that web part and add that PnP Search Result web part like we add other web parts to the page.

Now, once you add that PnP Search Result web part in page it will ask you to configure like in image

Click on Configure button and it will open the Property Pane.

In Property Pane Select SharePoint Search as a Data source.

Now, selecting SharePoint Search as a Data source it will not show any data; to fetch data we need to add query to fetch data.

So, we will see a simple use of Query Template and filters for this.

In Property Pane add “*” to Query Template as shown in image below and click on Apply.

On Apply Click you will be able to see that it will fetch all the data from SharePoint Site.

It contains all the files like docx, ppt, pdf, etc...

But what if we want to fetch only docx files?

To fetch only docx file add a filter query like below and click on Apply.

Once you hit the Apply button it will filter the data and will only show the docx files.

There are many other configuration options available, but in this series, we will focus mainly on developer-related aspects and practical use cases.

Now, we have seen basic use of Query Template and Filter. Now we will see some default layouts for showing data in different layouts.

Click on next page in Property Pane.

On the second page, you will find the Available Layouts section, where you can choose how your data should be displayed based on your requirements.

There are adaptive cards as well which we can use.

In Handlebar/HTML and Adaptive cards, we can use custom designs as per your requirements by injecting the HTML or Json in Custom layout.

If we want a more complex UI, then we can use Search Extensibility as well as which we will see later in this series.

What you Learned?

What the PnP Search Results Web part is.

Why it is more powerful than default search of SharePoint

It's key features and benefits

How to add and configure it on page with default layouts.

What is Next?

In Part 2 of this series, we’ll explore:

What is a Handlebar?

How to add Handlebar/HTML to Custom layout?

Conclusion

This article covers the basic fundamentals of the PnP Search Results web part, including its features, setup, and basic configuration. In the next part, we will explore what Handlebar is how it can be used and by using handlebar/HTML how we can create custom layouts.