PnP Modern Search Extensibility

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

With PnP Modern Search Extensibility, you can create a standalone library that will hold the customizations and then you can bind the PnP Modern Search Results webpart with the Id of the library.

What can we Customize?

Using PnP Modern Search Extensibility library, we can add a new data source, layout, component, or suggestions provider. In this blog post, we would learn how to create a SPFx library.

Creating a SPFx library component for extensibility

Library components provide you an alternative option to create shared code, which can be then used and referenced cross all the components in the tenant.

Library components have following characteristics:

  • You can only host one library component version at the time in a tenant.
  • You can deploy and host library components in the tenant app catalog or the site app catalog.

When it comes to creating a PnP Extensibility library,

  • The main entry point of your library must implement the IExtensibilityLibrary interface from the @pnp/modern-search-extensibility library.
  • Your library Manifest Id must be registered in the Web Part where you want to use the extension.

Detailed Steps:

  1. You can create a library component solution by selecting Library as the Component Type when creating new projects with the SPFx Yeoman generator. Use yo @microsoft/sharepoint.


  2. Once the project is scaffolded, open the project folder in Visual Studio code using, code . command.

  3. You would have structure similar as seen in the following image, also take note of the Id in the manifest.json, this is the Id that you would use to register library with the PnP Search Results webpart.

  4. Next, we have to install @pnp/modern-search-extensibility as a dependency, open the terminal and execute npm install @pnp/modern-search-extensibility.

  5. Next, the library must implement IExtensibilityLibrary like so, 


  6. You would notice that, in order to implement the interface you have to override various methods, for example, if you want to add a new Layout, then you have to register that new layout in getCustomLayouts(), like so, I will cover the detailed steps needed to add custom layouts in the next blog.

  7. Please note that you will have to provide all method implementations (return empty arrays if you do not implement specific extensions).

  8. Finally, you will bundle, package the solution, and deploy it in the tenant or site collection app catalog.

  9. Now, we have to bind the library with our PnP Search Results webpart, to do that, you will edit your page and edit the properties of the results webpart, and go to the step 4, where you will get to define Extensibility Configuration, here, you would click on Configure and in the pane that opens, you will add your library entry. You would use the GUID from step 3 here. 

Comments

Post a Comment

Popular posts from this blog

PnP Modern Search Extensibility: Creating Custom Layouts

Image
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...
Read more

PnP Modern Search Extensibility: Creating Handlebar Helpers

Image
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...
Read more