Creating custom search results pages in SharePoint Online

VHavranek there is no option to configure the suggestions in the nav bar search box today.

Hello VesaJuvonen, wbaer  ,

I have a requirement to alter the search results hint URLs (to use specific value of action URL param), i.e. the links coming up when user starts typing in the OOB search box. 

And this should only apply to a single document library.

This is currently not available in the Set-PnPSearchSettings cmdlet options. 

Without that, the only option I see is to hide the OOB search box altogether (but this does not support doclib scope, so it would disappear throughout the current site which is far from ideal) and provide a site page containing the PnP search box wp. Assumming it can be configured to achieve custom item URL links.

Is there a way to achieve this via PnP Modern search, e.g. to have a custom search box (based on PnP Modern search box wp) replace the OOB MS search box?

Ashwin_CH questions on templates for PnP Modern Search is best asked at https://github.com/microsoft-search/pnp-modern-search/discussions.

But it's a matter of ensuring the URL you want is used as the click url property. Without knowing your data and setup it's hard to know what the issue is.

Hello, I am using this search result option, Handbooks are coming up like this with unique number and cannot be opened. Is there any way to resolve this? 

I believe I figured it out.  In the code I pasted I did have the the "promotedResults" section separate from the "hasPrimaryorSecondaryResults" section, however they were contained within the same DIV.  I moved the the promoted results to it's own DIV and viola, promoted results started displaying even if there are no primary or seconday results.

