Customise a search result

Home Implementation Search Interface Search Result

Managed by | Updated 5 years ago.

Prerequisites

Collection has been crawled.
Understanding of the Freemarker Templating Language.
Understanding of the Funnelback data model.

Objective

Customise a search result to include a result's selected attributes and metadata.

Short Introduction to the Data Model & Freemarker Templating

Result Marco

Search results are templated according to the code that appears within the <@s.Results> block of code. This is located within the simple.ftl.

<@s.Results>
<#if s.result.class.simpleName != "TierBar">
CODE FOR EACH RESULT
</#if>
</@s.Results>

Result data model

To view the data model go to the s/search.json endpoint. To see the data model for a result go to response.resultpacket.results . Funnelback includes a custom Freemarker marco that caches the current result within the data model to the varaible s.result .

Basic results item variables available:

s.result.title – the result title
s.result.summary> – the result summary
s.result.liveUrl> – the URL of the target document
s.result.clickTrackingUrl> – the URL to use for link actions to make use of Funnelback’s click tracking feature.
s.result.metaData> – map of metadata elements available for use in templates. This will only display metadata fields that have been configured to be returned with the search results.

Printing varaibles

To print out any of these values wrap them in the Freemarker directive span class="code">${VARIABLENAME}. For example ${s.result.title} will be replaced with the title text for the current result.

Before accessing any variable ensure that the variable being printed is defined.

This can be achieved by wrapping the variable in an <#if> statement

<#if s.result.title?exists>${s.result.title}<#else>No title</#if>

or for cases where you are printing variable without surrounding markup an exclamation mark (!) can be used e.g

${VARIABLENAME!}
${s.result.title} <!--  template errors if variable is not defined.-->
${s.result.title!}<!-- prints variable if set otherwise nothing -->
${s.result.title!"Empty"}<!-- prints variable if set otherwise prints Empty or any string you define. -->

Steps

1. Create a Result Template File & Macro

Load the Funnelback administration interface and select the the collection (search interface) you would like to customise.
Open the file manager.
1. Select Administer tab > Browse Collection Configuration Files
Create a new result.ftl file.
1. Under Presenation (preview) section select custom.ftl in the file creater drop down and select create. This action will create the custom.ftl and open it file ready for editing. Edit the file name to be <result.ftl.
2. Copy and paste the following code into the file.
```
<#ftl encoding="utf-8" />

<#escape x as x?html>

<#-- New result format -->
<#macro Book>
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>
</#macro>

</#escape>
```
  Note at this stage we have provided only static html and no result variables, so we will see the same title for every result 'Media Heading'.
3. Click Save and publish.

2. Import Result Template into Simple.ftl

Under Presenation (preview) section select simple.ftl for editing.
This is the main search template file which handles the display of the entire search interface.
At the top of the file add this line after the existing imports.
```
<#import "result.ftl" as Result/>
```
. This imports our new template libaray into the current file..
Locate the results block (the code between <<@s.Results> and </@s.Results>.
Tip: To quick find the result block click within the file edit and press Ctrl(control)+f or mac ⌘(command)+f and search for s.Result.
Delete all the code within <li data-fb-result=${s.result.indexUrl}> and replace with the following code.
```
<@Result.Book />
```
This code calls our Result marco we created within result.ftl previously.
Click Save and publish.
Open the search page result and see how the result view has now changed.

3. Customise the search result

Under Presenation (preview) section select result.ftl for editing.

Replace the code within the book marco with the following.

<div class="media">
 <#if s.result.metaData.I??>
 <div class="pull-left">
  <a href="${s.result.clickTrackingUrl}">
   <img class="media-object" src="${s.result.metaData.I!}" alt="${s.result.title}" style="width:120px;">
  </a>
 </div>
 </#if>
 <div class="media-body">
  <h4 class="media-heading" style="margin-top:0">
   <a href="${s.result.clickTrackingUrl}" title="${s.result.liveUrl}">
    <@s.boldicize><@s.Truncate length=70>${s.result.metaData.T!}</@s.Truncate></@s.boldicize>
   </a>
  </h4>

  <#if s.result.metaData["c"]??><p><@s.boldicize>${s.result.metaData["c"]!}</@s.boldicize></p></#if>

  <dl>
   <#if s.result.metaData.P??>
   <dt>Price</dt>
   <dd>${s.result.metaData.P!}</dd>
   </#if>

   <#if s.result.metaData.a??>
   <dt>Author</dt>
   <dd>${s.result.metaData.a!}</dd>
   </#if>

   <#if s.result.metaData.D??>
   <dt>Year Published</dt>
   <dd>${s.result.metaData.D!}</dd>
   </#if>

   <#if s.result.metaData.q??>
   <dt>Publisher</dt>
   <dd>${s.result.metaData.q!}</dd>
   </#if>

   <#if s.result.metaData.n??>
   <dt>ISBN</dt>
   <dd>${s.result.metaData.n!}</dd>
   </#if>

  </dl>

 </div>

</div>

This code will update the result format to include the Result variables.