Use the Classic Interface Editor

Build a Search UI Coveo Relevance Cloud Developer Product Documentation

The Interface Editor is a reliable, time-tested tool. However, we recommend that you use the Interface Editor only when instructed to by the documentation. If you aren’t, you may want to try the new search interface builder instead. Thanks to its intuitive design, you can quickly create a search interface for test and demo purposes. Search interfaces created with the new builder are also hosted by Coveo, which makes them immediately operational.

The Interface Editor lets you create and customize feature-rich search interfaces using the Coveo JavaScript Search Framework. Since there are newer alternatives to the Framework, we recommend that you use the Interface Editor only when instructed to by the documentation.

The Interface Editor is available through the Search Pages (platform-ca | platform-eu | platform-au) page of the Coveo Administration Console.

UI View

The UI View provides a WYSIWYG editor useful for designing and testing search interfaces. This view is selected by default when you access the Interface Editor.

In UI View, hover over a Tooltip icon to get detailed reference information regarding a component or an option.

Animation: Hovering the Enable query suggestions tooltip

Adding Components

You can add components (Tabs, Facets, etc.) to a search interface by drag-and-dropping them in the page.

Adding a dynamic facet

Animation: Adding a dynamic facet in UI View

To add a component

  1. On the right-hand side, from the list of Components, drag the desired component and drop it where it should appear in the page. You can always move the component later.

  2. In the panel that appears, configure the required component settings, and then click OK.

    The component is added and automatically selected in edit mode.

  3. (Optional) Further customize the component using the available panels. You can always edit the component later.

  4. Click Apply.

Moving Components

Any search interface component you can add through drag-and-drop can be moved in the same fashion.

Moving a dynamic facet

Animation: Drag-and-Dropping an Existing Dynamic Facet in UI View

Editing Components

You can select a component and enter edit mode to review and modify its current configuration.

Editing a dynamic facet

Example: Editing a dynamic facet in UI View

To edit a component

  1. Hover over the desired component instance, and then click Edit.

  2. Use the available panels to make the desired modifications, and then click Apply.

Deleting Components

Any search interface component you can add through drag-and-drop can also be removed.

Deleting a dynamic facet

Animation: Deleting a dynamic facet in UI View

To delete a component

  1. Hover over the component instance, and then click Delete that appears.

  2. In the Delete a component dialog, click Yes.

Managing Result Templates

When editing a result template, you can add, move, edit, and delete result template components (Field Value, Icon, etc.), just as you would with other search interface components (Facet, Tab, etc.). You can also visually edit result template cells and rows.

For more detailed information and examples, see Configure Search Result Templates.

Designing a YouTube result template

Animation: Designing a YouTube result template in UI View

Editing the No Results Page

You can customize the content that gets displayed when a query doesn’t return any results.

  • Editing the no results message

    Animation: Editing the no results message

  • Adding a custom HTML section to the no results message

    Example: Adding a custom HTML section to the no results message

    Example: A custom no results message

To edit the no results page

  1. On the upper-left corner, click UI-Settings.

  2. Select Edit no results page.

  3. In the Query Summary Options panel that appears, enter the desired text in the Message to display input. You can use ${query} to insert the current query expression in the message (e.g., ${query}, you say? Sorry, no results!).

  4. (Optional) Set additional options as desired, possibly including a custom HTML section.

  5. Click Apply.

Editing Other Settings

You can configure additional basic search interface options through the UI Settings () menu.

Modifying search interface and result list settings

Animation: Modifying search interface and result list settings in **UI View**

Code View

Each modification you make in the UI View has an impact on the underlying markup configuration of the search interface. This markup configuration can be accessed by selecting the Code View.

If you plan on using the Code View extensively, you’re strongly encouraged to do the JavaScript Search Framework Tutorial to get a better understanding of the framework.

Basics

Drag-and-dropping a new facet as shown in the Adding Components example generates the following markup:

<div class="CoveoDynamicFacet"
     data-title="File Type"
     data-field="@filetype"
     data-tab="All"></div>

The location of each dynamic facet in a search interface is determined by its position in the div with the coveo-facet-column class:

<div class="coveo-facet-column">
  <!-- The "File Type" facet is rendered first -->
  <div class="CoveoDynamicFacet"
       data-title="File Type"
       data-field="@filetype"
       data-tab="All">
  <div class="CoveoDynamicFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoDynamicFacet"
       data-title="Author"
       data-field="@author"
       data-tab="All"></div>
</div>

Therefore, drag-and-dropping a facet to a new location as shown in the Moving Components example updates its position in the markup:

<div class="coveo-facet-column">
  <div class="CoveoDynamicFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoDynamicFacet"
       data-title="Author"
       data-field="@author"
       data-tab="All"></div>
  <!-- The "File Type" facet is rendered last -->
  <div class="CoveoDynamicFacet"
       data-title="File Type"
       data-field="@filetype"
       data-tab="All">
</div>

Modifying the configuration of a facet as shown in the Editing Components example sets or updates the corresponding data-prefixed markup attributes:

<!-- The "File Type" facet has a new "data-number-of-values" attribute -->
<div class="CoveoDynamicFacet"
     data-title="File Type"
     data-field="@filetype"
     data-tab="All"
     data-number-of-values="3">

Removing a facet as shown in the Deleting Components example deletes its corresponding div entirely:

<div class="coveo-facet-column">
  <!-- The "File Type" facet is gone -->
  <div class="CoveoDynamicFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoDynamicFacet"
       data-title="Author"
       data-field="@author"
       data-tab="All"></div>
</div>

Leveraging New and Advanced Features

The Code View is especially useful when you want to leverage JavaScript Search Framework components and options that aren’t fully supported by the UI View.

Executing Custom JavaScript Code

In Code View, you can add script tags, typically after the closing div of the element with the CoveoSearchInterface class, to execute custom code.

  • Passing component options before the init call

    <div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-search-section">
    <div class="CoveoSearchbox"></div>
  </div>
  <!-- ... -->
</div>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  Coveo.options(document.getElementById("search"), {
    Searchbox: {
      enablePartialMatch: true,
      partialMatchKeywords: 3,
      partialMatchThreshold: "35%"
    }
  });
});
</script>

  • Send custom context information

    <div id="search" class="CoveoSearchInterface">
  <script type="text/context" class="CoveoPipelineContext"></script>
  <!-- ... -->
</div>
 
<script>
document.addEventListener("afterInitialization", () => {
  const context = Coveo.get(document.querySelector(".CoveoPipelineContext"));
  context.setContext({ "userRole": getUserRole() })
 
  function getUserRole() {
    // Implementation ...
  }
});
</script>

Limitation

Component options can’t be set in the init function call of a classic hosted search page; you must rather pass component options before the init call.

Required Privileges

The following table indicates the privileges required to view or edit elements of the Search Pages (platform-ca | platform-eu | platform-au) page and associated panels, such as the Interface Editor (see Manage Privileges and Privilege Reference).

Action Service - Domain Required access level
View search pages

Organization - Organization

Search - Search Pages

 View
Edit search pages Organization - Organization View
Search - Search Pages Edit
Edit and make queries Search - Search Pages Edit
Search - Execute queries Allowed