Add JavaScript to the Coveo Lightning Aura components with custom code (Deprecated)

THIS IS ARCHIVED DOCUMENTATION

Add JavaScript to the Coveo Lightning Aura components with custom code (Deprecated)

In this article

Deprecated

This feature is still available, but no longer supported as of the May 2017 release of Coveo for Salesforce version 2.41. For version 2.41 and up, use static resources instead (see Add JavaScript to the Coveo Lightning Aura 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.

Note

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 Integrate Coveo Lightning Aura components in a custom component for your Experience Cloud site.

Available since

This feature was introduced in the February 2017 release of Coveo for Salesforce version 2.38.

// 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');
        })
    }
})

Deprecated

This feature is still available, but no longer supported as of the February 2017 release of Coveo for Salesforce version 2.38.

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