Interface Editor

The Interface Editor allows you to easily create and customize feature-rich search interfaces.

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 (Tooltip Icon) 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 facet

Animation: Adding a 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 [Component] Creator 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 facet

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

Editing Components

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

Editing a facet

Example: Editing a facet in UI View

To edit a component

  1. Hover over the desired component instance, and then click the Edit (Edit Icon) icon that appears.
  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 facet

Animation: Deleting a facet in UI View

To delete a component

  1. Hover over the component instance, and then click the Delete (Delete Icon) icon 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 Configuring 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 does not 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 the UI Settings (UI Settings Icon) icon.
  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 (UI Settings Icon) 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 are strongly encouraged 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="CoveoFacet"
     data-title="File Type"
     data-field="@filetype"
     data-tab="All"></div>

The location of each non-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="CoveoFacet"
       data-title="File Type"
       data-field="@filetype"
       data-tab="All">
  <div class="CoveoFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoFacet"
       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="CoveoFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoFacet"
       data-title="Author"
       data-field="@author"
       data-tab="All"></div>
  <!-- The "File Type" facet is rendered last -->
  <div class="CoveoFacet"
       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="CoveoFacet"
     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="CoveoFacet"
       data-title="Type"
       data-field="@objecttype"
       data-tab="All"></div>
  <div class="CoveoFacet"
       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 are not 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>
    
  • Sending 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>