Creating custom search results pages in SharePoint Online
Published Jan 30 2020 03:41 PM 84.8K Views
Microsoft

We’re excited to announce that you can now create custom search results pages in SharePoint Online, extending the benefits and flexibility of Microsoft Search so you can make it your own.

 

With custom results pages you can create a new page that can be used to control the layout and design of search results to support your custom needs and now use open-source search web parts from SharePoint Patterns and Practices community, as well as any custom web parts that you may have developed using SharePoint Framework. 

 

clipboard_image_0.png

PnP modern search web parts

 

Custom search results pages with SharePoint Online will be displayed when searching through the native search box, instead of the out of box search results page.

 

NOTE Custom results pages will only be displayed when searching through the modern search box(Microsoft Search).  This capability is rolling out WW.  A visual queue that Microsoft Search is available in your tenant is the move of the search box from the app or service canvas to the suite navigation bar (header).

 

clipboard_image_1.png

Modern search box in the suite navigation bar

 

The custom search results page will be used in the same scenarios that were showing the site search results page (when you enter search from site pages, or the home page of the site for example). It will not be in effect when you are searching within a listlibrary or the site contents page.

 

You may use the link to expand your search from search results in these experiences to get to the custom results page.  

 

To configure a custom results page in SharePoint Online follow the steps below:

 

  1. Browse to the site where you would like to configure a custom results page and select Site Collection Settings, Search Settings.
  1. In Search Settings, choose to “Send queries to a custom results page”, and provide a value for Results page URL: and save your changes.

 

clipboard_image_2.png

Configuring the custom results page in SharePoint

 

Optionally you can use PnP-PowerShell to configure the custom results page as follows:  

 

 

 

 

 

Set-PnPSearchSettings -SearchPageUrl "https://tenant.sharepoint.com/..."

 

 

 

 

 

Learn more about this command at

https://docs.microsoft.com/en-us/powershell/module/sharepoint-pnp/set-pnpsearchsettings?view=sharepo....

.

 

 

NOTE The custom results page needs to be on the same domain as your site, but doesn’t have to be in the same site collection.  

 

In addition to this update, we’re also introducing a new page layout for custom search results pages that can optionally be used to make the search results page appear closer to our out of box search results experience. This new layout can only be active for the pages that are set to be the custom search results page. 

 

To learn more about custom results page, check out our Ignite 2019 Search Customization and Development session and bookmark Microsoft Search on YouTube at https://www.youtube.com/channel/UC-d4Q5pvRf6IVJuWY8wpAFw/.

 

Resources

For open source projects, getting started with our Microsoft Search APIs, and more customization and extensibility samples, visit Microsoft Search on GitHub at https://github.com/microsoft-search.

 

Keep up to date with Microsoft Search on our resource center at https://aka.ms/microsoftsearch and follow us on Twitter @MicrosoftSearch.

 

If you would like to leave feedback to our teams on Microsoft Search visit https://microsoftsearch.uservoice.com.  We’re listening!

42 Comments
Microsoft

Just to add resources or links around mentioned topics.

Step by step guidance video from the Microsoft 365 / SharePoint Patterns and Practices YouTube channel:

 

 

Got a question? - Don't hesitate to ask. We are here to help.

 

clipboard_image_1.png

 

Iron Contributor

interesting article. Is there by any chance information on how to set the Results layout depending on the vertical? Any info on that @Vesa Juvonen ? Because now if I use the "People" layout it sets the resource ID to People so when I click on the "Videos" vertical I don't see anything. How to separate them?

Thanks!

Cheers.

Steel Contributor

@Alexander Broere Any questions about the web parts can be asked over at https://github.com/microsoft-search/pnp-modern-search. But short answer is to set up "result type" expressions in the web part matching what is shown per vertical to use the correct layout.

Brass Contributor

Hi guys, really good feature and opens a lot of doors for SharePoint Intranets. One thing I noticed is that if you have two site collections and you hide the out the box search in one, then navigate to the second using the standard navigation, the search box remains hidden. I think it's to do with the cache as reloading in a new tab works fine and the search box displays. Great features though, looks like a lot is happening around modern search atm

-Max

Steel Contributor

@Max Goss that might be a router-navigation bug actually, not checking the state on navigation. If you can control the hyperlink to the other sc, add a data-interception attribute as a work-around to the hyperlink like:

<a href="asdasd" data-interception="off">Link</a>

 This will do a full navigation, instead of a router navigation.

Brass Contributor

@Mikael Svenson yes I've used that approach in SPFX solutions etc. The issue here is seen when you use the out the box nav. So for example you use the hub nav to go from your portal site which has the search box to a connected child site where perhaps you want to hide it. In these cases using the out of the box nav causes the search box to take its settings from the site the user navigates from. This sounds like an issue with the caching/ routing behaviour of the out the box nav, but it does negatively impact the search customizations outlined here. As you say opening in a new tab or browser refresh will solve, but currently presents a confusing user experience.

Steel Contributor

