Need assistance with configuring pnp search & search results webpart

%3CLINGO-SUB%20id%3D%22lingo-sub-2215606%22%20slang%3D%22en-US%22%3ENeed%20assistance%20with%20configuring%20pnp%20search%20%26amp%3B%20search%20results%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2215606%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20downloaded%20the%20modern%20search%20package%20from%20github%20which%20includes%20search%20box%2C%20search%20results%20webparts.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2215606%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Emodern%20search%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2216191%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20assistance%20with%20configuring%20pnp%20search%20%26amp%3B%20search%20results%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2216191%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F999693%22%20target%3D%22_blank%22%3E%40Amit_Patel%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWhat%20kind%20of%20configuration%20do%20you%20need%3F%20I%20can%20help%20you%20out.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2216214%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20assistance%20with%20configuring%20pnp%20search%20%26amp%3B%20search%20results%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2216214%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F774111%22%20target%3D%22_blank%22%3E%40Matti_Paukkonen%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20need%20to%20be%20able%20to%20search%20for%20keyword%20from%20the%20searchbox%20which%20can%20search%20from%20search%20results%20webpart%20and%20also%20to%20be%20able%20to%20filter%20by%20document%20type%20column%20which%20we%20are%20using%20in%20document%20library.%26nbsp%3B%20I%20need%20to%20setup%20as%20per%20below%20example%20from%20council%20website.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Amit_Patel_0-1615957951350.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F264713iEDB7B9102735F83E%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22Amit_Patel_0-1615957951350.png%22%20alt%3D%22Amit_Patel_0-1615957951350.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2353570%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20assistance%20with%20configuring%20pnp%20search%20%26amp%3B%20search%20results%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2353570%22%20slang%3D%22en-US%22%3EHi%20Matti%2C%3CBR%20%2F%3EI%20have%20managed%20to%20get%20the%20search%20working%20but%20need%20assistance%20with%20color%20coding%20and%20formatting%20in%20search%20results%20webpart%3F%20do%20you%20know%20how%20i%20can%20achieve%20it%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2355636%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20assistance%20with%20configuring%20pnp%20search%20%26amp%3B%20search%20results%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2355636%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F999693%22%20target%3D%22_blank%22%3E%40Amit_Patel%3C%2FA%3E%26nbsp%3BIf%20you%20want%20custom%20formatting%20for%20search%20results%2C%20you%20need%20to%20use%20the%20%3CSTRONG%3ECustom%3C%2FSTRONG%3E%20layout%20for%20your%20search%20results%20web%20part%20%26amp%3B%20then%20define%20the%20custom%20HTML%20template.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThe%20'custom'%20layout%20is%20the%20minimal%20layout%20to%20start%20with%20if%20you%20want%20to%20create%20your%20own%20customized%20UI%20from%20scratch.%20You%20can%20also%20start%20from%20an%20existing%20layout.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EYou%20can%20find%20more%20information%20at%3A%26nbsp%3B%3CA%20title%3D%22Search%20Results%20-%20Layouts%22%20href%3D%22https%3A%2F%2Fmicrosoft-search.github.io%2Fpnp-modern-search%2Fusage%2Fsearch-results%2Flayouts%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ESearch%20Results%20-%20Layouts%3C%2FA%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

I have downloaded the modern search package from github which includes search box, search results webparts. 

4 Replies

Hi @Amit_Patel 

 

What kind of configuration do you need? I can help you out.

@Matti_Paukkonen 

 

I need to be able to search for keyword from the searchbox which can search from search results webpart and also to be able to filter by document type column which we are using in document library.  I need to setup as per below example from council website. 

Amit_Patel_0-1615957951350.png

 

Hi Matti,
I have managed to get the search working but need assistance with color coding and formatting in search results webpart? do you know how i can achieve it?

@Amit_Patel If you want custom formatting for search results, you need to use the Custom layout for your search results web part & then define the custom HTML template.

 

The 'custom' layout is the minimal layout to start with if you want to create your own customized UI from scratch. You can also start from an existing layout.

 

You can find more information at: Search Results - Layouts 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.