About the default Coveo for Salesforce Case Creation page

This is for:

Developer System Administrator

Pro and Enterprise editions

Deprecated

Note

To learn how to create a Case Deflection component, see Adding the Coveo Case Deflection component.

The Coveo Case Creation page is meant to be used so your users can be proposed solutions to their issues while they’re entering a case.

Typically, this search interface will be separated in two panels: one where the user can enter their case, and the other where the user is proposed solutions.

The markup of the default case creation page looks like this:

Example

Case Creation panel

<div id="search" class="CoveoCaseCreationInterface" data-enable-history="false" data-design="new">
  <div class="CoveoAnalytics"></div>
  <div class="coveo-main-section" id="coveo-case-creation-main-section">
    <div class="coveo-case-creation-column">
      <div class="CoveoCaseCreation">
        <div class="coveo-result-frame">
          <div class="coveo-result-row coveo-case-creation-row">
            <div class="coveo-result-cell coveo-case-creation-cell">
              <div class="CoveoField" data-title="Subject" data-case-field="Subject">
              </div>
            </div>
          </div>
          <div class="coveo-result-row coveo-case-creation-row">
            <div class="coveo-result-cell coveo-case-creation-cell">
              <div class="CoveoField" data-title="Description" data-case-field="Description" data-number-of-lines="10" data-add-qre="false">
              </div>
            </div>
          </div>
          <div class="coveo-result-row coveo-case-creation-row">
            <div class="coveo-result-cell coveo-case-creation-cell" style="text-align:right">
              <div class="CoveoSubmit">
              </div>
            </div>
            <div class="coveo-result-cell coveo-case-creation-cell" style="text-align:right; width:70px">
              <div class="CoveoCancel">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="coveo-results-column" id="coveo-case-creation-results-column">
      <div class="CoveoText" data-value="Recommended Solutions" data-size="18px"></div>
      <div class="coveo-tab-section" id="coveo-case-creation-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-summary-section">
        <div class="CoveoCaseCreationQuerySummary"></div>
      </div>
      <div class="CoveoTriggers"></div>
      <div class="CoveoErrorReport" data-pop-up="false"></div>
      <div class="CoveoResultList" 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>
  </div>
</div>

CoveoCaseCreationInterface

The whole Case Creation interface is declared in the CoveoCaseCreationInterface component.

You should consider this element as the root of your case creation panel.

CoveoAnalytics

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

For more information, see Coveo Analytics 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, in the context of the Case Creation page, contains all visible components.

coveo-case-creation-column

Note

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

This section contains the components that should be shown on the left of the page, where the user enters the information for their case.

CoveoCaseCreation

The CaseCreation component contains all the components that should be used while the user enters the information for their case.

For more information, see CaseCreation component.

CoveoField

The Field component allows users to enter text input in their case creation form.

For more information, see Field component.

CoveoSubmit

The Submit component displays a button that, when pressed, creates a case with the information from the components inside the CaseCreation component.

For more information, see Submit component.

CoveoCancel

The Cancel component adds a button that, when pressed, cancels the case request.

For more information, see Cancel component.

coveo-results-column

Note

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

This section contains the components that should be shown on the right of the page, where the user sees solutions to the case they’re entering.

CoveoText

The Text component simply displays static text in your interface.

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 are used so users can easily switch the context of their search.

For more information, see Coveo Tab component.

coveo-summary-section and CoveoCaseCreationQuerySummary

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 display the CoveoCaseCreationQuerySummary component.

The CaseCreationQuerySummary component takes care of wrapping the QuerySummary component specifically for the Case Creation page.

For more information, see Coveo QuerySummary 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.

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

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

For more information, see Coveo Pager component.