Search page architecture

This is for:

Developer System Administrator

Deprecated

The Coveo JavaScript Search Framework bundled with the Coveo for Salesforce package is used to create search pages.

A search page within Salesforce leverages the JavaScript Search Framework concepts and is essentially made up of two elements: a Visualforce page, and a Visualforce component.

Visualforce page

A Visualforce page allows you to hook yourself directly to the JavaScript Search Framework. When accessed for the first time, it launches the automatic search page creation process (see Creating your first full JavaScript search page in Salesforce).

When the page is already created, you can use the Interface Editor to easily customize its layout and components.

<apex:page standardStylesheets="false" sidebar="false">
    <CoveoV2:SearchInterface />
</apex:page>

The SearchInterface loads all the JavaScript Search dependencies, therefore shielding you from having to manage the framework core essential. You can also review the constitution of the JavaScript Search by looking within the static resources of the CoveoJsSearch.

Visualforce component

A search page is composed of HTML tags complemented with well-known CSS classes. Each of these classes corresponds to a component to be instantiated during the initialization (see Components).

The HTML code below is generated by the Interface Editor when you publish your search page. It’s equivalent to the <body> section of a standard web page.

<apex:component ><div id="search" class="CoveoSearchInterface" data-enable-history="true">

 <div class="coveo-tab-section">
 </div>
 <div class="coveo-search-section">
 </div>
 <div class="coveo-results-section">
 </div>

</div>
</apex:component>

Generating an initial search page is the best way to understand what happens behind the scenes. You can use the Interface Editor in Advanced Mode to discover all the available components and parameters, make changes, and switch between the Components and Code tabs to understand how the HTML code is modified.

In addition to the basic structure of a search page, it’s essential to understand the flow of events that allow for control and presentation of a search page (see JavaScript Search Framework events).