Integrating Coveo Components in a Custom Lightning Component for Your Community

For some actual reasons, such as modifying the DOM within the JSUI or interacting with the JSUI events, you may need to wrap the Coveo component with another one. The wrapper can be seen as a clean way to further customize your integration to your specific needs.

You could customize your Coveo components to:

  • Change facet value captions
  • Send custom analytics data

Inside your component, you can execute JavaScript code or call Apex functions using the Lightning Component Framework.

The following tutorial will show you how to create a custom Lightning component that exposes Lightning attributes.

  1. Create a new Lightning Component using the Salesforce developer console (see Create a Lightning Component).
  2. Edit the .cmp file with the following:

     <aura:component implements='forceCommunity:availableForAllPageTypes'>
         <CoveoV2:Search />
     </aura:component>
    

    The implements='forceCommunity:availableForAllPageTypes' attribute on your component tells the Lightning framework that your component can be used inside the Community Builder.

    The <CoveoV2:Search /> tag references the Coveo component itself (see Search Lightning Component).

    To create a Case Deflection component instead, simply replace Search with CaseDeflection (see CaseDeflection Lightning Component).

  3. Since you usually want to expose Lightning attributes, you should add them to your component. For the list of available attributes, see Base Lightning Component.

    To expose all the attributes, your component (.cmp file) should look like this:

     <aura:component implements='forceCommunity:availableForAllPageTypes'>
         <aura:attribute name="name" type="String" default="" access="global" />
         <aura:attribute name="autoInitialize" type="Boolean" default="true" access="global" />
         <aura:attribute name="autoInjectBasicQuery" type="Boolean" default="true" access="global" />
         <aura:attribute name="debug" type="Boolean" default="false" access="global" />
         <aura:attribute name="autoInjectBasicOptions" type="Boolean" default="true" access="global" />
         <aura:attribute name="searchHub" type="String" default="" access="global" />
         <CoveoV2:Search name="{!v.name}" autoInitialize="{!v.autoInitialize}" 
                         autoInjectBasicQuery="{!v.autoInjectBasicQuery}"
                         debug="{!v.debug}"
                         autoInjectBasicOptions="{!v.autoInjectBasicOptions}"
                         searchHub="{!v.searchHub}"/>
     </aura:component>
    
  4. Create a .design file to expose the attributes (see Lightning Component Bundle Design Resources).

    For a component that exposes all attributes, your file should look like this:

     <design:component label="CustomSearch">
         <design:attribute name="name" label="Name" />
         <design:attribute name="autoInitialize" label="Auto Initialize" />
         <design:attribute name="autoInjectBasicQuery" label="Auto Inject Basic Query" />
         <design:attribute name="autoInjectBasicOptions" label="Auto Inject Basic Options" />
         <design:attribute name="debug" label="Debug" />
         <design:attribute name="searchHub" label="Search Hub" />
     </design:component>
    
  5. Save your changes. You should now have a custom Lightning component available in your community.

Now that you have a custom component, you may want to add custom code to it: