Adding JavaScript to the Coveo for Salesforce Lightning Components With Custom Code

Coveo for Salesforce 2.41 (May 2017)

To learn how to interact with the Coveo JavaScript Search Framework with editions of Coveo for Salesforce prior to the May 2017 release (2.40 and earlier), see Adding JavaScript to the Coveo for Salesforce Lightning Components With Custom Code - Deprecated.

During your implementation of Coveo™ for Salesforce, it is common you will need to interact with the Coveo™ JavaScript Search Framework (see JavaScript Search Framework Home).

Create a static resource file in Salesforce to add your custom code (see Creating a Static Resource), and then reference the resource in a custom Lightning component which integrates the Coveo components (see Integrating the Coveo Components in a Custom Lightning Component).

Step 1 - Create a Custom Lightning Component

To add a custom script, you should create a custom component that looks like this:

Create a Custom Lightning Component

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="name" type="String" default="communityCoveo" access="global" />
    <aura:attribute name="searchHub" type="String" default="" access="global" />
    <CoveoV2:SearchUI aura:id="searchui" name="{!v.name}" searchHub="{!v.searchHub}" />
</aura:component>>

Coveo for Salesforce 3.16 (August 2018)

You can add multiple static resources to your CoveoV2:AgentPanel, CoveoV2:FullSearch, and CoveoV2:AttachedResults components by using the following lines:

customScripts="{!join(',',$Resource.YourFirstStaticResource, $Resource.YourSecondStaticResource, $Resource.YourThirdStaticResource)}

However, you cannot use multiple static resources in your community, except in your Case Deflection.

Step 2 - Create a Static Resource Including Your Custom Code

Now that you have your custom component, you should create a static resource in Salesforce (see Creating a Static Resource).

The script runs in the context of the Coveo component.

Your function should be declared using CoveoCustomScripts, as such:

window.coveoCustomScripts['default'] = function(promise) {
  // Enter your JavaScript code here.
  // You can also use promises this way:
  var customPromise = Coveo.$.Deferred();
  setTimeout(function() {
    // Get external resources.
    customPromise.resolve();
  }, 1000)
  return customPromise;
}

Coveo for Salesforce 3.16 (August 2018)

You can also replace default, which executes the script for all components, with a component name to use the script only with the selected component, such as AgentPanel, FullSearch, or AttachedResults.

You wish to programmatically add tablet to the query of a component on a page specifically used for tablet (see QueryBuilder), and send a custom analytics event to reflect this (see Sending Your Own Search, Click, or Custom Events). In your static resource, you enter the following code:

/**
 * @param {Promise<void>} promise A promise on which the custom script can wait on.
 * @param {Aura.Component} component The current SearchUI component instance.
 */
window.coveoCustomScripts['default'] = function (promise, component) {
  function sendMyCustomAnalytics(evt) {
    var root = evt.target;
    var myCustomEventCause = { name: 'Tablet', type: 'Product' };
    var myCustomEventMetadata = { product: 'tablet' };
    Coveo.logCustomEvent(root, myCustomEventCause, myCustomEventMetadata);
  }
  $('.CoveoSearchInterface').on('buildingQuery', function (evt, args) {
    args.queryBuilder.expression.add('tablet');
    sendMyCustomAnalytics(evt);
  });
}

Interact with the Coveo Component Properties

Coveo for Salesforce 2.48 (October 2017)

As of the October 2017 release, you can access the Coveo Lightning component properties from a static resource.

The parameter used as your component is the second one of your function.

For more information on the supported component methods in Salesforce, see Component class.

var root = component.getElements().map(function(element) {
    return element.querySelector('.CoveoSearchInterface');
}).find(function (element) {
    return element != null;
});

Step 3 - Include the Custom Script in Your Component

Now that you have a static resource, you should include your static resource in your custom component (see Integrating the Coveo Components in a Custom Lightning Component).

To reference the static resource, in the CoveoV2:SearchUI section, add the following, replacing YourStaticResource with the name of your static resource:

<!-- For uncompressed resources, use this format: -->
<CoveoV2:SearchUI customScripts="{!$Resource.YourStaticResource}" />
<!-- For compressed resources, use this one: -->
<CoveoV2:SearchUI customScripts="{!$Resource.YourStaticResource + '/YourStaticResourceFile.js'}" />

What’s Next?