Creating a JavaScript Search Result Template

Coveo for Salesforce 2.26 - July 2016 

You can easily create new search result templates using the JavaScript Search Interface Editor by duplicating an existing one.

Coveo for Salesforce 2.26 - July 2016  The new Interface Editor is described in this topic. Prior Coveo for Salesforce versions include a Legacy Interface Editor (see Creating a JavaScript Search Result Template With the Legacy Interface Editor).

Leave out-of-the-box search result templates intact and rather modify copies of them. This way, you can always come back to the out-of-the-box templates to review how they were made.

To create a search result template

  1. Navigate to the Coveo search page for which you want to create a search result template, and then access the Interface Editor (see Accessing the Interface Editor from Coveo Cloud V2 Hosted Search Pages or Accessing the Interface Editor in Coveo for Salesforce V2).

  2. In the Interface Editor, click the UI Settings icon (Icon-AC8_Settings), and then click Result templates.

  3. In the Result templates panel, click Add.

    Admin-InterfaceEditor-AddTemplate

  4. When adding a result template to a hosted search page, in the Result templates panel:

    1. Under Select a connector, select the checkboxes corresponding to the connectors for which you want to create a result template, and then click Next.

      Click Any if you want to apply this template to all search results regardless of their type.

      Admin-InterfaceEditor-SelectConnector

    2. Under Select object type, select the checkboxes corresponding to the object types for which you wish to create a result template, and then click Next.

    3. Under Select file type, select the checkboxes corresponding to the item types for which you wish to create a result template, and then click Next.

    4. Under Select a template layout, select a search result layout by clicking the numbers or the < and > keys, and then click Apply.

      A preview is displayed for each layout.

  5. When adding a result template to a Salesforce search page:

    1. Under Select a document type:

      1. Under Select or enter a field to apply the condition on, choose the field that should be used to apply your template condition on.

      2. Under Select or enter field values on which to filter on, select the values your field should have for the result template to be applied.

        Once selected, the value should move to the Select values field.

        Admin-InterfaceEditor-SelectDocumentType

    2. Under Select a template layout, select a search result layout by clicking the numbers or the < and > keys, and then click Apply.

      A preview is displayed for each layout.

  6. In the Result templates panel, your newly created template now appears as My [Selected Template Layout Name] Template. When the corresponding panel is not already open, click the template name.

  7. In the My [Selected Template Layout Name] Template panel, in the Template Option tab:

    1. In the Id box, replace the default name by the desired name for your new template.

    2. When in a Salesforce search page, in the Condition boxes, verify that the Field to apply the condition on and Field must match one of those values fit your use case.

    3. When in a hosted search page, ensure the values Field: ‘your field’ must match one of those values fit your use case.

    4. Under Fields or Fields to request on every query, start typing a field name in the drop-down to filter fields by name, and then click the desired field(s).

      Selected fields appear in the Selected fields below the drop-down. Click the X to delete them.

      The field name must comply with the @fieldname format.

  8. In the Layout tab, you can modify the template grid (see Modifying a JavaScript Search Result Template Grid and Organizing Components Within a Search Result Template Grid).

    Admin-InterfaceEditor-LayoutTab

  9. In the Code tab, you can review the template grid code. You could also copy the code and paste it in the same place in another search page.

    You modify and test your JavaScript search result template in a dedicated search page to avoid accidentally making unwanted changes in your production page. Therefore, once satisfied with your modifications, you copy and paste the modified code into your production search page.

    The search result template grid code does not include the condition under which the code should apply, i.e., which search results should be formatted this way. If you wish to copy the condition as well, you must access the entire page code, and then look for the <script> line that applies to the content retrieved by the desired crawler (see View and Customize the Search Interface Source Code). If you want your code to apply to a certain type of content retrieved by the desired crawler, you will need to edit this <script> line yourself (see Underscore Result Template).

  10. Click Save to save your changes and close the panel.