Using a Custom Search Page in Microsoft Viva Connections

Background

If you're just tuning in now, this post is one in a series I'm working on on better understanding and customizing the Connections app in the Microsoft 'Viva' family of 'Employee Experience' apps for Teams (if you're not familiar with Viva Connections, here's a short overview video from Microsoft).

Which Search Do You Prefer?

For some of us who've been in the SharePoint game for a long time, customizing the Search experience was a big part of making an intranet more functional and relevant. This included, for instance, showing customers Search results including better display capabilities and refinement based on real business properties like "Department" or "Publish Date" instead of "File Type" or "File Size" (who cares if my doc is a "124KB PDF" or a "168KB DOCX"? I want to know if it's the correct, up to date policy).

However, fast forward to "Office" (now "Microsot") 365 and we're pushed instead to a much less customizable, but (thankfully) far more pervasive "Microsoft Search" experience for the cloud suite. Fortunately, for those who still want to have a customizable experience, the community created and maintains a wonderful project called "PnP Modern Search". Well-known SharePoint Search expert (and now Microsoft employee) Mikael Svenson has a great overview post on his blog covering which to choose and why, but essentially the end result is that there are two possible options to how companies might want their search to manifest, and some have chosen the PnP route.

So how does this tie in to Viva Connections? Well, when you install Viva Connections, one of the capabilities that gets activated is the addition of a new Search option into the Teams search box, as shown below.

When you choose this new option, a browser tab will open, showing Microsoft Search results for your search term.

How Does Viva Connections Know Where to Go?

How does Viva Connections know where to send your searches, you might ask? Well, if we go back to a previous post on understanding the Microsoft Viva app package, one of the properties that we see appearing in the app package is the searchUrl property, and by default it is set to the "home site" you set for Viva Connections itself, and specifically to the search.aspx page inside that site, passing in the search term in the searchQuery querystring parameter "q", as shown below:

  "staticTabs": [
        {
            ...
            "contentUrl": "https://MyTenant.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&dest=https://MyTenant.sharepoint.com/?app=portals",
            "searchUrl": "https://MyTenant.sharepoint.com/_layouts/15/search.aspx?q={searchQuery}",
            ...
        }
    ],

Customizing the Search Destination

With the search url so visible and simple inside there, I wondered if it could be changed and indeed it can. I have a custom page set up using the PnP Modern Search web parts, at an address like the following:

https://MyTenant.sharepoint.com/sites/SearchDemo/SitePages/Search-Results.aspx

If I configure the page to expect an incoming query using a querystring variable like "q" in the same way as the default configuration, then I figured I could try passing the following inside the Viva Connections app package:

  "staticTabs": [
        {
            ...
            "contentUrl": "https://MyTenant.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&dest=https://MyTenant.sharepoint.com/?app=portals",
            "searchUrl": "https://MyTenant.sharepoint.com/sites/SearchDemo/SitePages/Search-Results.aspx?q={searchQuery}",
            ...
        }
    ],

And when I tested it out, it worked great! I tried deploying two separate Viva Connections apps to two sets of users in the same tenant, each one using the different options, and the screenshots below show the end results:

Standard Search Experience

Here's the Search box inside Teams using "experience 1" (it's just called "Brand 1" because of how I set it up in the previous blog post):

and here the results:

Adjusted Search Experience

Here's the Search box inside Teams using "experience 2" (it's just called "Brand 2" because of how I set it up in the previous blog post):

and here the results:

Of course, the search box experience is much the same in the two options, I'm just showing them to show that each user is using a different customized Viva Connections, but the results page is really what we want to focus on, and to note how they are different.

I should mention that I'm using the "v3" Modern Search web parts - I haven't played with the latest "v4" version, but I believe the end result will be the same.

Is This Safe?

As I mentioned in the previous post, herewith a word of caution - I have no idea whether this is a supported or sanctioned idea, I'm simply showing what's possible - I take no responsibility for destroying your tenant, your content, or your reputation, neither can anything in this post be construed as sound financial advice. Caveat Emptor!