Changing the default Quick view in Coveo for Salesforce

This is for:

Developer System Administrator

In your result templates, you can choose to show a Quickview control, allowing users to see a preview of a result without leaving the search page.

By default, the Quickview uses the item body field in the index to display the preview.

You will oftentimes want to adapt the default Quickview to fit your needs.

There are two ways to do so:

Each method presents their own advantages:

Changing the indexed Quick view Specifying a Quick view template
  • Index-Side
  • Only available with Coveo for Salesforce Pro and Enterprise
  • Configured in the Coveo Administration Console
  • Client-Side
  • Available with all editions of Coveo for Salesforce
  • Configured in HTML directly on your search page

Changing the indexed Quick view

Pro and Enterprise editions only Integrators usually prefer to change the indexed Quick view when they can.

To do this, you need to change the body field (see View or Edit a Salesforce object body), which affects both the Quick view and the excerpt.

Specifying a Quick view template

While not the preferred approach for users with Coveo for Salesforce Pro or Enterprise, adding a Quick view template is the ideal solution to add Quick views if you have a particular use case.

To add a Quick view template, you need to add it in the code of your page.

  1. Access the Coveo for Salesforce Interface Editor.
  2. At the top of the page, select the Code View tab.

  3. At the end of your result template list, add a template that you will use as your Quick view.

    An example template for an account could look like this:

     <script id="accountQuickview" type="text/html" class="result-template">
   <div class="coveo-result-frame">
     <div class="coveo-result-row">
       <span class="CoveoFieldValue" data-field="@sfname"></span>
     </div>
     <div class="coveo-result-row">
       <span class="CoveoFieldValue" data-field="@sfindustry"></span>
     </div>
     <div class="coveo-result-row">
       <span class="CoveoFieldValue" data-field="@sfdescription"></span>
     </div>
     <div class="coveo-result-row">
       <span class="CoveoFieldValue" data-field="@sfannualrevenue" data-helper="currency"></span>
     </div>
     <div class="coveo-result-row">
       <span class="CoveoFieldValue" data-field="@sfaccountnumber"></span>
     </div>
     <div class="coveo-result-row">
       <span class="CoveoFieldValue" data-field="@sfcreateddate" data-helper="date"></span>
     </div>
   </div>
 </script>

    For more information on how to build result templates, see Configure JavaScript search result templates.

  4. Select UI View at the top of the page.
  5. Edit the result template of one of your results that should use the Quick view you just added. Hover over it and click Edit that appears in its upper-right corner.
  6. Click Layout.
  7. Drag and drop the Quick View component where you want to put it on your page.
  8. In the Quickview Options window, ensure that the Always show checkbox is checked.
  9. Select Save.
  10. Select the Code View tab again.

  11. Search for your newly added Quickview component. It should look like this:

    <span class="CoveoQuickview" data-always-show="true"></span>

    The CoveoQuickview component isn’t compliant with Lightning Locker. Therefore, in Coveo for Salesforce v3.16 and up (Lightning Experience), you must use the CoveoSalesforceQuickview component instead.

  12. Add a reference to the template id that the Quick view should use.

    According to our previous example, your CoveoQuickview component would now look like this:

    <span class="CoveoQuickview" data-always-show="true" data-template-id="accountQuickview"></span>
  13. Repeat these steps for all the objects on which you want to add Quick views.