Adding JavaScript to the Coveo for Salesforce Lightning components with custom code - Deprecated

This is for:

In this article

Coveo for Salesforce 2.41 (May 2017)

This method is deprecated as of the May 2017 release of Coveo for Salesforce, as it isn’t Lightning Locker friendly.

For version 2.41 and up, you should use static resources instead (see Adding JavaScript to the Coveo for Salesforce Lightning components with custom code).

During your implementation, you may need to interact with the Coveo JavaScript Search Framework. The best way to do so is to use a Lightning component as a wrapper for the Coveo components.

Code written in a script tag of a Coveo Lightning component won’t be executed.

You can assemble many Lightning components together in a single application. The Coveo components expose different Lightning events on which you can hook custom code.

To implement this method, you need to first follow the steps on Integrating the Coveo components in a custom Lightning component.

Coveo for Salesforce 2.38 (February 2017)

// File TestWrapper.cmp
<aura:component implements='forceCommunity:availableForAllPageTypes'>
    <CoveoV2:Search ResourcesLoaded="{!c.onResourcesLoaded}" InterfaceContentLoaded="{!c.onInterfaceContentLoaded}"/>
</aura:component>
​
// File TestWrapperController.js
({
    onResourcesLoaded: function(component, event, helper) {
        // Here, the various resources (Coveo Library + dependencies, CSS) are loaded and ready for use.
        // However the search page content has not been yet appended to the page and it's not accessible in the DOM.
    },
    onInterfaceContentLoaded : function(component, event, helper) {
        // Here, the search page content was appended to the page and is accessible
        // in the DOM. The interface has not been initialized yet. This is the equivalent
        // of a $(ready) function in a classic implementation.
        // This is here that we can modify the query, for example:
        $('.CoveoSearchInterface').on('buildingQuery', function(e,args) {
            args.queryBuilder.expression.add('This is a test');
        })
    }
})

Coveo for Salesforce 2.38 (February 2017)

// File TestWrapper.cmp
<aura:component implements='forceCommunity:availableForAllPageTypes'>
    <CoveoV2:Search CoveoV2:ResourcesLoaded="{!c.onResourcesLoaded}" CoveoV2:InterfaceContentLoaded="{!c.onInterfaceContentLoaded}"/>
</aura:component>
​
// File TestWrapperController.js
({
    onResourcesLoaded: function(component, event, helper) {
        // Here, the various resources (Coveo Library + dependencies, CSS) are loaded and ready for use.
        // However the search page content has not been yet appended to the page and it's not accessible in the DOM.
    },
    onInterfaceContentLoaded : function(component, event, helper) {
        // Here, the search page content was appended to the page and is accessible
        // in the DOM. The interface has not been initialized yet. This is the equivalent
        // of a $(ready) function in a classic implementation.
        // This is here that we can modify the query, for example:
        $('.CoveoSearchInterface').on('buildingQuery', function(e,args) {
            args.queryBuilder.expression.add('This is a test');
        })
    }
})

ResourcesLoaded and InterfaceContentLoaded are the component events that Coveo triggers. They’re preceded by the package namespace (for example, CoveoV2).
Each of them is bound to a controller function (the {!c reference to the controller of the TestWrapper component).
In the controller, each event function receives three arguments (you can learn more from the Salesforce Lightning documentation):
- component: A reference to the current TestWrapper component (see Aura Documentation - Component Class).
- event: A reference to the event object that was triggered (see Aura Documentation - Event Class).
- helper: A reference to the TestWrapperHelper that you can create for your component. A helper can be seen as a bunch of utility methods that can be referenced by many parts of your component.

Available events

Event name	Event description
`ResourcesLoaded`	Triggered when the scripts, dependencies, and CSS of the JavaScript Search Framework have been loaded in the page.
`InterfaceCreatorLoaded`	Triggered when the interface creator is loaded in the page. The interface creator is the small wizard that's shown before the page is created.
`InterfaceContentLoaded`	Triggered when the search page content is appended to the page. At this point, `$('.CoveoSearchInterface')` returns the root of your interface. This is the equivalent of the `$(ready)` function in a classic deployment.
`GetSearchToken`	Triggered when using custom search token generation. This is explained in more details on this page.

To learn more about events in Lightning, see Communicating with Events.