JavaScript Search Interface Editor

Coveo for Salesforce 2.26 - July 2016 

The Coveo JavaScript Search Framework allows you to create feature-rich search interfaces. The framework bundled with Coveo products such as Coveo for Salesforce (see Coveo for Salesforce) or Coveo Cloud V2 hosted search pages includes a built-in Interface Editor with which you can easily customize search interfaces.

Coveo for Salesforce 2.26 - July 2016  The new Interface Editor is described in this topic. Prior Coveo for Salesforce versions included a Legacy Interface Editor (see JavaScript Search Legacy Interface Editor Overview).

The Interface Editor lets you directly interact with the search interface that you are customizing so you can immediately see the effect of each change (see Accessing the Coveo Interface Editor).

IntEdit2-Overview1

The following sections briefly present what you can do with the Interface Editor.

Drag-and-Drop to Add a User Interface Component

You can add user interface components such as facets and tabs simply by dragging and dropping them from the vertical components menu on the right to the location where you want them in the interface.

IntEdit2-DragDrop1

Many components can only be added in particular search interface areas. As you drag a component over the interface, the area where you can insert the component automatically appears so you can easily see where a component can be dropped.

You can only drop a Sort component in the sort section appearing by default at the top-right of the search results.

Dropping a component over an non applicable area cancels the operation.

Delete a User Interface Component

Once a component is present in the search interface, you can easily remove it.

IntEdit2-DeleteComponent1

The File Type facet that was automatically included when the search page was created is not useful because all items have the same file type. You want to remove this useless facet.

  1. In the Interface Editor, bring the cursor over the component that you want to remove.

    The four component corners are highlighted and the available controls appear.

  2. Click the Delete icon (Icon-GarbageBlack).

  3. In the Delete a Component panel, click Yes to confirm the deletion.

Customize a User Interface Component

Once a visible component is present in the search interface, you can easily customize its available options.

IntEdit2-EditFacet1

  1. In the Interface Editor, bring the cursor over the component that you want to customize.

    The four component corners are highlighted and the available controls appear.

  2. Click the Edit icon (Icon-Edit2).

  3. In the panel that appears, review and adjust available options as needed.

    Refer to the developer documentation for details on the available components and their options (see Coveo Search UI Documentation).

  4. Click Save to immediately see the effect of the changes.

Add a UI Settings Component

Several Coveo JavaScript Search Framework (required or optional) components do not, or do not always have visible elements so you cannot drag and drop them to a specific location. You can however add such optional components from the UI Settings.

IntEdit2-AddInvisibleComp1

  1. In the Interface Editor upper-left corner, click the UI Settings icon (Icon-AC8_Settings).

  2. In the Select a setting drop-down menu, select a component to add.

  3. In the configuration panel(s) of the selected component:

    1. Configure the desired options.

      Refer to the developer documentation for details on the available components and their options (see Coveo Search UI Documentation).

    2. Click Save or OK depending on the added component.

  4. Test the effect of the added component.

Customize a UI Settings Component

You can always customize the settings of required or optional UI Settings components present in your search interface.

  1. In the Interface Editor upper-left corner, click the UI Settings icon (Icon-AC8_Settings).

  2. Under the Select a setting box, select a component to customize.

  3. In the configuration panel(s) of the selected component:

    1. Configure the desired options.

      Refer to the developer documentation for details on the available components and their options (see Coveo Search UI Documentation).

    2. Click Save or OK depending on the added component.

  4. Test the effect of the customized component.

Delete Custom UI Settings Components

Required UI Settings components (such as Search Interface, Analytics, Result list, and Result templates) must be present in your search interface and cannot be deleted. However, you can always delete custom UI Settings components that were added.

  1. In the Interface Editor upper-left corner, click the UI Settings icon (Icon-AC8_Settings).

  2. Under the Select a setting box, locate and click the Delete icon (Icon-GarbageBlack) next to the component that you want to delete.

Visualize How Your Search Interface Appears With Several Device Screen Sizes

Your end-users most probably access your search interface on various devices equipped with a wide range of screen sizes. You can check how your search interface appears with several typical screen sizes directly in the Interface Editor.

  • In the Interface Editor upper-left corner, click the icon of the device screen size for which you want to visualize your search interface appearance.

    IntEdit2-SelectDevice1

    The search interface appears in a window of the corresponding width.

View and Customize the Search Interface Source Code

You may want to make some customization that cannot be done from the Interface Editor user interface. If you have some developer skills, you can look at the search page HTML and make changes directly in the code.

IntEdit2-CodeView1

  1. In the Interface Editor upper-right corner, click the Code View tab.

  2. In the HTML code, make the desired changes.

    Your search interface contains only one tab. You do not really need the tab section at the top of the interface that takes place for nothing. You delete the following div:

     <div class="coveo-tab-section">...</div>
    
  3. In the upper-right corner, click the UI View tab to visualize the effect of your changes.

Put Your Changes in Production

Once you are happy with the changes you made in the Interface Editor, you may make your customized search interface available to your end-users.

  1. In the Interface Editor upper-right corner, click Save.

  2. In the administration console Search Pages page that appears, click the link to your page to access the page, and validate that your changes are effective.