Modify search in navigation

Searching in the navigation bar with multiple sites, multiple languages and a lot of content rarely gives you the result you want.  Or.. To be honest. Just having the same name on two pages gives you headache. Luckily we have the power to change that!

Two pages with the same name. Tooltip isn’t very helpful.

As you can see, we have two pages with the same name. I know that the page I’m looking for is located somewhere under Campaigns, but which one is it?

Since the search is provider based, we can create our own search provider and tell EPiServer to use that instead. To create your own search provider, all you have to do is implement the interface ISearchProvider and decorate your class with the SearchProvider attribute.

In this case, all we want to do is modify the output of the search, therefore we will just extend the search being used. In this example we will extend the EPiServer Find search provider, but the code will probably work on the EPiServer Search provider as well.

To do this, we create a new class called CustomPageSearchProvider, this class will extend EPiServer.Find.Cms.SearchProviders.EnterprisePageSearchProvider. To get our provider an unique name we need to override Category and give it our name.

Now build your project and navigate to Admin \ Config \ Search Configuration. If everything works as expected you should see your Custom Pages Search there. Enable your newly created provider, and make sure that it’s above the other pages search providers, or disable them.

Here we can decide which search providers to use, and also set in which order they are executed.

Now it’s time to modify the search result before sending it back to the client. Let’s start by overriding Search(Query query). We still want to use the search functionality from EPiServer Finds search, so we execute base.Search(query) into a search result. The result will contain a list with SearchResult. This class contains some properties like Title, Url and also some metadata containing the Id of the hit. We want to modify the Title of the SearchResult to it will contain information of where the page is located in the structure. To do that, we get all ancestors of the content, reverse that list, skip the first two entries (we don’t want the root or start page), and finally we format the title as we want to!

And now we are done! Build you project and head to edit mode and try the search!

Now we can see where the page is located. The text will be truncated, but the tooltip still contains the full path.