Sitecore Search & Coveo: Skinning Results Part 1/2

Jun 25, 2012
Juan Arias

Coveo Enterprise Search for Sitecore offers you a rich search interface for faceted search.  It also allows you to customize all the fields you get in your search results without programming or CSS work, as shown in the image:

But the style offered may not match your site, or it could be the case you are using some third party user controls and you require using them in your advanced search and your search results. For these cases, Coveo has created Skins. A skin is a group of .ascx files that allows you to change your search controls.

Before you can create your own skin, it is necessary to create a “Search Hub”; a search hub will contain many “Search Interfaces”. In order to achieve this, you need to open the “Interface Editor” in your Coveo server: 

http://MyCoveoServer:8080/SearchAdmin/Interfaces/Features_General.aspx

In Current Hub, select “Create a New Search Hub”:

Enter a name and then click “Create”:

Next, you need to create the search interface, click on Search Interfaces:

In Current Interface, select “Create a New Interface”:

Enter a name and click Create:

Then, you have to create the controls for the skin, in order to do this, in your coveo server, go to the location: C:\Program Files\Coveo Enterprise Search 6\Web\Coveo\Skins

It is recommended to take the Default skin as a base for all your changes, so copy the folder named “Default” and give a name for your skin. Return to the Interface Editor, refresh the page, and select your new Skin, and finally click Apply:

Return to the Search Hubs page, click on Content, select all existing search interfaces and the click on Remove Selection. In the confirmation, click Yes:

Then click on Add in order to select your search interface:

Select your search interface and click OK:

Once you have created your new Base Skin (along with the Search Hub and Search Interface), it is then time to add the coveo controls into your sitecore website. First you need to copy Coveo.CNL.Web.dll and Coveo.CNL.Web.Search.dll to your website's bin folder. Then you have to add the code necessary in your web.config to tell sitecore which coveo instance should use:

<coveoEnterpriseSearch>
   <server hostname="localhost" impersonate="False" mirrorName="default" port="52800"/>
</coveoEnterpriseSearch>

Now you can add coveo’s search controls to your sitecore pages, you add the reference:

<%@ Register TagPrefix="ces" Namespace="Coveo.CES.Web.Search.Controls" Assembly="Coveo.CES.Web.Search, Version=6.0.0.0, Culture=neutral, PublicKeyToken=44110d16825221f2" %>

And then you add the user control (a search hub):

<ces:SearchHub ID="MyCoveoSearchControl" Name="MySearchHub" runat="server" />

This will show the default search interface in sitecore:

And the default search results:

In the next part of this post, we will change the default search results, in order to match some custom format and style.