Ralph Spandl talks us through customising the look of search results with Kentico 4.1 and the user-friendly smart search.

The smart search is one of the great new features introduced in Kentico 4.1. While I have covered the basic functionalities in a recent blog post, and the setup of the search module is very well covered by the Kentico documentation, let’s take a look into the possibilities of customizing the look of the search results.

How much control do you have?

Without considering the search form, there are two parts that can be customised - the search results and a new pager model that I have noticed for the first time in this form. The exact same pager is also available as a separate web part, called “Universal Pager”. So if you customise this pager once, you can use it all over your site.

The search results

The main features of the user-friendly search results are highlighted keywords in search results, the possibility to display additional information, formatted dates and a relevancy bar.

If you have a look at the smart search transformation, you will notice a couple of new functions:

• SearchHighlight allows you to highlight the searched keywords in a string. With this function the user can quickly see in which context the keyword was found in the search result.
• TextHelper.LimitLength (which was probably already available before version 4.1) allows you to limit the text length of the returned result text. 
• HTMLHelper.StripTags  eliminates all HTML tags from a string to better control their display.

If you combine these three functions together, you end up with this nested expression that returns the first 280 characters of search result and adds a span tag with a CSS class around the searched keywords (see point 1):

<%# SearchHighlight(HTMLHelper.HTMLEncode(TextHelper.LimitLength(HttpUtility.HtmlDecode(HTMLHelper.StripTags(GetSearchedContent(DataHelper.GetNotEmpty(Eval(“Content”), “”)), false, “ “)), 280, “...”)),”<span class=\”search-hilite-back\”>”,”</span>”) %>

This function ships with the standard transformation. Now you can adapt it to your own needs. In my example I am using it to also display the page title of the document instead of the URL path (point 2). If the page title should be empty (very rare case), I replace it with r42 communication, or anything else.

<b><a href=”<%# SearchResultUrl(true) %>”><%# SearchHighlight(HTMLHelper.HTMLEncode(DataHelper.GetNotEmpty(Eval(“Title”), “r42 communication”)),”<span class=\”search-hilite\”>”,”</span>”) %></a></b>

Somehow the engine does not return every time a text result, for this reason, I always display the content of the page’s Meta description tag. For this to work, you can use the GetSearchValue function. Of course, always check, if there is any content to be displayed (see point 3).

<%# IfEmpty(GetSearchValue(“DocumentPageDescription”), “”, “<b>” + CMS.GlobalHelper.ResHelper.GetString(“r42.aboutthisdocument”) + “:</b> “ + GetSearchValue(“DocumentPageDescription”)) %>

If you want to format the date/time format, make sure you do not use this function:

<%# GetDateTime(“Created”, “D”) %>

According to the Kentico support team, the ‘Created’ field is not standard date time field - it’s field from ‘Lucene.NET’ so it need to be handled in slightly different way than standard date time fields from Kentico CMS.

The solution, however is easy enough:

<%# FormatDateTime(Eval(“Created”), “D”) %> does exactly what we want. The advantage of using this method to write dates, is that it will be automatically localized (see point 4).

The relevance bar is available in the standard transformation. I only extracted some style definitions and stored them into my style sheet (see point 5).

The pager

The new pager might go unnoticed. The pager that ships with the standard version is quite grumpy and not very user-friendly, because the numbers are very close together.

What can be done with the new pager model? I would say everything you can think of! At the moment I don’t see a case that can’t be built with this web part. Let’s look at the pager I built for this tutorial:

1. Results currently shown and total results found
2. Results currently shown and total results found
3. Current page
4. Other pages
5. Next page group
6. Last page
7. Previous button (here disabled because it is the first record)
8. Next button
9. First page/previous page group, in the case the user has advanced to the next page group.
10. First page/previous page group, in the case the user has advanced to the next page group.
11. Now next and previous buttons are links.

This layout is possible because the new pager is very modular. Each of the elements shown above has their own (!) transformation. These transformations can then be organized in the layout transformation.

I have made the source code available in the Kentico Marketplace. I only had to make a few changes to the single transformations. The bulk of the changes are applied to the layout and of course the style sheet. Keeping the transformation as simple as possible also means that you can style the footer in many different ways, while using the same transformations.

Conditional Transformation

I only want to have a quick look into the transformation of the previous and next button because it applies a technique recently discussed by Matthew Lee, the conditional transformation.

To make sure, the next button is not shown on the last page, I compare the value of “LastonPage” with the total number of items shown. If there is a match, I do not display a link, but only a box. All the rest is done via style sheets.

<%# Convert.ToInt32(Eval(“LastonPage”))== Convert.ToInt32(Eval(“Items”))? “<span class=\”next\”>&nbsp;</span>”:”<a href=\”” + Eval(“NextURL”) + “\” class=\”next\”> </a>” %>

Same applies to the previous button, here we have to make sure that FirstonPage does not equal 1.

<%# Convert.ToInt32(Eval(“FirstonPage”))== 1? “<span class=\”prev\”>&nbsp;</span>”:”<a href=\”” + Eval(“PreviousURL”) + “\” class=\”prev\”>&nbsp;</a>” %>

Download the code

All of the code discussed here is available for download from the Kentico Marketplace.

Download the code

Leave comment Subscribe Name: E-mail: Your URL: Comments: Subscribe me to this blog post Enter security code: Subscribe Leave comment Your e-mail: