How To Customize Coveo Atomic's Result List

With a functioning Atomic search page setup and running, it's time to do some customizations. After all, we know from using Coveo for Sitecore and the Coveo JSUI that both are simple to customize the design of the result list to better showcase the information being returned.

Tags

atomic-result-list

The atomic-result-list component, as shown below, is the primary component for displaying results from a search query. Through it we are able to customize those results according to templates in one-or-more ways.

<atomic-result-list fields-to-include="title, description, author, date, source, genre, poster, rating, price""></atomic-result-list>

There is only one attribute for the atomic-result-list and that is fields-to-include. By specifying values here, we're able to tell Coveo which fields to bring back as part of the search query.

atomic-result-template

Inside of the atomic-result-list component we can specify one-or-more atomic-result-template components. We tell Coveo which template to use by use of a condition. There are two condition methods. mustMatch and mustNotMatch. Let's walk through an example by implementing three templates in the atomic-result-list we setup prior.

<atomic-result-list fields-to-include="title, description, author, date, source, genre, poster, rating, price">
    <atomic-result-template must-match-source="books">
        <template></template>
    </atomic-result-template>
    <atomic-result-template must-match-source="movies" must-not-match-genre="western">
        <template></template>
    </atomic-result-template>
</atomic-result-list>

As you can see, you can by utilizing both conditions be as specific or generic as desired.

Building a Result Template

In order to display text and/or field values within the result template we have more than a few options. It really depends on what the type of the value is and how it will be used.

• atomic-text
• atomic-result-text
• atomic-result-date
• atomic-result-icon
• atomic-result-image
• atomic-result-link
• atomic-result-number
• atomic-result-price
• atomic-result-value

atomic-text

This is the simplest way of displaying a text string within a result while leveraging the I18n translation module. For example, a field label. It's handy for when you need a search page that has multilingual results

<atomic-text value="Source"></atomic-text>

atomic-result-text

This is the simplest way of displaying a value within a result. For example, a field label.

<atomic-result-text field="source" shouldHighlight="true"></atomic-text>

This will display the value of the field, source. So in the case of our example this value may be books. If we utilize the optional attribute, shouldHighlight we can tell Coveo to highlight search terms found within the result field.

atomic-result-date

For fields that are in a date/time format, we can very simply format them accordingly compared to previous attemps in JSUI or Coveo for Sitecore. Using the field attribute we specify which field we want to display. And using the format attribute we specify the format of it.

<atomic-result-date field="datepublished" format="MMM/YYYY"></atomic-result-date>

atomic-result-icon

Handy to display the field type, e.g. doc, pdf, etc. If the value doesn't exist, a custom icon will be displayed

<atomic-result-icon icon="pdf"></atomic-result-icon>

atomic-result-image

As you might guess, this will display an image if the field is an image. It will depend how the data is stored in the field in Coveo obviously. Typically we may store the URL to an image as a string and thus might use a handlebars approach allowing us to add classes and other attributes as needed (see Further Customization).

<atomic-result-image field="poster"></atomic-result-image>

atomic-result-link

Will create a link to the result. The target attribute can be used just just as it would as a normal link to determine how to process it in the browser.

<atomic-result-link target="_blank"></atomic-result-link>

atomic-result-number

In order to display a simple number, with specific formatting, we can utilize atomic-result-number which has a number of options depending on the type of number.

<atomic-result-number field="rating" maximum-fraction-digits=2 maximum-significant-digits=3></atomic-result-number>

atomic-result-price

If you guessed this is used to display a value as a price, you're on the ball. The benefit here is it can understand the various currency styling.

 <atomic-result-price field="price" currency="USD"></atomic-result-price>

atomic-result-value

In order to display a field's value, regardless of type, we can utilize atomic-result-value.

<atomic-result-value field="source"></atomic-result-value>

Conditional Formatting

We can ensure we only display content if it exists, by utilizing atomic-field-condition and then using the ifDefined condition. As such, in our example below, anything within this tag will be displayed if the title field is defined.

<atomic-field-condition if-defined="title" >
    <atomic-result-text field="title"></atomic-result-text>
</atomic-field-condition>

Further Customization

You're not restricted to utilizing the tags above in order to render a result. You can use a handlebar style template to display the appropriate field. Other HTML is perfectly acceptable as well when formatting, e.g. div, ul li, etc.

<a href="{{clickUri}}">{{title}}</a>

Full Example

Now that we understand our options, we might build something like this as our result template.

<atomic-result-template must-match-source="movies">
    <template>
    <div><atomic-result-text field="title"></atomic-result-text></div>   
    <atomic-field-condition if-defined="description" >
        <div><atomic-result-text field="description"></atomic-result-text></div> 
    </atomic-field-condition> 
    <div><atomic-result-number field="rating" maximum-fraction-digits=2 maximum-significant-digits=3></atomic-result-number></div> 
    </template>
</atomic-result-template>

CSS Supported

You can obviously style your results using CSS as needed. My suggestion is to first get all of your result values to display as you require. At that point you can, in combination with a browser inspect mode you can more quickly style those values accordingly.

Due to the tag names and hierarchy being different, the CSS is slightly different than what you may have used in JSUI.