Can't implement registered custom Handlebars helpers anywhere.

[mkgy]

!! Check existing issues before logging new ones !!

Version used
feature/v4

Describe the bug
search-extensibility-demo has a default custom Hundlebar helper called 'myHelper'. When I try to call it on some values in searchResults I get the message "Error: Missing helper: "myHelper".

To Reproduce
Steps to reproduce the behavior:

1. Clone feature/v4 branch
2. Navigate to folder search-extensibility
3. run npm i
4. run gulp bundle
5. run npm link
6. Navigate to folder search-extensibility-demo
7. run npm i
8. run npm link @pnp/modern-search-extensibility
9. run gulp bundle
10. run gulp bundle --ship
11. run gulp package --ship
12. add the solution to the global catalog
13. select the checkbox "Make this solution available to all sites in the organization"
14. register my manifest ID in the target Web Part instance
15. add a column for the details list layout
16. make adjustment to column value by implementing the default custom Handlebars helper "myHelper"

Expected behavior
By definition "myHelper" should convert a string-value to lowercase.

Screenshots

Desktop (please complete the following information):

• Browser : chrome, edge

Additional context
none

[FranckyC]

Hi @mkgy, can you try with parenthesis {{myHelper (slot @root.slots.Language)}}. I'm not able to reproduce this issue :(. Also, please try with the latest v4 branch code. We had some issues with latest commits so it may explain.

[mkgy]

I have tried with the latest v4 branch code and also used the syntaxes {{myHelper (slot @root.slots.Language)}} and {{myHelper slot @root.slots.Language}}
However, the problem still remains, namely that helper is missing.

[mkgy]

I have created a new SharePoint Framework project of type 'Library' with yo @microsoft/sharepoint. I linked it with the @pnp/modern-search-extensibility library. In the main entry point, I implemented the IExtensibilityLibrary interface and provided the necessary methods returning empty arrays for those extensions that I don't need now. Inside the method registerHandlebarsCustomization() I registered my own custom Handlebars helper called "iliToUpper". Then I called this method from Column value (under "Managed columns")using {{iliToUpper (slot item @root.slots.Language)}}.
Similarly I called the custom helper "myHelper" from search-extensibility-demo using {{myHelper (slot item @root.slots.Language)}}
I have registered the GUID of both extension libraries in my web part and saved it.
In the screenshoot below you can see the outcomes of the method calls under the columns iLiHelper and MyHelper respectively.

It seems neither the demo extensibility library nor my own extensibility library is working properly. Hence, it is not possible to call a custom Handlebars helper on a value.

****Screenshot ****

[FranckyC]

What if you use the helper in the main template instead of a column? Does it work?

[FranckyC]

@mkgy Ok I think I know what is going on. You are probably using the v3 search results Web Part and not the v4...I tried to run your scenario from scratch and it works fine. Make sure you selected "PnP - Search Results" Web Part and not "Search Results". These are not the same. Let me know.

[FranckyC]

@mkgy Ok I think I know what is going on. You are probably using the v3 search results Web Part and not the v4...I tried to run your scenario from scratch and it works fine. Make sure you selected "PnP - Search Results" Web Part and not "Search Results". These are not the same. Let me know.

Ok nevermind, I thought according to the first screenshot it was the v3 due to the default sortable "Title" column but the scond screenshot looks like v4. @wobba @MakingThingsWorkToronto can you try to deploy and use the extensibility demo project. I'm not able to reproduce this issue.

[mkgy]

@FranckyC I put your suggestion into practice and it seems to work fine.
I did the following:

For webpart "General results"

1. select layout "Custom"
2. select layout option "
3. inside this template create a div with an orange background
4. call the custom Handlebars.js helper "myHelper" from within this div as follows:
   
   {{ myHelper (slot item @root.slots.Language)}}
   
   

Note: the slot 'Language' is already added to Layout slots.

Also the value of this slot is activated

Outcome of "General results": This worked fine as you can see in the below screenshot ***:

screenshot***

[mkgy]

The problem arises when I want to call the Handlebars.js halper from the Manage columns of template "Detail List"

For webpart "Titles"
1.select layout "Details List"
2.select layout option "Manage columns"

3.Edit handlebars expression to {{ myHelper (slot item @root.slots.Language)}}

Note: the slot 'Language' is already added to Layout slots.

Also the value of this slot is activated

Outcome of "Titles":

[tripleseven73]

I ran into the same "Error: Missing helper: ..." problem and discovered it is caused by adding .a "PnP - Search Filters" Web Part to the page.

Steps to reproduce:

• add new blank modern site page
• optional: add two columns section layout
• add PnP Search Results Web Part (to left column of two columns section)
• configure PnP Search Results Web Part to the point that it is displaying results using detail list
• add manifest ID of custom handlebar library to PnP Search Results Web Part
• add column to detail list using a handlebar helper of custom handlebar library
• publish the page
• hit CTRL + F5 for full refresh
• verify handlebar helper is working
• add PnP Search Filters Web Part (to right column of two columns section)
• publish the page without configuring / connecting Search Filters Web Part
• hit CTRL + F5 for full refresh
• Search Results Web Part is displaying "Error: Missing helper: ..." in column using custom handlebar helper
• remove Search Filters Web Part
• publish the page
• hit CTRL + F5 for full refresh
• custom handlebar helper in Search Results Web Part is again working as expected

Behavior observed on several pages in SP Online using PnP Modern Search 4.1.0 (March 2021)(latest version as of moment of writing).

Update:
In a site page with two Search Result Web Parts and one Search Filter Web Part, the "Error: Missing helper: ..." can be resolved by dragging the Search Filters Web Part to a different location on the page (e.g. by dragging is to the bottom of the page).

[ayblanchet]

Hi,

I confirm, I still have the same error "Error: Missing helper" with or without searchFilters. It's impossible to use custom helper.
The extends librairy is correctly load, but the helper is not recover.

[wobba]

@tripleseven73 I can repro and think it's related to web parts perhaps having the same handlebar instance/service key. @FranckyC do you have any ideas? Seems the web components are not getting the correct instance when running this._serviceScope.consume<ITemplateService>(TemplateService.ServiceKey); as the instance is missing the registered helpers.

[wobba]

Fixed it by rearranging some code to ensure loading sequence is not causing race conditions :)

[wobba]

Seems still an issue, just triggers less :(

[wobba]

Added a hack workaround for now. Weird stuff.

[FranckyC]

Found the root cause. Should be OK for the next release.