Sitecore Search & Coveo: Skinning Results Part 2/2

Jun 25, 2012
Juan Arias

Now that we learned how to create the new skin in Part 1, I will show the Coveo Enterprise Search Result title in a Sitecore CMS page, but it will have a specified maximum length, it will be a link to the result, and we will also show a custom field on italics. First, you have to create a new user control. Open Visual Studio and create a new ASP.Net Server Control Project:

Then add a reference to Coveo.CES.Web.Search it will allow you to access search results and render them:

Add a new class, make it public and it should inherit from the coveo class BoundToResult (under the namespace Coveo.CES.Web.Search.Controls)

using Coveo.CES.Web.Search.Controls;  

namespace
MyCustomSkinControls
{

    public class MyResultControl : BoundToResult

    {

    }

}

We add the property to hold the maximum length of the field:

private int m_Length;  

public
String Length
{

       get { return m_Length.ToString(); }
       set
{ m_Length = Int32.Parse(value); }
}

Its constructor will call the base class with the value “a”, in order to create it as a hyperlink:

public MyResultControl() : base("a")
{
}

Then it is time to override the method Render:

protected override void Render(HtmlTextWriter p_Writer)

{

//Get the value for the tile

string title = Result.ResultObject.Title;

 

//Get the value of a custom field

string author = Result.ResultObject.GetField("@rbauthor").ToString();

 

//Check the lenght of the values

title = this.CheckLength(title);

author = this.CheckLength(author);

 

//Add the href part for the result link

p_Writer.AddAttribute("href",Result.ResultObject.PrintableUri);           

RenderBeginTag(p_Writer);

//You can also put a class

p_Writer.AddAttribute("class", "ResultTitle");

p_Writer.RenderBeginTag("p");

p_Writer.AddStyleAttribute("font-size", "15px");

                    p_Writer.AddStyleAttribute("font-weight", "bold");

                    p_Writer.RenderBeginTag("span");

p_Writer.Write(title);               

                    p_Writer.RenderEndTag();

p_Writer.WriteBreak();

//The author will be on italics

p_Writer.RenderBeginTag("i");

p_Writer.Write("Author: ");

p_Writer.Write(author);

p_Writer.RenderEndTag();

p_Writer.RenderEndTag();

RenderEndTag(p_Writer);           

}

 

private string CheckLength(string p_Field)

{

if (p_Field != null)

{

p_Field = p_Field.Trim();

if (p_Field.Length > this.m_Length)

{

p_Field = p_Field.Substring(0, m_Length - 3).Trim() + "...";

}

}

 

return p_Field;

}

Now we add the control we just created and use it in our skin. On the coveo server, open the file: C:\Program Files\Coveo Enterprise Search 6\Web\Coveo\Skins\MySkin\ResultTemplate.ascx

This file contains the html and the user controls for every single search result. Inside this code, we have to add our user control. Register the control with:

<%@ Register TagPrefix="custom" Namespace="MyCustomSkinControls" Assembly="MyCustomSkinControls" %>

 

Next, remove all the existing code and just add:

<custom:MyResultControl id="result" Length="20" runat="server" />

 

Then you need to copy the dll to the website’s bin folder. And now you have changed your search results skin:



Post created by Juan Arias, Oshyn Inc. employee.