Bits and pieces

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

In the last couple of blogs we looked at basics of PnP Modern Search Extensibility and how to add a custom layout , in this blog we will look at how to extend PnP Modern Search webparts by adding custom web components. A Web component is a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML elements that can be used in your templates to implement complex behaviors. In this solution we use them here as  "wrappers"  for React components to be able to use them with Handlebars. In the previous blog, we used <pnp-collapsible> built in web component, here is the complete list of built-in web components provided by PnP, <pnp-iconfile> <pnp-documentcard> <pnp-filepreview> <pnp-icon> <pnp-panel> <pnp-collapsible> <pnp-img> <pnp-breadcrumb> In our example, we want to make changes to the People layout, we want to make it clickable and show pronouns beside the person’s name. We also want to de...

In the last blog  we were looking at the basics of PnP Modern Search Extensibility, what we can customize  and how to create a the library component. In this blog, we will explore how to add custom layouts using extensibility.  Right now, PnP Modern Search Results webpart provides you with these 5 layouts, Details List, Cards, Slider, List and People, which should be sufficient for simpler scanarios. In addition to that, it also allows you to customize the layout by editing the handlebar template using “edit result template” option under Custom layout, or you can create a custom handlebar file, upload it on SharePoint and then add its location in “ Use an external template layout” option. For example, you are setting up a Search Results page for showing projects. If you use the the default List layout, then the results would end up looking like in the image below, it shows page title, author, date modified, project summary and then what all tags the project has been...

What is it? The PnP Modern Search solution includes a set of open-source web parts for SharePoint Online that allow for a highly customizable search experience. These web parts can be configured to create tailored search results pages, with features like dynamic filters, sorting, and pagination. PNP Modern Search Extensibility refers to the ability to customize and extend the PnP Modern Search webparts. This is achieved through various tools, components, and practices provided by the PnP community. Why do we need it? Before PnP Modern Search Extensibility was introduced, to achieve the desired changes to the search results, a lot of developers would make changes to the PnP Modern Search solution itself, which would result in the solution being detached from the community version, and if there were major releases done on the community version which were now desired on the cloned version, there would be no way to just deploy the new community package without losing the customizatio...