Options to build a custom search page with Tabs + Filters

Question

I have a hub site which have 5 sites connected to it. now we are trying to build a custom search page as follow:-

with these main features

1) The search should only search the Hub site + the sites connected to the hub.
2) The search should have 4 tabs as follow:-

-  All --> should show everything  
- Sites --> should only show web pages  
- People --> should only show people  
- News --> should only show pages which are connected to specific content type  

3) There should be filter panel using these fields:-

- Created  
- Size of file  
- Person  
- File Type  
- Author  

So what are the available approaches to build something similar to the above? Thanks

Answer 1

Hi @john john ,

You could use PnP modern search web parts to create a custom SharePoint search page. And you could create a search result source get content from specific Site Collections.

1.Create a custom page(blank template), set section as one-third right section.

2.Add Search box webpart.

2.Add Search Verticals webpart. Configure verticals(All, Sites, People, News)

3.Add Search Filters webpart. Edit Customize filters.

4.Create a new result source with Query text: {searchTerms} path: https://xxx.sharepoint.com/sites/xxx path: https://xxx.sharepoint.com/sites/xx -contentclass:STS_List_*
Site settings > Search > Result Sources > New Result Source > Query Transform > Launch Query Builder
This query will only target the urls mentioned. Then the Search Results webpart could connect to this result source with the result source id(Click the result source you created > Look at the url > the end of the url is the ID number. For example ).

5.Add Search Results webpart.
edit web part > type the result source id you created in step3 > Available connections > enable Use input query text, enable Connect to a Filters web part, enable Connect to a verticals web part

For Reference:
Creating custom search results pages in SharePoint Online
Create a custom SharePoint search page
Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.