Modern PnP search result web part - results layout template

[Ingeborg Hawighorst]

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 · Accepted 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/

[#3]

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