Support Menu

Coveo component ResultLink

Coveo ResultLink Component (CoveoResultLink)

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

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

Index

Component Options

alwaysOpenInNewWindow

alwaysOpenInNewWindow: boolean

Specifies whether the component should open its link in a new window instead of opening it in the current context.

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

Note:

If a search page contains a ResultPreferences component whose enableOpenInNewWindow option is true, and the end user checks the Always open results in new window box, ResultLink components in this page will always open their links in a new window when the end 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 to use to output the component href attribute value.

Tip:

Instead of specifying a value for the field option, you can directly add an href attribute to the ResultLink HTML element. Then, you can use a custom script to generate the href value.

Examples:

  • With the following markup, the ResultLink outputs its href value using the @uri field (rather than the default field):
<a class="CoveoResultLink" field="@uri"></a>
  • In the following result template, the custom getMyKBUri() function provides the href value:
<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.

By default, the component uses the @clickUri field of the item to output the value of its href attribute.

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

hrefTemplate

hrefTemplate: string

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

This option overrides the field option value.

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

Examples:

  • The following markup generates an href value such as http://uri.com?id=itemTitle:
<a class='CoveoResultLink' data-href-template='${clickUri}?id=${title}'></a>
  • The following markup generates an href value such as localhost/fooBar:
<a class='CoveoResultLink' data-href-template='${window.location.hostname}/{Foo.Bar}'></a>

Default value is undefined.

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.

Note:

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).

Example:




// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
  ResultLink : {
    onClick : function(e, result) {
      e.preventDefault();
      // Custom code to execute with the item URI and title.
      openUriInASpecialTab(result.clickUri, result.title);
    }
  }
});

// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector('#search'), {
//   ResultLink : {
//     onClick : function(e, result) {
//       e.preventDefault();
//       // Custom code to execute with the item URI and title.
//       openUriInASpecialTab(result.clickUri, result.title);
//     }
//   }
// });

Type declaration

openInOutlook

openInOutlook: boolean

Specifies whether the component should try to open its link in Microsoft Outlook.

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

If this option is true, clicking the ResultLink calls the openLinkInOutlook method instead of the 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 component should open its link 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, the ResultLink title displays the name of this key instead.

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

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>

Default value is undefined.

Markup configuration example(s) :
data-title-template='foo'

Static options

options: object

The options for the ResultLink

componentoptions

alwaysOpenInNewWindow

alwaysOpenInNewWindow: boolean

Specifies whether the component should open its link in a new window instead of opening it in the current context.

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

Note:

If a search page contains a ResultPreferences component whose enableOpenInNewWindow option is true, and the end user checks the Always open results in new window box, ResultLink components in this page will always open their links in a new window when the end 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 to use to output the component href attribute value.

Tip:

Instead of specifying a value for the field option, you can directly add an href attribute to the ResultLink HTML element. Then, you can use a custom script to generate the href value.

Examples:

  • With the following markup, the ResultLink outputs its href value using the @uri field (rather than the default field):
<a class="CoveoResultLink" field="@uri"></a>
  • In the following result template, the custom getMyKBUri() function provides the href value:
<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.

By default, the component uses the @clickUri field of the item to output the value of its href attribute.

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

hrefTemplate

hrefTemplate: string

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

This option overrides the field option value.

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

Examples:

  • The following markup generates an href value such as http://uri.com?id=itemTitle:
<a class='CoveoResultLink' data-href-template='${clickUri}?id=${title}'></a>
  • The following markup generates an href value such as localhost/fooBar:
<a class='CoveoResultLink' data-href-template='${window.location.hostname}/{Foo.Bar}'></a>

Default value is undefined.

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.

Note:

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).

Example:




// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
  ResultLink : {
    onClick : function(e, result) {
      e.preventDefault();
      // Custom code to execute with the item URI and title.
      openUriInASpecialTab(result.clickUri, result.title);
    }
  }
});

// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector('#search'), {
//   ResultLink : {
//     onClick : function(e, result) {
//       e.preventDefault();
//       // Custom code to execute with the item URI and title.
//       openUriInASpecialTab(result.clickUri, result.title);
//     }
//   }
// });

Type declaration

openInOutlook

openInOutlook: boolean

Specifies whether the component should try to open its link in Microsoft Outlook.

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

If this option is true, clicking the ResultLink calls the openLinkInOutlook method instead of the 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 component should open its link 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, the ResultLink title displays the name of this key instead.

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

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>

Default value is undefined.

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

      Specifies whether the method should log an analytics event.

    Returns void

openLinkAsConfigured

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

    This essentially simulates a click on the result link.

    Parameters

    • Default value logAnalytics: boolean = true

      Specifies whether the method should log an analytics 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

      Specifies whether the method should log an analytics event.

    Returns void

openLinkInOutlook

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

    Normally, this implies the result should be a link to an email.

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

    Parameters

    • Default value logAnalytics: boolean = true

      Specifies whether the method should log an analytics 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

Hierarchy