Modifying a JavaScript Search Result Template Grid

Coveo for Salesforce 2.26 (July 2016)

In a Coveo JavaScript Search interface, an HTML search result template is made up of cells into which you can drag and drop components. You can use the Interface Editor to easily add, delete, or customize the cells of a search result template grid.

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

Access the Search Result Template Grid

  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 the Coveo Cloud Administration Console or Accessing the Interface Editor in Coveo for Salesforce V2).

  2. Create a search result template or select the one you want to modify (see Creating a JavaScript Search Result Template or Selecting a JavaScript Search Result Template to Modify).

  3. Access the layout options:

    • If you just created a search result template or selected your template in the template, click the Layout tab.

    • If you opened the edition panel directly from the result list, click the Layout button (Admin-InterfaceEditor-LayoutButton).

Add a Cell

  1. Access the search result template grid.

  2. Click a cell that would be adjacent to the cell you want to add, and then click the corresponding Edit icon (Icon-Edit3).

    The selected cell is highlighted and plus signs (+) appear on each side.

    Admin-InterfaceEditor-AddCell

  3. Click the plus sign (+) where you want to add a cell.

    A cell appears and is highlighted. You can use the Format pane to customize it (see Customize a Cell), or click in the grid to leave the cell as it is.

Customize a Cell

  1. Access the search result template grid.

  2. Click the cell you want to customize, and then click the corresponding Edit icon (Icon-Edit3).

  3. In the Format pane, you may change the following values:

    • Width

      Enter a cell width.

    • Text align

      Choose a horizontal text alignment from the drop-down between the following options: left, right, center, or justify.

    • Vertical align

      Choose whether the text will be displayed at the top, middle or bottom of the cell.

    • Font size

      Enter a text font size.

    • Wrap Value

      Select this check box to enable line wrapping and allow cell content to be displayed on more than one line rather than to be truncated. This is especially useful in an Excerpt cell, since search result excerpts are often longer than one line.

    • Padding

      Click Padding to expand this box, and then enter a value to specify a custom amount of space between the each cell border and the cell content (see Cellpadding).

    In the Width, Font size, and Padding boxes, you must enter a numerical value immediately followed by the symbol of a CSS unit.

    • 20px

    • 2em

    • 3cm

Move a Cell

You cannot directly move an existing cell. You must rather:

  1. Access the search result template grid.

  2. Add a similar cell where you want to move your current cell (see Add a Cell).

  3. Drag and drop each component from the original cell to the new cell (see Move a Component from one Cell to Another).

  4. Delete the original cell (see Delete a Cell).

Delete a Cell

  1. Access the search result template grid.

  2. Click the cell you want to delete.

  3. In the Delete a component pop-up, click Yes.

What’s Next?

Drag and drop search result components in the appropriate template cells (see Organizing Components Within a Search Result Template Grid).

Recommended Articles