SOLVED

Modern PnP search result web part - results layout template

%3CLINGO-SUB%20id%3D%22lingo-sub-1874777%22%20slang%3D%22en-US%22%3EPnP%20search%20result%20web%20part%20-%20results%20layout%20template%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1874777%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eare%20there%20any%20resources%20for%20the%20PnP%20Search%20Results%20web%20part%20results%20layout%20that%20a%20non-developer%20can%20understand%3F%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI'd%20like%20to%20know%20how%20to%20re-create%20the%20results%20look%20and%20feel%20from%20the%20standard%20SharePoint%20results%20page%2C%20specifically%2C%20the%20path%20to%20the%20library%20and%20folder%20with%20a%20link.%20How%20is%20that%20done%3F%20I%20cannot%20see%20anything%20close%20to%20this%20in%20the%20Debug%20view.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAny%20pointers%20on%20how%20to%20decipher%20the%20results%20layout%20syntax%3F%20I%20can%20see%20HTML%20elements%2C%20and%20I%20recognize%20what%20some%20of%20the%20nested%20things%20do%2C%20like%20this%20one%20gets%20the%20icon%20of%20a%20file%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3E%3CPNP-FABRIC-ICON%20data-file-extension%3D%22%7B%7BIconExt%7D%7D%22%20data-image-url%3D%22%7B%7BSiteLogo%7D%7D%22%3E%3C%2FPNP-FABRIC-ICON%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eand%20this%20one%20gets%20the%20date%20in%20long%20date%20format%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3E%3CSPAN%3E%7B%7BgetDate%20Created%20%22LL%22%7D%7D%3C%2FSPAN%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EBut%20what%20other%20options%20are%20there%20for%20%22getDate%22%3F%20Where%20is%20this%20language%20documented%3F%20What%20is%20it%20called%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAny%20insights%20welcome.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1874777%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1878022%22%20slang%3D%22en-US%22%3ERe%3A%20Modern%20PnP%20search%20result%20web%20part%20-%20results%20layout%20template%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1878022%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F7724%22%20target%3D%22_blank%22%3E%40Ingeborg%20Hawighorst%3C%2FA%3E%26nbsp%3BI%20would%20start%20here%3A%26nbsp%3B%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%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThose%20docs%20cover%20how%20the%20Web%20Parts%20work%2C%20though%20they%20are%20still%20a%20bit%20techie.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1882425%22%20slang%3D%22en-US%22%3ERe%3A%20Modern%20PnP%20search%20result%20web%20part%20-%20results%20layout%20template%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1882425%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F83%22%20target%3D%22_blank%22%3E%40Marc%20Anderson%3C%2FA%3E%26nbsp%3BThanks%20for%20the%20reply.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20Github%20documentation%20is%20really%20very%20hard%20to%20stomach%20for%20a%20non-developer.%20I%20managed%20to%20find%20the%20documentation%20about%20the%20'getDate'%20helper%20on%20the%20%3CA%20href%3D%22https%3A%2F%2Fmicrosoft-search.github.io%2Fpnp-modern-search%2Fextensibility%2Ftemplating%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EExtensibility%20%26gt%3B%20Templating%3C%2FA%3E%20page.%20It%20refers%20to%20a%20page%20on%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fmomentjs.com%2Fdocs%2F%23%2Fparsing%2Fstring-format%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EMoment.js%3C%2FA%3E%20for%20the%20formatting%2C%20where%20the%20options%20are%20finally%20listed.%26nbsp%3B%20%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ELooks%20like%20I%20need%20to%20dig%20deeper%20into%20Handlebars%20for%20more%20customisations.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
MVP

Hello,

 

are there any resources for the PnP Search Results web part results layout that a non-developer can understand?  https://techcommunity.microsoft.com/t5/microsoft-search-blog/creating-custom-search-results-pages-in...

 

I'd like to know how to re-create the results look and feel from the standard SharePoint results page, specifically, the path to the library and folder with a link. How is that done? I cannot see anything close to this in the Debug view.

 

Any pointers on how to decipher the results layout syntax? I can see HTML elements, and I recognize what some of the nested things do, like this one gets the icon of a file:

 

 

<pnp-fabric-icon data-file-extension='{{IconExt}}' data-image-url='{{SiteLogo}}'></pnp-fabric-icon>

 

 

 

and this one gets the date in long date format

 

 

<span>{{getDate Created "LL"}}</span>

 

 

 

But what other options are there for "getDate"? Where is this language documented? What is it called?

 

Any insights welcome.

 

 

 

2 Replies
best response confirmed by Ingeborg Hawighorst (MVP)
Solution

@Ingeborg Hawighorst I would start here: https://microsoft-search.github.io/pnp-modern-search/

 

Those docs cover how the Web Parts work, though they are still a bit techie.

 

The language you see in the templates is Handlebars: https://handlebarsjs.com/

@Marc Anderson Thanks for the reply.

 

The Github documentation is really very hard to stomach for a non-developer. I managed to find the documentation about the 'getDate' helper on the Extensibility > Templating page. It refers to a page on Moment.js for the formatting, where the options are finally listed.   

 

Looks like I need to dig deeper into Handlebars for more customisations.