@Max Goss We'll investigate and look into this - could be a search box context issue here.

Iron Contributor

@Bill Baer- a question about the Note
"Custom results pages will only be displayed when searching through the modern search box(Microsoft Search).  This capability is rolling out WW.  A visual queue that Microsoft Search is available in your tenant is the move of the search box from the app or service canvas to the suite navigation bar".

 

Can you please advise when the World Wide rollout of Microsoft Search will be completed?  I'm a target user in my tenant and I have had Search Box in my O365 bar since June 2019.  It's now almost May 2020 and my standard users still don't have Microsoft Search.  My Admins and local Microsoft reps don't seem to be able to advise me  why our tenant doesn't yet have Microsoft Search. 

Update - Microsoft Search finally received in our tenant early June 2020

Copper Contributor

Hi Guys,

Thank you for offering flexibility over the out of the box and default search results application page.

I'm trying to build a modern search center using PnP modern search web parts and the modern search results page(s).

 

Although you can create as many as you want search result pages, only the one specified in the in the search settings under "Send queries to a custom results page URL." will work. If you try to access other search results pages you will get the "We can't show this page with its current layout". 

I know this is by design but it is also creating a big limitation and let me explain why:

Imagine a modern search center with multiple pages, based on the new introduced search result page layout and navigation between them based on the PnP Search Verticals web part, where one or more verticals inside are used to open the other search result pages.

If you will find a way to remove the limitation I mentioned above, this will unleash the full potential of the PnP modern search web parts to build a complete modern search center based on multiple full search result pages in the same way like in the classical search center.
Regards,

Catalin

Steel Contributor

The PnP vertical web part support just fine to have verticals on the same page. And you can configure result type matching in the result web part to work for content per vertical.

 

And, the idea for PnP Modern Search in my mind is not to replace the Microsoft Search result pages, but rather give you an opportunity to create search based portals or content roll up. You can of course disagree :) With the upcoming features to allow configuration of the verticals and using adaptive cards to render items you should be able to cover more use-cases.

 

I would not recommend anyone to build a full search center based on the SharePoint classic features today, but you can. I haven't recommended this for many years, so not marketing talking :) And this is why. With Microsoft Search being available from more and more applications (header searchbox), covering more and more data, and having a unified look and feel across clients - wouldn't you confuse your users by having one experience in SharePoint only with a subset of the content (over time)? And how can you control where they search from?

 

That said, your workaround is to hide the OOB search box, and roll your own search box/use the PnP one per page - this way you get as many pages as you want, but they will contain the SP header. There are no plans to allow multiple no-header pages on a site outside of this scenario for obvious reasons.

 

A question, can you share scenarios where your users cannot solve their search ask using the current oob search experience?

Copper Contributor

Hi @Mikael Svenson ,

Thank you for your reply to my comment.

It makes perfectly sense what you said about Microsoft Search and I'm fully aware about it. But, is not yet there in terms of end-user experience customizations.

Just focusing on SharePoint Search, I would say that the concept of a modern search center with multiple full layout search pages is interchangeable with a search based portal or content roll up portal, you mentioned. For me is the same thing, just that you need more real estate which is provided by by the search page layout.

Plus, that nobody wants build a rollup search portal with one single page. For a more complex scenario, one page is not enough.

 

Until, the new out of the box verticals, plus the adaptive cards for templating will be available, the current possibilities of of customizing the out of the box experience of the SharePoint search application page are pretty limited, I would say. 

 

I won't go for hiding the OOB Search Box or any other type of customizations for the Office bar, if these are not offered by Microsoft.

 