Does not work:

 <div class="template_root">
        {{#if @root.promotedResults}}
            {{#each @root.promotedResults as |promotedResult|}}
            <div class="bnf-container">
                <div class="bnf-heroFrame">
                    <div class="bnf-heroColumn">
                        <div class="bnf-bookmarkContent">
                            <a class="bnf-href" href="{{Url}}">{{Title}}</a><br />
                        </div>
                        <div>
                            <a class="bnf-url" href="{{Url}}">{{Url}}</a>
                        </div>
                    </div>
               </div>
            </div>
            {{/each}}
        {{/if}}        
        
        {{#if @root.hasPrimaryOrSecondaryResults}}
            <div class="template_defaultCard">
                <div class="document-card-container">
                    {{#each data.items as |item|}}
                        <div class="document-card-item">
                            {{#> resultTypes item=item}}
                            {{!-- The block below will be used as default item template if no result types matched --}}
                            {{#eq item.contentclass 'STS_ListItem_851'}}
                            <span>No related news found</span>
                            {{else}}
                            <p>
                            <a class='bnf-href' href="{{getUrl item}}">{{slot item @root.slots.Title}}</a><br />
                            {{Path}}<br />
                            </p>
                            <!--pnp-document-card data-item="{{JSONstringify item}}" data-fields-configuration="{{JSONstringify @root.documentCardFields}}" data-enable-preview="{{@root.enablePreview}}" data-show-file-icon="{{@root.showFileIcon}}" data-is-compact="{{@root.isCompact}}"></pnp-document-card-->
                            
                            
                            {{/eq}}
                            {{/resultTypes}}
                        </div>
                    {{/each}}
                </div>
            </div>

Does work

    <div class="template_root">
        {{#if @root.promotedResults}}
            {{#each @root.promotedResults as |promotedResult|}}
            <div class="bnf-container">
                <div class="bnf-heroFrame">
                    <div class="bnf-heroColumn">
                        <div class="bnf-bookmarkContent">
                            <a class="bnf-href" href="{{Url}}">{{Title}}</a><br />
                        </div>
                        <div>
                            <a class="bnf-url" href="{{Url}}">{{Url}}</a>
                        </div>
                    </div>
               </div>
            </div>
            {{/each}}
        {{/if}} 
    </div>

     <div class="template_root">    
        {{#if @root.hasPrimaryOrSecondaryResults}}
            <div class="template_defaultCard">
                <div class="document-card-container">
                    {{#each data.items as |item|}}
                        <div class="document-card-item">
                            {{#> resultTypes item=item}}
                            {{!-- The block below will be used as default item template if no result types matched --}}
                            {{#eq item.contentclass 'STS_ListItem_851'}}
                            <span>No related news found</span>
                            {{else}}
                            <p>
                            <a class='bnf-href' href="{{getUrl item}}">{{slot item @root.slots.Title}}</a><br />
                            {{Path}}<br />
                            </p>
                            <!--pnp-document-card data-item="{{JSONstringify item}}" data-fields-configuration="{{JSONstringify @root.documentCardFields}}" data-enable-preview="{{@root.enablePreview}}" data-show-file-icon="{{@root.showFileIcon}}" data-is-compact="{{@root.isCompact}}"></pnp-document-card-->
                            
                            
                            {{/eq}}
                            {{/resultTypes}}
                        </div>
                    {{/each}}
                </div>
            </div>
{{#if @root.paging.showPaging}}
                <pnp-pagination data-total-items="{{@root.paging.totalItemsCount}}"
                                data-hide-first-last-pages="{{@root.paging.hideFirstLastPages}}"
                                data-hide-disabled="{{@root.paging.hideDisabled}}"
                                data-hide-navigation="{{@root.paging.hideNavigation}}"
                                data-range="{{@root.paging.pagingRange}}"
                                data-items-count-per-page="{{@root.paging.itemsCountPerPage}}"
                                data-current-page-number="{{@root.paging.currentPageNumber}}">
                </pnp-pagination>
            {{/if}}
            {{else}}
            {{#unless showBlank}}
        
            {{/unless}}
        {{/if}}

    </div>

Looking at that thread, you recommend moving the promoted results section out of the "hasPrimaryorSecondaryResults" section, however we are currently doing that and it still doesn't show the promoted results when there are no primary or secondary results.  Here is my handlebars code:

 <div class="template_root">
        {{#if @root.promotedResults}}
            {{#each @root.promotedResults as |promotedResult|}}
            <div class="bnf-container">
                <div class="bnf-heroFrame">
                    <div class="bnf-heroColumn">
                        <div class="bnf-bookmarkContent">
                            <a class="bnf-href" href="{{Url}}">{{Title}}</a><br />
                        </div>
                        <div>
                            <a class="bnf-url" href="{{Url}}">{{Url}}</a>
                        </div>
                    </div>
               </div>
            </div>
            {{/each}}
        {{/if}}        
        
        {{#if @root.hasPrimaryOrSecondaryResults}}
            <div class="template_defaultCard">
                <div class="document-card-container">
                    {{#each data.items as |item|}}
                        <div class="document-card-item">
                            {{#> resultTypes item=item}}
                            {{!-- The block below will be used as default item template if no result types matched --}}
                            {{#eq item.contentclass 'STS_ListItem_851'}}
                            <span>No related news found</span>
                            {{else}}
                            <p>
                            <a class='bnf-href' href="{{getUrl item}}">{{slot item @root.slots.Title}}</a><br />
                            {{Path}}<br />
                            </p>
                            <!--pnp-document-card data-item="{{JSONstringify item}}" data-fields-configuration="{{JSONstringify @root.documentCardFields}}" data-enable-preview="{{@root.enablePreview}}" data-show-file-icon="{{@root.showFileIcon}}" data-is-compact="{{@root.isCompact}}"></pnp-document-card-->
                            
                            
                            {{/eq}}
                            {{/resultTypes}}
                        </div>
                    {{/each}}
                </div>
            </div>
            {{#if @root.paging.showPaging}}
                <pnp-pagination data-total-items="{{@root.paging.totalItemsCount}}"
                                data-hide-first-last-pages="{{@root.paging.hideFirstLastPages}}"
                                data-hide-disabled="{{@root.paging.hideDisabled}}"
                                data-hide-navigation="{{@root.paging.hideNavigation}}"
                                data-range="{{@root.paging.pagingRange}}"
                                data-items-count-per-page="{{@root.paging.itemsCountPerPage}}"
                                data-current-page-number="{{@root.paging.currentPageNumber}}">
                </pnp-pagination>
            {{/if}}
            {{else}}
            {{#unless showBlank}}
        
            {{/unless}}
        {{/if}}

    </div>

This was fixed for the default templates in v3.18 (https://github.com/microsoft-search/pnp-modern-search/issues/799) If you see data in the debug template, then it's a matter of getting your custom template to render it. As for classic search I cannot verify how it works and nothing will probably be changed from the product side. For Microsoft Search Bookmarks is the way to go, not query rules.

Hi Mikael Svenson , I appreciate you taking a look at my concern.  

I do see the promoted results are being returned, even with no normal results, I can verify this if I put the view in debug view so I know the query rule is working. We are using custom handlebars code to display the promoted results and this displays them correctly. 

The config of the query rule are the following:

Query condition: "Advanced Query Text Match"

"Query contains one of these phrases (semi-colon separated)" is checked.

                 There are several keywords/phrases added to this rule.

"Entire query matches exactly" is checked

"Start of query matches, but not entire query" is checked.

"End of query matches, but not entire query" is checked.

"Assign the entire query to {subjectTerms}" is checked.

(I have also tried "Query Matches Keyword Exactly" but the same behavior occurs)

Actions contains one promoted results entry and the "Render the URL as a banner instead of as a hyperlink" is not checked.

Publishing, the rule is active with no date limits.

I have been looking in github for anything related to this issue but cannot find anything.  Could you provide a link.

Danny Herrera promoted results do show in the PnP web parts, but it's dependent on the template you use. But it can be added manually as well. There are issues on github around this, and has been fixes in where you had 0 normal result and only promoted ones returned. Triggering depends on how you set up query rules triggering, so you would need to add more details. But, maybe outside the scope of this article and you could post a separate question in the forums to get help.

wbaer Mikael Svenson 

 I’ve been trying to figure this out with the both the OOTB search results web part and the PnP search results web part.

If you type in a keyword that belongs to a query rule and it fires but there are no primary or secondary search results the web part will not display the promoted results.

In order for the web part to be visible there has to be primary or secondary search results or you have to enable the “Show blank if no result” setting in web part settings.  

Why are promoted results not counted as results?

Another weird behavior I have come across is that not all keywords trigger the query rule. Is SharePoint aware of spelling and case in this area? For example, I have two keywords in the query rule, “fear free” and “fearfree”, the former will trigger the rule but the latter will not.

I have been looking everywhere about the quirkiness of this web part but cannot find anything.

Have you experienced this?