# 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

### Methods

- debugInfo
- disable
- enable
- getBindings
- openLink
- openLinkAsConfigured
- openLinkInNewWindow
- openLinkInOutlook
- get

### Properties

- bind
- componentOptionsModel
- componentStateModel
- disabled
- logger
- queryController
- queryStateModel
- root
- searchInterface
- ID

### Accessors

- usageAnalytics

### Component Options

- alwaysOpenInNewWindow
- field
- hrefTemplate
- onClick
- openInOutlook
- openQuickview
- titleTemplate

### Constructors

- constructor

## Methods

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

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

  #### Returns void

### enable

- enable(): void

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  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

- getBindings(): IComponentBindings

- Inherited from Component.getBindings

  - Defined in ui/Base/Component.ts :328

  Return the bindings, or environment, for the current component.

  #### Returns IComponentBindings

### openLink

- openLink(logAnalytics?: boolean): void

- - Defined in ui/ResultLink/ResultLink.ts :301

  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

- - Defined in ui/ResultLink/ResultLink.ts :343

  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

- - Defined in ui/ResultLink/ResultLink.ts :312

  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

- - Defined in ui/ResultLink/ResultLink.ts :327

  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

- Inherited from Component.get

  - Defined in ui/Base/Component.ts :410

  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

bind: ComponentEvents

Inherited from Component.bind

- Defined in ui/Base/Component.ts :270

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

type

  {Coveo.ComponentEvents}

### componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Inherited from Component.componentOptionsModel

- Defined in ui/Base/Component.ts :294

Contains the state of options for different components. Mainly used by ResultLink.

### componentStateModel

componentStateModel: ComponentStateModel

Inherited from Component.componentStateModel

- Defined in ui/Base/Component.ts :282

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

### disabled

disabled: boolean

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

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

type

  {boolean}

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### queryController

queryController: QueryController

Inherited from Component.queryController

- Defined in ui/Base/Component.ts :286

Contains the singleton that allows to trigger queries.

### queryStateModel

queryStateModel: QueryStateModel

Inherited from Component.queryStateModel

- Defined in ui/Base/Component.ts :278

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

Inherited from Component.root

- Defined in ui/Base/Component.ts :274

A reference to the root HTMLElement (the SearchInterface).

### searchInterface

searchInterface: SearchInterface

Inherited from Component.searchInterface

- Defined in ui/Base/Component.ts :290

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

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

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

## Accessors

### usageAnalytics

- get (): IAnalyticsClient

- Inherited from Component.usageAnalytics

  - Defined in ui/Base/Component.ts :343

  A reference to the Analytics.client.

  #### Returns IAnalyticsClient

## Component Options

### alwaysOpenInNewWindow

alwaysOpenInNewWindow: boolean

- Defined in ui/ResultLink/ResultLink.ts :115

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`.

Default

  `false`

Markup configuration example(s) :

    data-always-open-in-new-window='true'
    data-always-open-in-new-window='false'

### field

field: IFieldOption

- Defined in ui/ResultLink/ResultLink.ts :75

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" data-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

- Defined in ui/ResultLink/ResultLink.ts :142

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=${raw.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

- Defined in ui/ResultLink/ResultLink.ts :225

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 Passing Component Options in the init Call), or before the `init` call, using the `options` top-level function (see 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

- - (e: Event, result: IQueryResult): any

  - #### Parameters

    - ##### e: Event

    - ##### result: IQueryResult

    #### Returns any

### openInOutlook

openInOutlook: boolean

- Defined in ui/ResultLink/ResultLink.ts :88

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`.

Default

  `false`

Markup configuration example(s) :

    data-open-in-outlook='true'
    data-open-in-outlook='false'

### openQuickview

openQuickview: boolean

- Defined in ui/ResultLink/ResultLink.ts :96

Specifies whether the component should open its link in the `Quickview` component rather than loading through the original URL.

Default value is `false`.

Default

  `false`

Markup configuration example(s) :

    data-open-quickview='true'
    data-open-quickview='false'

### titleTemplate

titleTemplate: string

- Defined in ui/ResultLink/ResultLink.ts :183

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`.

Available since

  January 2017 Release (v1.1865.9)

Markup configuration example(s) :

    data-title-template='foo'

## Constructors

### constructor

- new ResultLink(element: HTMLElement, options: IResultLinkOptions, bindings?: IResultsComponentBindings, result?: IQueryResult, os?: OS_NAME): ResultLink

- Overwrites Component.constructor

  - Defined in ui/ResultLink/ResultLink.ts :230

  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