Create a Deep Link to a filter webpart for a term value

[bckrma]

Hey guys, i want to create a deep link to a pnp filter on a different site using a managed metadata property.
Basically my goal is to click on an icon in my search results webpart, which then opens a new tab to a different page on the same site, with some filters already applied.

To do this the filter has to look like this
f=[{"filterName":"RefinableString00","values":[{"name":"eBook","value":"\"ǂǂ65426f6f6b\"","operator":0}],"operator":"or"}]#
But i have no idea where i can get the refinment token used in the 'value' part.
I have already found out that the refinment token is a HEX encoded version of the term name, but it looks like the base64Encode handlebar is not available in the modern search web parts.

I have also found this discussion #3741 and the workaround to use the dynamic url fragments But unfortunately, the results are filtered, but the filters are not set which is needed in my use case.

So my questions are:

• Is there a way to retrieve the refinment token so that i can build the deep link in the results layout?
• Is there a smarter way to create the deep link in the results layout, without the use of additional extensibility libraries?

The only solutions i can think of so far are:

• Create a extensibility library with a base64Encode helper
  • unfortunately this is beyond my capabilities.
  • if i understand the documentation correctly, i would have to update the extensibility library each time the modern search web parts gets updated to a new SPFx version?
• Create a new list column, add the refinment token for each item and add the column to the search schema
  • I would like to avoid this, since i would have to create some kind of automation to update the refinment token when the term is changed

Maybe one of you has an idea how to realize this, I would certainly be very happy about it.

Cheers

[wobba]

Easiest way to get the token is to set of filter web part, click the value, and copy what is in the URL of the browser.

[bckrma]

Yes but that wont help in my use case. I need a way to use the token within my custom layout to build a link for each result item with the filters already applied.

[wobba]

Then you need a hex-encoding helper - assuming the value you have in your custom layout is what the encoded token would be. You can try this first: Pass the value-label instead of the ǂǂ prefixed hex encoded version of the same. This should also select for you.

[kasperbolarsen]

I wonder if this could save as inspiration for a helper, maillouxc/mockoon#1

[bckrma]

Thanks a lot for the suggestions!
I did some further testing:

Using the value-label instead of the ǂǂ prefixed hex encoded value
This works, but there is a minor display error in the filter webpart:

• Example: f= filter with hex encoded term label
  (https://<Site>.sharepoint.com/sites/<SiteName>?f=[{"filterName":"RefinableString00","values":[{"name":"Gustav","value":"\"ǂǂ477573746176\"","operator":0}],"operator":"or"}]#)
  

• Example: f= filter with term label
  (https://<Site>.sharepoint.com/sites/<SiteName>?f=[{"filterName":"RefinableString00","values":[{"name":"Gustav","value":"Gustav","operator":0}],"operator":"or"}]#)
  

Custom extensibility library
Before reading your suggestion with the term label in the value part, i have also tried to create a extensibility library with a custom handlebar following the steps described here (https://microsoft-search.github.io/pnp-modern-search/extensibility/#create-an-extensibility-library)

I have tested it briefly and it seems to work.

My 'main entry point' looks like this

Expand

import { IAdaptiveCardAction, IComponentDefinition, IDataSourceDefinition, IExtensibilityLibrary, ILayoutDefinition, IQueryModifierDefinition, ISuggestionProviderDefinition } from "@pnp/modern-search-extensibility";

export class CustomHandlebarsLibrary implements IExtensibilityLibrary {
  public getCustomLayouts(): ILayoutDefinition[] {
    return [];
  }
  public getCustomWebComponents(): IComponentDefinition<any>[] {
    return [];
  }
  public getCustomSuggestionProviders(): ISuggestionProviderDefinition[] {
    return [];
  }
  public registerHandlebarsCustomizations?(namespace: typeof Handlebars): void {
    namespace.registerHelper("encodeToHEX", (str: string) => {
      let hexString = '';
      for (let i = 0; i < str.length; i++) {
        hexString += str.charCodeAt(i).toString(16).toUpperCase();
      }
      return hexString;
    });
  }
  public invokeCardAction(action: IAdaptiveCardAction): void {
    throw new Error("Method not implemented.");

  }
  public getCustomQueryModifiers?(): IQueryModifierDefinition[] {
    return [];
  }
  public getCustomDataSources?(): IDataSourceDefinition[] {
    return [];
  }
  public name(): string {
    return 'CustomHandlebarsLibrary';
  }
}

I have also changed the following dependencies in package.json file to version '1.18.2'

• "@microsoft/eslint-config-spfx"
• "@microsoft/eslint-plugin-spfx"
• "@microsoft/sp-build-web"
• "@microsoft/sp-module-interfaces"

Have I understood it correctly, that these version have to reflect the version used in the pnp-modern-search webparts?
So when there is a new release of the webpart, i might have to update the version in my custom spfx project to the version used in the modern search web parts and rebuild?