For the scenario, you could have multiple sets of verticals, each set focusing on a specific type of content (e.g. Digital Media set with the following verticals: All Images, ClipArt's, Black and White,..., and then Pages set with verticals like: News, Procedures, Blogs, etc.).

I know, you could say that these should be part of refiners, which is valid for a simple scenario, but for a complex scenario, you have specific refiners for each set of verticals and the business wants each set of verticals on a separate page..

Catalin

Copper Contributor

Hello @Bill Baer,

 

Is there any way to add custom refiners, to the custom vertical associated, when using Graph Connectors? How?

 

Many thanks!

 

Steel Contributor
Copper Contributor

Hello everyone,

 

I created a custom vertical, associated with its corresponding connector, but when using the PnP Search Verticals I don´t see a way to include the already created custom vertical. Is there any way to show custom verticals with PnP? If yes, how do I retrieve the "Result Source Identifier" for the vertical? 

 

Many thanks!

Steel Contributor

@marcofong  there is no connection between Microsoft Search verticals and what you can do with the PnP web parts.

 

Microsoft Search does not rely on the classic search features such as result sources. And personally I do not see the PnP web parts as a replacement for the OOB search page, but rather a solution to bridge the gap on customized search driven portals or a more advanced HCWP.

 

API wise connector content from custom verticals is accessible via the Microsoft Graph Search API, but this has not yet been implemented in the PnP Modern Search web parts (but it will).

Copper Contributor

@Mikael Svenson, excellent details and advices on which way to go.

 

I totally agree with your thoughts about that PnP web parts are not a replacement for the OOTB search mechanism. Though I was making a PoC and trying to prove if there was a relation between those two. Thanks for clarifying.

 

 

Steel Contributor

@marcofong if you try hard you could get pretty close, but not all the way. This is because out internal API's for Microsoft Search has evolved beyond the pure SharePoint search API. You will however see more functionality exposed over time via the Graph Search API which should be similar to Microsoft Search.

Copper Contributor

Thanks @Mikael Svenson and interesting details provided. 

 

By the way, I can´t get through the process of creating a new custom Azure DevOps Connector to my Microsoft Search section because I receive a 400 error when I click on Login (step 2, when M365 start authenticating through DevOps), and everything seems to be fine. I´ve already registered the app on my DevOps instance and authorized it as well. Could you please address me to the get right way on this issue.     

 

On the other hand, do you know if Microsoft has in its roadmap any connector to those virtual library platforms like Cornerstone?  

Steel Contributor

You can log questions and issues with connectors at https://github.com/MicrosoftDocs/OfficeDocs-MicrosoftSearch/issues

Steel Contributor

Are we close to get custom refiners for Microsoft Search (target was june 2020)? I guess it will only be available on first release and probably by the end of the year for standard release... This is a long road...

 

Thanks!

Steel Contributor

Should be close :thumbs_up: Time from TR to GA varies depending on if issues arise or not.

Copper Contributor

Note: Also posted on PNP Git Hub as a suggestion.

This is a great plug-in, thank you for all the work that has gone in to it. I have noticed however that the search on a modern page will display thumbnails in the search results for newer Adobe PDF documents (those saved in Adobe version 1.5 - Acrobat 6.x), but the PNP Modern Search only shows a pixelated icon. The PNP Search does show thumbnails for older PDF documents (those saved in Adobe version 1.4 - Acrobat 5.x).Standard Search Result SharePoint OnlineStandard Search Result SharePoint OnlineSearch Result in PNP Modern Search on SharePoint OnlineSearch Result in PNP Modern Search on SharePoint Online

Copper Contributor

Note: Also posted on PNP Git Hub as a suggestion.

A suggestion for the future display on tags. Currently it does not appear that spaces are placed between tags and that long tags word wrap. I propose a space between tags and no word wrapping. If there are more tags/space required than fits on one line, wrap the tags to the following line.

Tag SpacingTag Spacing

Copper Contributor

Are there detailed instructions for configuring the Refiners? I have found many tutorials for the search results, but no detailed instructions for the Refiners. I would appreciate some pointers on configuring the Refiners and then would like to assist in developing content for them. :)

Steel Contributor

@dirkzwart See https://docs.microsoft.com/en-us/sharepoint/manage-search-schema#map-a-crawled-property-to-a-managed... for some information on how to create custom refiners. Agree documentation could be better and will make a note of this.

Copper Contributor

What about search verticals? I just found the feature, but I cannot find documentation on how to use it.

Copper Contributor

Hi @Vesa Juvonen ,

 

Could you please help me with PnP modern search results (V3) web part?

I want to show promoted results (Query Rules) on the search results. But webpart is not showing single promoted results.

 

Thanks in advance:-)

 

Copper Contributor

Hi Where do we see the usage reports when using modern pnp search? I have been using this for a few days and no reports show up in Site settings - Search Usage - Top queries for example.Thanks

 
 
 
Copper Contributor

The video is awesome and a huge help.  The video shows how to redirect the search part to a custom page.  Is there a tutorial on how to make a custom search page to search one document library that is not used by the main site search bar?  I am struggling with how to link this all up when the search query is not passed in.

Steel Contributor

@LukeAtWork  On your custom page you need to have some search web part, like the PnP Modern Search web parts to consume the user  query. If you want to search one library, you would add a query filter in your web part using KQL to something like path:<URL to lib> or similar.

Copper Contributor

Hi! Has anyone seen this working for guest accounts? For licensed (domain) accounts, redirecting towards the custom search page works, but for guest accounts, SharePoint redirects to the default search result page no matter what you configure in the search settings. Any help is much appreciated!  

Steel Contributor

@Klaas_Lauwers the redirect from a modern page to a custom search result box is tied to the suite navigation search box, which is currently not exposed to guest users. This is something we are working on and it's a known limitation today for guest users. A workaround is to hide the nav bar search box, and use a custom one which is visible for guest users as well as native users.

Copper Contributor

@Bill Baer @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?

Steel Contributor

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

Copper Contributor

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.

 

Steel Contributor

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.

Copper Contributor

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>
Copper Contributor

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>
Copper Contributor

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? image.png

Microsoft

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

Copper Contributor

Hello @Vesa Juvonen@Bill Baer  ,

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?

 

 

 

Microsoft

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

Version history
Last update:
‎Feb 06 2020 07:38 AM
Updated by: