Support Menu

Coveo component ResultLink

The ResultLink component automatically transform a search result title into a clickable link pointing to the original document.

This component is a result template component (see Result Templates).

Index

Component Options

alwaysOpenInNewWindow

alwaysOpenInNewWindow: boolean

Specifies whether the ResultLink should open in a new window instead of opening in the current context.

If this option is true, clicking the ResultLink will call the ResultLink.openLinkInNewWindow method instead of the ResultLink.openLink method.

Note:

If a search page contains a ResultsPreferences component whose enableOpenInNewWindow option is true, and the end user checks the Always open results in new window box, then ResultLink components will always open in a new window when the user clicks them, no matter what the value of their alwaysOpenInNewWindow option is.

Default value is false.

Markup configuration example(s) :
data-always-open-in-new-window='true'
data-always-open-in-new-window='false'

field

Specifies the field which the ResultLink should use to output its href attribute.

By default, the component uses the clickUri field available on the document, but you can override this field by specifying a value for this option.

Tip:

When you do not include a field option in your result template, you can include an href attribute on the ResultLink element. When present, the href attribute value overrides the clickUri field, which is otherwise the default field.

Specifying an href attribute is useful when you want to build the ResultLink using a custom script or by concatenating the content of two or more variables.

Examples:

  • With the following markup, the ResultLink will output its href attribute using the uri field instead of the default clickUri field:
<a class="CoveoResultLink" field="@uri"></a>
  • In the following result template, the custom getMyKBUri() function will provide the href:
<script id="KnowledgeArticle" type="text/underscore" class="result-template">
  <div class='CoveoIcon>'></div>
  <a class="CoveoResultLink" href="<%= getMyKBUri(raw) %>"></a>
  <div class="CoveoExcerpt"></div>
</script>

See also hrefTemplate, which can override this option.

Markup configuration example(s) :
data-field='@foo'

hrefTemplate

hrefTemplate: string

Specifies a template literal from which to generate the ResultLink href attribute (see Template literals).

This option overrides the value of the field option.

The template literal can reference any number of fields from the parent result. It can also reference global scope properties.

Default value is undefined.

Examples:

  • The following markup generates a ResultLink href such as http://uri.com?id=documentTitle:
<a class='CoveoResultLink' data-href-template='${clickUri}?id=${title}'></a>
  • The following markup generates a ResultLink href such as localhost/fooBar:
<a class='CoveoResultLink' data-href-template='${window.location.hostname}/{Foo.Bar}'></a>
Markup configuration example(s) :
data-href-template='foo'

onClick

onClick: function

Specifies an event handler function to execute when the user clicks the ResultLink component.

The handler function takes a JavaScript Event object and an IQueryResult as its parameters.

Overriding the default behavior of the onClick event can allow you to execute specific code instead.

You can only set this option in the init call of your search interface. You cannot set it directly in the markup as an HTML attribute.

Examples:

  • In the following code excerpt, the ResultLink opens the original document in a custom way instead of using the normal browser behavior:
Coveo.init(document.querySelector('#search'), {
  ResultLink : {
    onClick : function(e, result) {
      e.preventDefault();
      // Custom code to execute with the URI and title of the document.
      openUriInASpecialTab(result.clickUri, result.title);
    }
  }
});
  • You can achieve the same result using the jQuery extension:
$("#search").coveo('init', {
  ResultLink : {
    onClick : function(e, result) {
      e.preventDefault();
      // Custom code to execute with the URI and title of the document.
      openUriInASpecialTab(result.clickUri, result.title);
    }
  }
});

Type declaration

openInOutlook

openInOutlook: boolean

Specifies whether the ResultLink should try to open in Microsoft Outlook.

Setting this option to true is normally useful for ResultLink instances which are related to Microsoft Exchange emails.

If this option is true, clicking the ResultLink will call the ResultLink.openLinkInOutlook method instead of the ResultLink.openLink method.

Default value is false.

Markup configuration example(s) :
data-open-in-outlook='true'
data-open-in-outlook='false'

openQuickview

openQuickview: boolean

Specifies whether the ResultLink should open in the Quickview component rather than loading through the original URL.

Default value is false.

Markup configuration example(s) :
data-open-quickview='true'
data-open-quickview='false'

titleTemplate

titleTemplate: string

Specifies a template literal from which to generate the ResultLink display title (see Template literals).

This option overrides the default ResultLink display title behavior.

The template literal can reference any number of fields from the parent result. However, if the template literal references a key whose value is undefined in the parent result fields, then the ResultLink title displays the name of this key instead.

This option is ignored if the ResultLink innerHTML contains any value.

Default value is undefined.

Examples:

  • The following markup generates a ResultLink display title such as Case number: 123456 if both the raw.objecttype and raw.objectnumber keys are defined in the parent result fields:
<a class="CoveoResultLink" data-title-template="${raw.objecttype} number: ${raw.objectnumber}"></a>
  • The following markup generates ${myField} as a ResultLink display title if the myField key is undefined in the parent result fields:
<a class="CoveoResultLink" data-title-template="${myField}"></a>
  • The following markup generates Foobar as a ResultLink display title, because the ResultLink innterHTML is not empty:
<a class="CoveoResultLink" data-title-template="${will} ${be} ${ignored}">Foobar</a>
Markup configuration example(s) :
data-title-template='foo'

Methods

debugInfo

  • debugInfo(): any

disable

  • disable(): void
  • Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Component are enabled by default on creation.

    Returns void

enable

  • enable(): void
  • Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

    Returns void

getBindings

openLink

  • openLink(logAnalytics?: boolean): void
  • Opens the result in the same window, no matter how the actual component is configured for the end user.

    Parameters

    • Default value logAnalytics: boolean = true

      If true, the method will take care of logging an analytic event.

    Returns void

openLinkAsConfigured

  • openLinkAsConfigured(logAnalytics?: boolean): void
  • Open the link in the same manner the end user would do.

    This essentially simulate a click on the result link.

    Parameters

    • Default value logAnalytics: boolean = true

      If true, the method will take care of logging an analytic event.

    Returns void

openLinkInNewWindow

  • openLinkInNewWindow(logAnalytics?: boolean): void
  • Opens the result in a new window, no matter how the actual component is configured for the end user.

    Parameters

    • Default value logAnalytics: boolean = true

      If true, the method will take care of logging an analytic event.

    Returns void

openLinkInOutlook

  • openLinkInOutlook(logAnalytics?: boolean): void
  • Try to open the result in Microsoft Outlook if the result has an outlookformacuri or outlookuri field.

    Normally, this means a result link for an email.

    If the needed fields are not present, this method will do nothing.

    Parameters

    • Default value logAnalytics: boolean = true

      If true, the method will take care of logging an analytic event.

    Returns void

Static get

  • get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent
  • Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
    If there is multiple component bound to the current HTMLElement, you must specify the component class.

    Parameters

    • element: HTMLElement

      HTMLElement for which to get the bound component.

    • Optional componentClass: any

      Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

    • Optional noThrow: boolean

      Boolean option to tell the method to not throw on error.

    Returns BaseComponent

Properties

bind

Allows the component to bind events and execute them only when it is enabled.

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Contains the state of options for differents component. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

Contains the state of different component (enabled vs disabled). Allows to get/set values. Trigger component state event when modified. Each component can listen to those events.

disabled

disabled: boolean

A disabled component will not participate in the query, or listen to ComponentEvents.

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

queryStateModel: QueryStateModel

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.

root

root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

A reference to the root of every component, the SearchInterface.

usageAnalytics

usageAnalytics: IAnalyticsClient

A reference to the Analytics.client.

Static ID

ID: string

The static ID that each component need to be identified.
For example, SearchButton -> static ID : SearchButton -> className : CoveoSearchButton

Constructors

constructor

  • Creates a new ResultLink component.

    Parameters

    • element: HTMLElement

      The HTMLElement on which to instantiate the component.

    • options: IResultLinkOptions

      The options for the ResultLink component.

    • Optional bindings: IResultsComponentBindings

      The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

    • Optional result: IQueryResult

      The result to associate the component with.

    • Optional os: OS_NAME

    Returns ResultLink