About the default Coveo for Salesforce Full Search page

This is for:

Important

As of the Coveo for Salesforce v5.2 release, the Coveo Visualforce (Classic) components have been deprecated (see What’s new in v5?).

The Coveo for Salesforce Full Search page is meant to be used as a main search hub, where the search interface takes up most of the screen and the results are predominantly shown.

Typically, this search page will include tabs and facets to help users quickly find what they’re looking for.

To learn how to integrate a Coveo for Salesforce Full Search page, see Integrate a Coveo Full Search page in a Lightning Console app.

This article describes the architecture of the default Coveo for Salesforce Full Search page. It’s meant to be used as a reference when you want to customize your own search page.

The markup of the default search page looks like this:

Example

<div id="search" class="CoveoSearchInterface" data-enable-history="true" data-design="new">
  <div class="CoveoFoldingForThread" data-field="@sffeeditemid" data-tab="Chatter" data-parent-field="@sfid" data-child-field="@sffeeditemid"
    data-rearrange="date descending" data-range="0"></div>
  <div class="CoveoFoldingForThread" data-field="@sfcaseid" data-tab="SalesforceCase" data-parent-field="@sfid" data-child-field="@sfcaseid"
    data-range="0"></div>
  <div class="CoveoAnalytics"></div>
  <div class="coveo-tab-section">
    <a class="CoveoTab" data-id="All" data-caption="All Content"></a>
    <a class="CoveoTab" data-id="Chatter" data-caption="Chatter" data-expression="@objecttype==(FeedItem,FeedComment)"></a>
    <a class="CoveoTab" data-id="Salesforce" data-caption="Salesforce" data-expression="@sfid"></a>
    <a class="CoveoTab" data-id="SalesforceCase" data-caption="Cases" data-expression="@sfcaseid"></a>
  </div>
  <div class="coveo-search-section">
    <div class="CoveoSettings"></div>
    <div class="CoveoSearchbox" data-enable-omnibox="true"></div>
  </div>
  <div class="coveo-main-section">
    <div class="coveo-facet-column">
      <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-tab="All"></div>
      <div class="CoveoFacet" data-title="FileType" data-field="@filetype" data-tab="All"></div>
      <div class="CoveoFacet" data-title="Author" data-field="@author" data-tab="All"></div>
      <div class="CoveoFacet" data-title="Year" data-field="@year" data-tab="All"></div>
      <div class="CoveoFacet" data-title="Month" data-field="@month" data-tab="All"></div>
      <div class="CoveoFacet" data-title="Posted on" data-tab="Chatter" data-field="@sfparentname"></div>
      <div class="CoveoFacet" data-title="Posted by" data-tab="Chatter" data-field="@sfcreatedbyname"></div>
      <div class="CoveoFacet" data-title="Topic" data-tab="Chatter" data-field="@coveochatterfeedtopics"></div>
      <div class="CoveoFacet" data-title="Liked by" data-tab="Chatter" data-field="@sflikedby"></div>
      <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-number-of-values="5" data-tab="Salesforce"></div>
      <div class="CoveoFacet" data-title="Close quarter" data-field="@sfopportunityclosedquarterc" data-computed-field="@sfopportunityamountconverted"
        data-sort-criteria="AlphaDescending" data-tab="Salesforce"></div>
      <div class="CoveoFacet" data-title="Salesforce Account" data-field="@sfaccountname" data-computed-field="@sfopportunityamountconverted"
        data-sort-criteria="ComputedFieldDescending" data-number-of-values="7" data-tab="Salesforce"></div>
      <div class="CoveoFacet" data-title="Salesforce Owner" data-field="@sfownername" data-computed-field="@sfopportunityamountconverted"
        data-sort-criteria="ComputedFieldDescending" data-number-of-values="7" data-tab="Salesforce"></div>
      <div class="CoveoFacet" data-title="Opportunity Type" data-field="@sfopportunitytype" data-computed-field="@sfopportunityamountconverted"
        data-sort-criteria="ComputedFieldDescending" data-number-of-values="5" data-tab="Salesforce"></div>
      <div class="CoveoFacet" data-title="Opportunity Stage" data-field="@sfopportunitystagename" data-computed-field="@sfopportunityamountconverted"
        data-sort-criteria="ComputedFieldDescending" data-tab="Salesforce"></div>
      <div class="CoveoFacet" data-title="Lead Source" data-field="@sfleadsource" data-computed-field="@sfopportunityamountconverted"
        data-sort-criteria="ComputedFieldDescending" data-number-of-values="5" data-tab="Salesforce"></div>
      <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-tab="SalesforceCase"></div>
      <div class="CoveoFacet" data-title="Case Status" data-field="@sfcasestatus" data-tab="SalesforceCase"></div>
      <div class="CoveoFacet" data-title="Case Priority" data-field="@sfcasespriority" data-tab="SalesforceCase"></div>
      <div class="CoveoFacet" data-title="Account" data-field="@sfaccountname" data-tab="SalesforceCase"></div>
      <div class="CoveoFacet" data-title="Owner" data-field="@sfownername" data-tab="SalesforceCase"></div>
    </div>
    <div class="coveo-results-column">
      <div class="CoveoShareQuery"></div>
      <div class="CoveoPreferencesPanel">
        <div class="CoveoResultsPreferences"></div>
        <div class="CoveoResultsFiltersPreferences"></div>
      </div>
      <div class="CoveoTriggers"></div>
      <div class="CoveoBreadcrumb"></div>
      <div class="CoveoSearchAlerts"></div>
      <div class="coveo-results-header">
        <div class="coveo-summary-section">
          <span class="CoveoQuerySummary"></span>
          <span class="CoveoQueryDuration"></span>
        </div>
        <div class="coveo-result-layout-section">
          <span class="CoveoResultLayout"></span>
        </div>
        <div class="coveo-sort-section">
          <span class="CoveoSort" data-sort-criteria="relevancy" data-caption="Relevance"></span>
          <span class="CoveoSort" data-sort-criteria="date descending,date ascending" data-caption="Date"></span>
          <span class="CoveoSort" data-sort-criteria="@sfopportunityamountconverted descending,@sfopportunityamountconverted ascending"
            data-tab="Salesforce" data-caption="Amount"></span>
        </div>
      </div>
      <div class="CoveoHiddenQuery"></div>
      <div class="CoveoDidYouMean"></div>
      <div class="CoveoErrorReport" data-pop-up="false"></div>
      <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true">
        <script id="Chatter" class="result-template" type="text/html" data-layout="list" data-field-objecttype="FeedItem,FeedComment"><div class="coveo-result-frame">
  <div class="coveo-result-row">
    <div class="coveo-result-cell" style="width:85px; text-align:center; padding-top:5px">
      <span class="CoveoIcon">
      </span>
      <div class="CoveoQuickview">
      </div>
    </div>
    <div class="coveo-result-cell" style="padding-left:15px">
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:13px">
          <span class="CoveoChatterPostedBy">
          </span>
        </div>
        <div class="coveo-result-cell" style="width:120px;text-align:right;font-size:12px">
          <span class="CoveoFieldValue" data-field="@date" data-helper="date">
          </span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:18px; padding-top:5px; padding-bottom:5px">
          <a class="CoveoResultLink">
          </a>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="padding-bottom:5px; padding-top:5px; font-size:13px;">
          <span class="CoveoChatterLikedBy" data-nb-likes-to-render="1">
          </span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px; font-size:13px;">
          <span class="CoveoChatterPostAttachment">
          </span>
          <span class="CoveoResultFolding" data-result-template-id="FeedComment">
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
</script>
        <script id="SalesforceCase" class="result-template" type="text/html" data-layout="list" data-field-sfcaseid=""><div class="coveo-result-frame">
  <div class="coveo-result-row">
    <div class="coveo-result-cell" style="width:85px; text-align:center; padding-top:7px">
      <span class="CoveoIcon">
      </span>
      <span class="CoveoQuickview">
      </span>
    </div>
    <div class="coveo-result-cell" style="padding-left:15px">
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:18px">
          <a class="CoveoResultLink">
          </a>
        </div>
        <div class="coveo-result-cell" style="width:120px;text-align:right;font-size:12px;">
          <span class="CoveoFieldValue" data-field="@date" data-helper="date">
          </span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px">
          <div class="CoveoExcerpt">
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px">
<div class='table-wrap'>
<table class="CoveoFieldTable">
            <tbody>
              <tr data-field="@sffcaseid" data-caption="Subject">
              </tr>
              <tr data-field="@sfcasesubject" data-caption="Subject">
              </tr>
              <tr data-field="@sfcasenumber" data-caption="Case Number">
              </tr>
              <tr data-field="@sfcasepriority" data-caption="Priority">
              </tr>
              <tr data-field="@sfcaseorigin" data-caption="Origin">
              </tr>
              <tr data-field="@sfaccountname" data-caption="Account Name">
              </tr>
              <tr data-field="@sfowner" data-caption="Owner">
              </tr>
              <tr data-field="@sfcasestatus" data-caption="Status">
              </tr>
              <tr data-field="@sfcontactname" data-caption="Contact">
              </tr>
            </tbody>
          </table>
</div>
        </div>
      </div>
    </div>
  </div>
</div>
</script>
        <script id="Salesforce" class="result-template" type="text/html" data-layout="list" data-field-sfid=""><div class="coveo-result-frame">
  <div class="coveo-result-row">
    <div class="coveo-result-cell" style="width:85px; text-align:center; padding-top:7px">
      <span class="CoveoIcon">
      </span>
      <span class="CoveoQuickview">
      </span>
    </div>
    <div class="coveo-result-cell" style="padding-left:15px">
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:18px">
          <a class="CoveoResultLink">
          </a>
        </div>
        <div class="coveo-result-cell" style="width:120px; text-align:right;font-size:12px">
          <span class="CoveoFieldValue" data-field="@date" data-helper="date">
          </span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px">
          <div class="CoveoExcerpt">
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px; font-size:13px;">
<div class='table-wrap'>
<table class="CoveoFieldTable">
            <tbody>
              <tr data-field="@sfaccountname" data-caption="Account">
              </tr>
              <tr data-field="@sfownername" data-caption="Owner">
              </tr>
              <tr data-field="@sfopportunityamountconverted" data-caption="Total" data-helper="currency">
              </tr>
              <tr data-field="@sfopportunitylicensingstotalcconverted" data-caption="License" data-helper="currency">
              </tr>
              <tr data-field="@sfopportunityamountsupportcconverted" data-caption="Support" data-helper="currency">
              </tr>
              <tr data-field="@sfopportunityconsultingstotalcconverted" data-caption="PS" data-helper="currency">
              </tr>
              <tr data-field="@sfopportunitystagename" data-caption="Stage">
              </tr>
              <tr data-field="@sfopportunitydealtypec" data-caption="Deal Type">
              </tr>
              <tr data-field="@sfopportunitycompetitionc" data-caption="Competition" data-split-values="true">
              </tr>
              <tr data-field="@sfibdusername" data-caption="ISR">
              </tr>
              <tr data-field="@sfopportunityregionc" data-caption="Region">
              </tr>
              <tr data-field="@sfleadsource" data-caption="Lead Source">
              </tr>
              <tr data-field="@sfleadstatus" data-caption="Lead status">
              </tr>
              <tr data-field="@worktitle" data-caption="Work title">
              </tr>
              <tr data-field="@sfemail" data-caption="Email" data-helper="email" data-html-value="true">
              </tr>
              <tr data-field="@sfcontactphone" data-caption="Phone">
              </tr>
            </tbody>
          </table>
</div>
        </div>
      </div>
    </div>
  </div>
</div>
</script>
        <script id="Default" class="result-template" type="text/html" data-layout="list"><div class="coveo-result-frame">
  <div class="coveo-result-row">
    <div class="coveo-result-cell" style="width:85px;text-align:center;padding-top:7px;">
      <span class="CoveoIcon">
      </span>
      <div class="CoveoQuickview">
      </div>
    </div>
    <div class="coveo-result-cell" style="padding-left:15px;">
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:18px;">
          <a class="CoveoResultLink">
          </a>
        </div>
        <div class="coveo-result-cell" style="width:120px; text-align:right; font-size:12px">
          <span class="CoveoFieldValue" data-field="@date" data-helper="date">
          </span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell">
          <span class="CoveoExcerpt">
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="coveo-result-row">
    <div class="coveo-result-cell" style="width:85px;text-align:center">
    </div>
    <div class="coveo-result-cell" style="font-size:13px;padding-left: 15px;">
<div class='table-wrap'>
<table class="CoveoFieldTable">
        <tbody>
          <tr data-field="@author" data-caption="Author">
          </tr>
          <tr data-field="@source" data-caption="Source">
          </tr>
          <tr data-field="@language" data-caption="Language">
          </tr>
        </tbody>
      </table>
</div>
    </div>
  </div>
</div>
</script>
      </div>
      <div class="CoveoPager"></div>
      <div class="CoveoLogo"></div>
      <div class="CoveoResultsPerPage"></div>
    </div>
  </div>
</div>

The default Full Search page contains the following sections:

CoveoSearchInterface

The whole search interface is declared using the <div class="CoveoSearchInterface"> tag.

You should consider this element as the root of your search interface. Everything related to your search interface should be inside of it.

For more information, see Coveo SearchInterface component.

CoveoFoldingForThread

The folding component is used to be able to show results as children of their parent result (see Folding results).

For more information, see FoldingForThread.

CoveoAnalytics

The Analytics component is used to automatically send Usage Analytics data to Coveo.

For more information, see Coveo Analytics component.

coveo-tab-section and CoveoTab

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-tab-section is used to contain CoveoTab components. Tabs help the users to easily switch the context of their search.

For more information, see Coveo Tab component.

coveo-search-section, CoveoSettings, and CoveoSearchbox

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-search-section is used to contain the CoveoSearchbox and CoveoSettings components.

The Searchbox component is used to allow users to enter and perform queries.

The Settings component is used as a button to call other components.

For more information, see Coveo Searchbox component and Coveo Settings component.

coveo-main-section

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The main section contains all of the components that are to appear under the search box.

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-facet-column is used to contain CoveoFacet components.

Facets are used to display a selectable list of values for a certain field, so users can narrow their search.

For more information, see Coveo Facet component.

coveo-result-column

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-result-column section contains all of the components that should appear in the same column as the results.

CoveoShareQuery and CoveoPreferencesPanel

The ShareQuery and PreferencesPanel components are placed in the coveo-result-column because their panel should be shown above results. However, to show those panels, you need to select them from the CoveoSettings component.

The ShareQuery component allows users to share their query with other users.

The PreferencesPanel component allows users to save user-specific preferences they want to keep when accessing a search page.

For more information, see Coveo ShareQuery component and Coveo PreferencesPanel component.

CoveoTriggers

The Triggers component enables the use of triggers generated by the Coveo Search API in the query pipeline.

For more information, see Coveo Triggers component.

CoveoBreadcrumb

The Breadcrumb component displays a summary of the currently active filters.

For more information, see Coveo Breadcrumb component.

CoveoSearchAlerts

The SearchAlerts component allows end users to follow queries and manage search alerts. The option is found in the Settings component.

For more information, see Coveo SearchAlerts component.

coveo-summary-section, CoveoQuerySummary, and CoveoQueryDuration

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-summary-section is used to show information before the result list.

It contains the QuerySummary and the QueryDuration components.

The QuerySummary component displays information about the currently displayed range of results.

The QueryDuration component displays the time it took to perform the query.

For more information, see Coveo QuerySummary component and Coveo QueryDuration component.

coveo-result-layout-section and CoveoResultLayout

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-result-layout-section is used to contain the CoveoResultLayout component, which has been renamed CoveoResultLayoutSelector.

The ResultLayoutSelector component allows your end users to change the way results are displayed.

For more information, see Coveo ResultLayoutSelector component.

coveo-sort-section and CoveoSort

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-sort-column is used to contain the CoveoSort component. Sorts are used to allow end users to easily change the result ordering.

For more information, see Coveo Sort component.

CoveoHiddenQuery

The HiddenQuery component allows you to add a hidden query parameter with a specific user-friendly description.

For more information, see Coveo HiddenQuery component.

CoveoDidYouMean

The DidYouMean component is responsible for displaying query corrections.

For more information, see Coveo DidYouMean component.

CoveoErrorReport

The ErrorReport component takes care of handling fatal errors when doing a query on the index / Search API.

For more information, see Coveo ErrorReport component.

CoveoResultList and result-template

The ResultList component is responsible for displaying query results by applying one or several result templates.

Result templates are defined by a script tag with the result-template class.

For more information, see Coveo ResultList component.

CoveoPager and CoveoResultsPerPage

The Pager component allows users to navigate through the different result pages.

Next to it’s the ResultsPerPage component, which allows users to change the number of results each page should display.

For more information, see Coveo Pager component and Coveo ResultsPerPage component.

CoveoLogo

The Logo component adds a clickable Coveo logo in the search interface.

For more information, see Coveo Logo component.