Normalize Facet Value Captions

When you include facets in a search interface, you will typically want their value captions to be as clean and human-readable as possible.

Example: Normalize facet value captions

By default, most facets use their raw field values as captions. This implies that some of these captions may be unsightly. When this is the case, you can use the valueCaption option of the Facet (or DynamicFacet) component to specify your own custom facet value captions.

This article presents three different ways to normalize facet value captions:

Through the Interface Editor

When using the Interface Editor, you set custom facet value captions directly in the UI View.

Using the Interface Editor to set custom captions for the lithiumuser and sitecoreitem raw @filetype facet values.

Animation: Specifying custom facet value captions in the interface editor

In the Code View, the data-value-caption attribute of the corresponding div is updated accordingly:

<div class="CoveoFacet" data-title="FileType" data-field="@filetype" data-tab="All" data-value-caption="{&quot;sitecoreitem&quot;:&quot;Sitecore Item&quot;,&quot;lithiumuser&quot;:&quot;Lithium User&quot;}"></div>

Through Markup Configuration

You can set the valueCaption option in the markup configuration of a Facet (or DynamicFacet) component.

Statically setting custom captions for the smith_alice and jones_bob_r raw @author facet values.

<div class="CoveoFacet"
     data-title="Author"
     data-field="@author"
     data-value-caption='{ "smith_alice": "Alice Smith", "jones_bob_r": "Bob R. Jones" }'>
</div>

Through the Init or Options Call

You can set the valueCaption option of a Facet (or DynamicFacet) component in the init call of a search interface.

If the init call isn’t accessible (e.g., if you’re using the Interface Editor), consider setting valueCaptions in the options call instead.

Instead of using complex client-side logic to dynamically parse and modify facet values, consider normalizing those values at indexing time (e.g., through mappings or indexing pipeline extensions).

Dynamically setting custom captions for the smith_alice and jones_bob_r raw @author facet values.

<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <!-- ... -->
    <div id="authorFacet" class="CoveoFacet"
         data-title="Author"
         data-field="@author">
    </div>
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

document.addEventListener("DOMContentLoaded", () => {
  Coveo.init(document.getElementById("search"), {
  // Or, Coveo.options(document.getElementById("search"), { ... })
    authorFacet: {
      valueCaption: {
        "smith_alice": "Alice Smith",
        "jones_bob_r": "Bob R. Jones"
      }
    }
  });
});
Recommended Articles