Making Basic JavaScript Search Page Customization With the Legacy Interface Editor

This topic describes how to use the Interface Editor basic mode to make typical customizations to a Coveo JavaScript Search page integrated in Salesforce.

Coveo for Salesforce 2.26 - July 2016  A newer Coveo JavaScript Search Interface Editor replaces the legacy Interface Editor described in this topic (see JavaScript Search Interface Editor).

To make basic JavaScript Search page customization with the Interface Ed

  1. Using a Salesforce account with Modify all data permission, log in to the Salesforce organization hosting the Coveo JavaScript Search page or insight panel that you want to modify.

    It is recommended to first make and test search interface changes in your sandbox organization, and then deploy them to your production organization (see Deployment Overview).

  2. In Salesforce, go to the Coveo JavaScript Search page that you want to customize and open the Interface Editor (see Accessing the Coveo Legacy Interface Editor in Salesforce).

  3. Customize the search page layout:

    1. Drag-and-drop components already in the page within their respective zones to rearrange their order.

      SFInt-InterfaceEditorDragNDropFacet1

      • Drag-and-drop Facet components to move them to a different place in the facet zone.

      • Similarly, drag-and-drop Tab components to change their order in the tab zone at the top of the search page.

    2. Add a component to the search page:

      1. From the Interface Editor, drag over the search page the icon of the component that you want to add.

        The zone where you are allowed to drop the component appears shaded.

      2. Drop the component icon over the shaded zone at the desired location.

        Dropping a component over anywhere outside the shaded zone cancels the operation.

      Drag-and-drop the icon of the Sort component from the Interface Editor to the search result header.

      SFInt-InterfaceEditorDragNDropSort1

    3. Duplicate a component in the search page:

      1. In the search page, click the component that you want to duplicate.

      2. In the Interface Editor, in the section that appears for this component, click Duplicate.

    4. Remove a component from the search page:

      1. In the search page, click the component that you want to remove.

      2. In the Interface Editor, in the section that appears for this component, click Delete.

    5. Manage in which Tabs a component appears:

      1. In the search page, click the component that you want to show or hide in some Tabs.

      2. In the Interface Editor, in the section that appears for this component, next to Use in the following tabs, turn off All tabs, and then turn on only the tabs in which you want the component to appear.

        The currently selected component appear only in the All Content and Salesforce tabs, not in the People tab.

        SFInt-InterfaceEditorUseInTab1

  4. Modify basic parameters of one or more search page common components:

    1. In the search page, click the component that you wish to modify.

    2. In the section that appears for this component in the Interface Editor, modify the value of the desired parameter(s).

      SFInt-InterfaceEditorFacetParam1

      Use auto-complete suggestions where available to easily review possible and most appropriate parameter values

      Hover a parameter name to read a description in a tool tip when available.

      The search page is immediately updated and saved to the Draft version whenever you change a parameter value.

    3. In the search page, validate that the parameter value adjustment is producing the desired change.

    4. When your customization is completed, in the Interface Editor, click Return to close the component section.

  5. Publish your changes:

    SFInt-InterfaceEditorDraft1

    1. In the Interface Editor, click Draft.

      At this point, you can close the Interface Editor. Your Draft will be saved and available when you return to the Interface Editor.

    2. Review the Last save and Last Published date and time respectively for the Draft and the Published versions.

    3. Click Publish Draft to replace the currently published search page version by your draft version.

  6. In the search interface, validate your changes behave as expected.

  7. Consider deploying your changes from the sandbox to the production organization (see Deployment Connections for Change Sets).

What’s Next?

Consider creating or modifying search result templates so that different search results (such as from different source or item types) contain optimized information (see Configuring JavaScript Search Result Templates With the Legacy Interface Editor).