PnP Modern Search is a powerful tool for creating custom search experiences in SharePoint Online. One of the main features that makes PnP Modern Search so powerful is its templating engine. In this post, we’ll explore how PnP Modern Search templating works. I’ll also provide an overview of the different components involved.
Â
What is PnP Modern Search Templating?
PnP Modern Search templating is a feature that allows you to customize the layout and design of your search results pages using Handlebars templates. Even if you pick the pre-built layouts (Details, People, Cards, etc) a Handlebars template is used behind the scenes. Some people are aware of that, and even use those templates as starting points for their own custom templates.
Â
How Do PnP Modern Search Templates Work?
You may already be familiar with the web parts the make up PnP Modern Search, but if you’re not, I’ve got an online course to get you up to speed. PnP Modern Search templates use Handlebars templates to render custom templates. Here’s a high-level overview of how it works:
-
Template Definition: You define a template using Handlebars syntax. The template defines the layout, fields, and formatting of your search results.
-
Template Rendering: When a user performs a search, PnP Modern Search renders the template using the search results data.
Components of PnP Modern Search Templating
Here are the different components involved in PnP Modern Search templating:
-
Handlebars Templates: Handlebars is a templating engine that allows you to define templates using a simple syntax. It’s built into some of the PnP Modern Search web parts automatically (such as the search results web part).
-
Template Helpers: Template helpers are functions that can be used to manipulate the search results data and render it in the template. They serve as shortcuts to add functionality, saving you from having to be a developer.
-
Template Partials: Template partials are reusable blocks of HTML that can be used to render specific parts of the search results. If that sounds confusing, just ignore them. It’s much more simple in practice, as you’ll see in future blog posts.
Creating a Custom Template
Creating a custom template in PnP Modern Search involves defining a Handlebars template and using template helpers and partials to render the search results data.
Â
Example Template Code
Here’s an example of a simple template that displays the title, description, and URL of each search result:
{{#each data.items}}
<div class="search-result">
<h2></h2>
<p></p>
<a href=""></a>
</div>
Â
I’ll cover what these weird brackets do in future posts, but what’s important to understand is that this will loop over each search result and repeat the HTML DIV (and its contents) for each search result. This means you only have to define what the first search result looks like, and all the other results will look the same. Efficient, right?? The title, description, and the URL will be displayed for each result. You’ve got full control over what is displayed, and how it’s displayed. That’s the real power of custom templates.Â
Â
Â
Conclusion
PnP Modern Search templating is a powerful feature that allows you to customize the layout and design of your search results pages. By using Handlebars templates, template helpers, and partials, you can create custom templates that meet your specific needs. In this blog post, I provided an overview of how PnP Modern Search templating works, and provided an example template code to get you familiar with how these things look.
Â
What’s Next?
If you’re interested in learning more about PnP Modern Search templating, I encourage you to stay tuned to my blog as well as my YouTube channel. I’ll be covering this in more detail in the future.Â
Â
If you’re not ready for custom templates, but you’re interested in learning more about PnP Modern Search, and how to configure it, I’ve got an online course that’ll walk you through the whole thing!
