SOLVED

spfx search - can I create a multiple filter web part which passes filters to search results webpart

%3CLINGO-SUB%20id%3D%22lingo-sub-837529%22%20slang%3D%22en-US%22%3Espfx%20search%20-%20can%20I%20create%20a%20multiple%20filter%20web%20part%20which%20passes%20filters%20to%20search%20results%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-837529%22%20slang%3D%22en-US%22%3E%3CP%3EDetails%20below%3A%3C%2FP%3E%3CP%3EI%20want%20a%20modern%20Sharepoint%20page%20to%20have%20multiple%20filters%20options%2C%20which%20I%20can%20create%20using%20react%20spfx%20web%20part.%3C%2FP%3E%3CP%3EThe%20selected%20filters%20will%20be%20passed%20to%20search%20results%20web%20part%20which%20will%20show%20results%20on%20the%20same%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20this%20possible%20with%20spfx%20react%20webpart.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-837529%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-837627%22%20slang%3D%22en-US%22%3ERe%3A%20spfx%20search%20-%20can%20I%20create%20a%20multiple%20filter%20web%20part%20which%20passes%20filters%20to%20search%20results%20web%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-837627%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F149964%22%20target%3D%22_blank%22%3E%40Tarundeep%20Singh%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20think%20a%20great%20place%20to%20start%20would%20be%20the%20SPFx%20Modern%20Search%20Web%20Part%20sample%20on%20GitHub%20by%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1019%22%20target%3D%22_blank%22%3E%40Franck%20Cornu%3C%2FA%3E.%20The%20sample%20includes%20a%20React%20web%20part%20with%20customizable%20filters%20and%20refiners%2C%20and%20also%20links%20to%20both%20a%20blog%20post%20and%20a%20PnP%20Web%20Cast%20which%20explains%20the%20solution%20in%20further%20detail.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-solutions%2Ftree%2Fmaster%2Fsolutions%2FModernSearch%2Freact-search-refiners%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-solutions%2Ftree%2Fmaster%2Fsolutions%2FModernSearch%2Freact-search-refiners%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Details below:

I want a modern Sharepoint page to have multiple filters options, which I can create using react spfx web part.

The selected filters will be passed to search results web part which will show results on the same page.

 

Is this possible with spfx react webpart. 

1 Reply
Highlighted
Best Response confirmed by Tarundeep Singh (Occasional Contributor)
Solution

@Tarundeep Singh 

 

I think a great place to start would be the SPFx Modern Search Web Part sample on GitHub by @Franck Cornu. The sample includes a React web part with customizable filters and refiners, and also links to both a blog post and a PnP Web Cast which explains the solution in further detail.

 

https://github.com/SharePoint/sp-dev-solutions/tree/master/solutions/ModernSearch/react-search-refin...