Skip to end of metadata
Go to start of metadata
In this topic:

 

 

The Coveo JavaScript Search Framework provides several helper functions that you can use within companyDomain: The string that contains your own domain (e.g., co templates to render information such as field values, etc.

 

Note:

Template helpers are invoked differently depending on the template engine that you use. In this topic, the samples use the Underscore template engine.

All these helpers are accessible through the context object in the result template.

javascriptEncode

<%=javascriptEncode(value:string)%>

Encodes a string value so that it can be injected within a JavaScript string.

value: The value to encode.

Injecting field values inside JavaScript

shorten

<%=shorten(value:string, length:number, highlights?:Highlight[], cssClass?:string = 'highlight')%>

Shortens a string so that its length does not exceed a specific number of characters. An ellipsis is appended to the string if it exceeds the maximum length.

value: The string to shorten.

length: The maximum length of the resulting string.

highlights: Optional. If provided, the string will be highlighted using this highlight information.

cssClass: Optional. When highlighting, the name of the CSS class to use.

Shortening the title of a result with highlighting

shortenPath

<%=shortenPath(value:string, length:number, highlights?:Highlight[], cssClass?:string = 'highlight')%>

Shortens a string using an algorithm suitable for file paths. The helper will insert an ellipsis in the string where text has been removed when the path exceeds the maximum length.

value: The path to shorten.

length: The maximum length of the resulting string.

highlights: Optional. If provided, the string will be highlighted using this highlight information.

cssClass: Optional. When highlighting, the name of the CSS class to use.

Shortening a path value

shortenUri

<%=shortenUri(value:string, length:number, highlights?:Highlight[], cssClass?:string = 'highlight')%>

Shortens a string using an algorithm suitable for URIs. The helper will insert an ellipsis in the string where text has been removed when the URI exceeds the maximum length.

value: The URI to shorten.

length: The maximum length of the resulting string.

highlights: Optional. If provided, the string will be highlighted using this highlight information.

cssClass: Optional. When highlighting, the name of the CSS class to use.

Shortening the uri of a result with highlighting

highlight

<%=highlight(value:string, highlights:[], cssClass?:string = 'highlight')%>

Highlights a string using the provided highlight information.

highlights: The highlight information to use.

cssClass: Optional. The name of the CSS class to use for highlighting.

Rendering the excerpt of a result with highlighting

highlightStreamText

<%= highlightStreamText(stream:string, termsToHighlight?:{[originalTerm:string]:string[]}, phrasesToHighlight?:{[phrase: string]:string[]}, options?:{}) %>

stream The string content to highlight

termsToHighlight Terms to highlight

phraseToHighlight Phrases to highlight

options Options defined below as StreamHighlightOptions

 

This helper highlights the provided terms in a given string.
By default, the terms to highlight are the current query and the associated stemming words from the index.

The option parameters accept an object with the following properties:

Icon

Normally, the terms and phrases to highlight will be automatically resolved for you and returned by the REST api on each query, so you don't need to provide those parameters manually.

If you wish to pass other terms, make sure it follows the correct format.


Example for the termsToHighlight parameter : 


Example for the phrasesToHighlight parameter : 



Usage examples:

highlightStreamHTML

<%= highlightStreamHTML(stream: string, termsToHighlight?: {[originalTerm:string]: string[]}, phrasesToHighlight?: {[phrase: string]: {[originalTerm: string]: string[]}}, options?:{}) %>

stream The string content to highlight

termsToHighlight Terms to highlight

phraseToHighlight Phrases to highlight

options Options defined above as StreamHighlightOptions

 

This helper operates exactly like the highlightStreamText helper, except that it should be used to highlight HTML content. The helper takes care of not highlighting the HTML markup. 

number

<%=number(value:string, format:string)%>

Formats a numeric value using the format string.

value: The numeric value to format.

format: The format string to use. The options available are defined by the Globalize library (see Globalize).

Formatting a numeric field value.

date

<%=date(value:Date, options?:DateToStringOptions)%>

Formats a date value to a date-only string using the specified options.

value: The Date value to format.

options: The options to use (see DateToStringOptions).

Rendering a date field value

time

<%=time(value:Date, options?:DateToStringOptions)%>

Formats a date value to a time-only string using the specified options.

value: The Date value to format.

options: The options to use (see DateToStringOptions).

Rendering a time field value

dateTime

<%=dateTime(value:Date, options?:DateToStringOptions)%>

Formats a date value to a date and time string using the specified options.

value: The Date value to format.

options: The options to use (see DateToStringOptions).

Rendering a datetime field value

currency

<%=currency(value:number, options?:CurrencyToStringOptions)%>

Formats a currency value to a string using the specified options.

value: The number value to format.

options: The options to use (see CurrencyToStringOptions).

Rendering a currency field value

emailDateTime

<%=emailDateTime(value:Date, options?:DateToStringOptions)%>

Formats an email date value to a date and time string using options suitable for email dates.

value: The Date value to format.

options: The options to use (see DateToStringOptions).

Rendering an email datetime field value

email

<%=email(value:string, companyDomain:string, me:string, lengthLimit:number = 2, truncateName:boolean = false)%>

Renders one or several email values in mailto: hyperlinks.

value: The string that contains a list of semicolon-separated email values. When multiple values are passed, each value is displayed in a separate hyperlink.

companyDomain: The string that contains your own domain (e.g., coveo.com). When specified, this parameter allows email addresses coming from your own domain to be displayed in a shortened format (e.g., Full Name), whereas email addresses coming from an external domain will be displayed in an extended format (e.g., Full Name (domain.com)). If this parameter is not specified, then the shortened format will automatically be used.

me: The string that contains the current username. If it is specified, then the email address containing the current username will be replaced by the localized string "Me".

lengthLimit: The number of email addresses that you want to display before an ellipse is added (e.g., 'From Joe, John and 5 others'). The default value is 2.

truncateName: When the username is available from the email address, then you can specify if you want to truncate the full name. (e.g., 'John S.' instead of 'John Smith'). The default value is false.

Rendering a list of emails

anchor

<%=anchor(href:String, options?:AnchorUtilsOptions)%>

Formats a clickable HTML link (<a />).

href: The link URI.

options: The options to use (see AnchorUtilsOptions).

Rendering an html link (anchor)

image

<%=image(src:string, options?:ImageUtilsOptions)%>

Formats an HTML image tag (<img />).

src: The image source URI.

options: The options to use (see ImageUtilsOptions).

Rendering an html image tag

thumbnail

<%=thumbnail(result?: Coveo.QueryResult, endpoint?:string, options?:ImageUtilsOptions)%>

Formats an HTML image tag (<img />), and automatically uses the result object to query the REST API to get the thumbnail for this result. For example, this can be used to great effect when designing a template showing users or preview of files.

result: The current result object inside your template. In underscore, it is referenced as obj. Optional, by default the result will be resolved automatically from your current template function ( Meaning the nearest result in the current call stack execution inside your template)

endpoint: The name of the endpoint to use for your thumbnail. Optional. Default is default.

options: The options to use (see ImageUtilsOptions).

Rendering an html image tag

fromFileTypeToIcon

<%= fromFileTypeToIcon(result?: Coveo.QueryResult, options?:FiletypeiconsUtilsOptions) %>

As its name implies, this helper will generate an icon based on the file type of the current result. The icon will be contained inside a <span></span> with the appropriate css class.
For example, a PDF file would generate this icon().
A text file would instead generate this icon ()

result: The current result object inside your template. In underscore, it is referenced as obj.  Optional, by default the result will be resolved automatically from your current template function ( Meaning the nearest result in the current call stack execution inside your template)

options: The options to use (see FiletypeUtilsOptions).

Rendering an icon for a filetype

loadTemplate

<%= loadTemplate(templateId : string , condition ? : boolean , contextObject ? : any %>

Loads a partial template in the current template, by passing the ID of the template to load, the condition for which this template should be loaded, and the context object (the object that the loaded template will use as its data). By default, the context object will be the same as the template that called this helper function. So, for example, in a ResultList Component, the contextObject would, by default, be the Query Results.

templateId: the ID of the template to load.

condition: The boolean condition to determine if this template should load for this result set. Most of the time this would be a condition of the type if raw.somefield == "something".

contextObject: The object that should be used by the loaded template as its contextObject.

Modifying the HTML result template example

 

<div class="coveo-result-cell" style="font-size:14px">
<a class="CoveoResultLink" style="font-weight:bold" data-open-quickview="true" data-field="@customid"></a>
<span class="CoveoQuickView" data-template-id="MyTemplateId" data-title="My Template Description"></span>
<table class="CoveoFieldTable" data-use-json-template-fields="true">
<tbody>


<tr data-field="@customDate" data-caption="Custom Date" data-helper="dateTime" data-helper-options='{omitYearIfCurrentOne: false}'></tr> //We added the data-helper and data-helper-options attributes to customize the display date


<tr data-caption="Custom Name" data-field="@CustomName"></tr>
<tr data-caption="Custom Description" data-field="@CustomDescription"></tr>
<tr data-caption="Custom Other" data-field="@CustomOther"></tr>
</tbody>
</table>
</div>

  • No labels