Integrate Coveo components in a custom Lightning app

This is for:

In this article

Prerequisites
Procedure

The Lightning App Builder is a tool that lets you easily create custom pages for the Salesforce mobile app and Lightning Experience. You can use the Lightning App Builder in Sales or Service Cloud to integrate an Insight Panel or a Full Search page into the Lightning Console.

You can also use Coveo components in the Lightning App Builder to add relevance into custom Lightning apps. To do so, follow the steps provided in this article.

Prerequisites

Ensure that you have created a custom Lightning app page.

Ensure that you have created a custom Lightning component and specified the implements option as follows:

Example

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <CoveoV2:FullSearch name="myCustomAppSearch" searchhub="myCustomAppSearch"></CoveoV2:FullSearch>
</aura:component>

The implements=flexipage:availableForAllPageTypes option tells the Lightning framework that your component can be used inside a Lightning App Builder page.

The <CoveoV2:FullSearch/> tag references the Coveo component itself. You can specify the Coveo Lightning component of your choice (that is, Insight Panel, Full Search page, or Attached Results).

The name and searchHub values are just placeholders and can be modified.

By default, the implements option of the out-of-the-box Coveo Lightning components is set to flexipage:availableForRecordHome. You must update this value, as specified in the previous example, to make your custom components available for record pages and any other type of page inside your custom Lightning App Builder page.

Note

For more information about the configuration of Lightning pages, see Configure Components for Lightning Pages and the Lightning App Builder. You can also look at the available interfaces.

Procedure

Access your custom Lightning app page.
1. In Salesforce, under Setup, search for and select Lightning App Builder (User Interface > Lightning App Builder).
2. Under Lightning Pages, next to the App you want to customize, select Edit.
In the App Builder, under Custom, drag your custom component to where you want to add it on your page.
To customize the component, either edit the code directly or use the Interface Editor:
1. To edit the code, access the Developer Console and then select the component you want to customize.
2. To use the Interface Editor:
  1. Ensure that you have activated your custom Lightning app page.
  2. Access your Lightning app.
  3. Access the Interface Editor to edit your search page.