---
title: About the default Coveo for Salesforce Full Search page
slug: '1314'
canonical_url: https://docs.coveo.com/en/1314/
collection: coveo-for-salesforce
source_format: adoc
---
# About the default Coveo for Salesforce Full Search page

[.version.c4sf.c4sf-edition.c4sf-pro-enterprise]
[Pro and Enterprise editions](https://docs.coveo.com/en/l2590456#salesforce)


> **Important**
>
> As of the [Coveo for Salesforce v5.2 release](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release), the [Coveo Visualforce (Classic) components](https://docs.coveo.com/en/1198/) have been deprecated (see [What's new in v5?](https://docs.coveo.com/en/n4qa0444/)).

The Coveo for Salesforce Full Search page is meant to be used as a main [search hub](https://docs.coveo.com/en/1342/), where the [search interface](https://docs.coveo.com/en/2741/) takes up most of the screen and the results are predominantly shown.

Typically, this search page will include [tabs](https://docs.coveo.com/en/1406/) and [facets](https://docs.coveo.com/en/198/) 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](https://docs.coveo.com/en/nbm90465/).

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**

```html
<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](https://coveo.github.io/search-ui/components/searchinterface.html).

## CoveoFoldingForThread

The folding component is used to be able to show results as children of their parent result (see [Folding results](https://docs.coveo.com/en/428/)).

For more information, see [FoldingForThread](https://coveo.github.io/search-ui/classes/foldingforthread.html).

## CoveoAnalytics

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

For more information, see [Coveo Analytics component](https://coveo.github.io/search-ui/components/analytics.html).

## 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](https://coveo.github.io/search-ui/components/tab.html).

## 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](https://coveo.github.io/search-ui/components/searchbox.html) and [Coveo Settings component](https://coveo.github.io/search-ui/components/settings.html).

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

## coveo-facet-column and CoveoFacet

> **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](https://coveo.github.io/search-ui/components/facet.html).

## 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 must 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](https://coveo.github.io/search-ui/components/sharequery.html) and [Coveo PreferencesPanel component](https://coveo.github.io/search-ui/components/preferencespanel.html).

## 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](https://coveo.github.io/search-ui/components/triggers.html).

## CoveoBreadcrumb

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

For more information, see [Coveo Breadcrumb component](https://coveo.github.io/search-ui/components/breadcrumb.html).

## 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](https://coveo.github.io/search-ui/components/searchalerts.html).

## 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](https://coveo.github.io/search-ui/components/querysummary.html) and [Coveo QueryDuration component](https://coveo.github.io/search-ui/components/queryduration.html).

## 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](https://coveo.github.io/search-ui/components/resultlayoutselector.html).

## 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](https://coveo.github.io/search-ui/components/sort.html).

## 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](https://coveo.github.io/search-ui/components/hiddenquery.html).

## CoveoDidYouMean

The DidYouMean component is responsible for displaying query corrections.

For more information, see [Coveo DidYouMean component](https://coveo.github.io/search-ui/components/didyoumean.html).

## 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](https://coveo.github.io/search-ui/components/errorreport.html).

## CoveoResultList and result-template

The ResultList component is responsible for displaying query results by applying one or several [result templates](https://docs.coveo.com/en/413/).

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

For more information, see [Coveo ResultList component](https://coveo.github.io/search-ui/components/resultlist.html).

## 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](https://coveo.github.io/search-ui/components/pager.html) and [Coveo ResultsPerPage component](https://coveo.github.io/search-ui/components/resultsperpage.html).

## CoveoLogo

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

For more information, see [Coveo Logo component](https://coveo.github.io/search-ui/components/logo.html).