what are the available options to build a Modern custom search page with Tabs + Filters

%3CLINGO-SUB%20id%3D%22lingo-sub-2996454%22%20slang%3D%22en-US%22%3Ewhat%20are%20the%20available%20options%20to%20build%20a%20Modern%20custom%20search%20page%20with%20Tabs%20%2B%20Filters%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2996454%22%20slang%3D%22en-US%22%3E%3CDIV%20class%3D%22%22%3E%3CP%3EI%20have%20a%20hub%20site%20which%20have%205%20sites%20connected%20to%20it.%20now%20we%20are%20trying%20to%20build%20a%20custom%20search%20page%20as%20follow%3A-%3C%2FP%3E%3CDIV%20class%3D%22%22%3E%26nbsp%3B%3C%2FDIV%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Results.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F328843iD05CC8B111AD9DD5%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Results.png%22%20alt%3D%22Results.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ewith%20these%20main%20features%3C%2FP%3E%3COL%3E%3CLI%3EThe%20search%20should%20only%20search%20the%20Hub%20site%20%2B%20the%20sites%20connected%20to%20the%20hub.%3C%2FLI%3E%3CLI%3EThe%20search%20should%20have%204%20tabs%20as%20follow%3A-%3C%2FLI%3E%3C%2FOL%3E%3CUL%3E%3CLI%3EAll%20--%26gt%3B%20should%20show%20everything%3C%2FLI%3E%3CLI%3ESites%20--%26gt%3B%20should%20only%20show%20web%20pages%3C%2FLI%3E%3CLI%3EPeople%20--%26gt%3B%20should%20only%20show%20people%3C%2FLI%3E%3CLI%3ENews%20--%26gt%3B%20should%20only%20show%20pages%20which%20are%20connected%20to%20specific%20content%20type%3C%2FLI%3E%3C%2FUL%3E%3COL%3E%3CLI%3EThere%20should%20be%20filter%20panel%20using%20these%20fields%3A-%3C%2FLI%3E%3C%2FOL%3E%3CUL%3E%3CLI%3ECreated%3C%2FLI%3E%3CLI%3ESize%20of%20file%3C%2FLI%3E%3CLI%3EPerson%3C%2FLI%3E%3CLI%3EFile%20Type%3C%2FLI%3E%3CLI%3EAuthor%3C%2FLI%3E%3C%2FUL%3E%3CP%3ESo%20what%20are%20the%20available%20approaches%20to%20build%20something%20similar%20to%20the%20above%3F%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2996454%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESearch%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2998254%22%20slang%3D%22en-US%22%3ERe%3A%20what%20are%20the%20available%20options%20to%20build%20a%20Modern%20custom%20search%20page%20with%20Tabs%20%2B%20Filters%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2998254%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Fmicrosoft-search.github.io%2Fpnp-modern-search%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmicrosoft-search.github.io%2Fpnp-modern-search%2F%3C%2FA%3E%3C%2FLINGO-BODY%3E
Valued Contributor

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

 

Results.png

 

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
  1. 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

2 Replies

@Maggan Wåhlin 

 

Ok thanks for the reply. Now i tired the following using the PnP Modern Search web part:-
I have the following Search Result web part:-S1.png

 

which mainly searches everything inside a specific site collection.

Then i defined the following filter web part, to filter the results based on; Created + File type + Created By (Author), here is my filter web part's settings:-

 

S2.png

 

but when i save the page >> i will only get the Created + the File Type, while the Created By & Author filters will be missing, as follow:-

 

s3.png

 

also if i add a new filter web part and i only chose to filter based on the Created By i will get this error:-

 

s4.png

 

any advice why i am unable to filter the search result using the CreatedBy/Author?