After deploying PnP Modern Search to your tenant, it’s time to create the first PnP search page.
PnP search pages can be added to any modern site, so it’s your decision where to do this. My recommendation is always try this out on a “playground” site first, before deploying to production.
1 – Create an empty page
The first step is to create an empty page, where you’ll add the PnP web parts. Go to any of your modern sites, and create a new page:
2 – Add the PnP web parts
The next step is to add the PnP web parts to your page. The package, that you’ve deployed, adds the following web parts available on your modern pages:
You can get to these web parts when search for “PnP” or “search” in the web part gallery:
- PnP Search Box
- PnP Search Results
- PnP Search Filters
- PnP Search Verticals
On a very simple search page, we have at least two web parts: a search box and a search results web part.
Search Box Web Part
You simply add a Search Box to the page by choosing “PnP Search Box” web part. At this point, you don’t have to do any further configuration.
Search Results Web Part
The next step is to add a “PnP Search Results” web part to the page.
Once the web part is added to the page, you have to connect it to the Search Box web part, to receive the query from there. You can do this by following these steps:
- Edit the page.
- Edit the properties of the Search Results web part.
- Switch to page “3 of 4” on the web part properties.
- Turn on “Use input query text”.
- Select “Dynamic value” in the radio button list.
- Select “PnP – Search Box” in the “Connect to source” dropdown.
- Select “Search query” in the “PnP – Search Box’s properties” dropdown.
Once done, save the page and enjoy your very first search page!
Additional query conditions
You might want to limit the scope of search to one or more specific sites, or to display specific types of documents, or to filter by date, etc.
You can easily do it by using KQL in the PnP Search Box settings. For example, if you want to display documents only (IsDocument:1), but exclude pages (-fileextension:aspx) from a specific site (Path:”https://yourtenant.sharepoint.com/sites/yoursite/*) you can use this in the Query Template:
{searchTerms} IsDocument:1 -fileextension:aspx
-Path:"https://yourtenant.sharepoint.com/sites/yoursite*"
Note: {searchTerms} refers to the query terms which the PnP Search Result web part receives from the Search Box, as configured above.
I am getting weird summary like PowerPoint presentation word is coming multiple times and not match with default SharePoint search, is there any idea?
Hi Anas,
Do I understand correctly that the summary of yor PowerPoint files are different in PnP Search and OOTB Microsoft Search? Are you still experiencing this issue?
Thank you so much for posting this. It’s incredibly helpful!
However, I do have an issue… When using the query that you’ve suggested, only showing documents and specific to my site, before entering any criteria it shows all document results from the site. How do I stop it showing all results if there’s no criteria entered please?
Hi! How can I specify that i need it to search for Documents on site A and Pages on Site B?
Thank you
Hi Marina,
The query should be something like this:
IsDocument:1 AND (Path:”https://…/siteA*” OR Path:”https://…/siteB*”)
-Agnes
Your KQL code example above has a “-” before the “Path” parameter, which would exclude the specified site inside of scoping the search to just that site. Should the “-” be removed?
Thank you for the heads up, Gregory. Fixed now.
-Agnes
Unfortunately, the page 3 and 4 is not displayed in SharePoint Online.
can you help me? 🙂
Which version of PnP Modern Search web parts do you use?
The latest version I think.
V 4.5.3.0
Very nice view!
Where can we find examples for XML code to change the look and feel of the result area?
We’ll publish examples later, stay tuned!