PnP Modern Search Extensibility: Creating Handlebar Helpers

In the blog series of PnP Modern Search Extensibility we have looked at basics of PnP Modern Search Extensibility, how to add a custom layout and how to add custom web components, in this blog we will look at creating custom handlebar helpers.

With extensibility you can also create Handlebar helpers that can be used to in HTML templates or while configuring layout fields. There are a lot of handlebar helpers available for common scenarios as well.

In the previous blog we created a Custom Simple List layout, and for showing Project Summary we were using the Summary slot mapped to HitHighlightedSummary, but what if you have created a custom column in the library and want to use it show Project Summary and you also want to truncate it at 180 characters and add ellipsis and then when the user expands the collapsible section you want to show the whole Project Summary.

To do that, first of all we need a handlebar helper that would truncate and add ellipsis after 180 characters. And then we need a handlebar helper that will show the full Project Summary on expansion.

We will create these two helpers and register them using registerHandlebarsCustomizations() in the library class. This is what our handlebar helper definition would look like for trim and wasTrimmed,

To trim the Project Summary we will use the trim handlebar helper like so,

And then in the <pnp-collapsible> we will use wasTrimmed to render the full Project Summary if it was truncated before.