---
title: Normalize facet value captions
slug: '368'
canonical_url: https://docs.coveo.com/en/368/
collection: javascript-search-framework
source_format: adoc
---
# 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.



By default, most facets use their raw [field](https://docs.coveo.com/en/200/) values as captions.
This implies that some of these captions may be unsightly.
When this is the case, you can use the [`valueCaption`](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.valuecaption) option of the [`DynamicFacet`](https://coveo.github.io/search-ui/components/dynamicfacet.html) component to specify your own custom facet value captions.

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

* [Through the Interface Editor](#through-the-interface-editor)
* [Through markup configuration](#through-markup-configuration)
* [Through the init or options call](#through-the-init-or-options-call)


> **Leading practice**
>
> Instead of using complex client-side logic to dynamically parse and modify facet values, consider normalizing these values at indexing time (for example, through [mappings](https://docs.coveo.com/en/217/) or [indexing pipeline extensions (IPEs)](https://docs.coveo.com/en/206/)).

## Through the Interface Editor

When using the Interface Editor, you set custom facet value captions directly in the [**UI View**](https://docs.coveo.com/en/1852#ui-view).



In the [**Code View**](https://docs.coveo.com/en/1852#code-view), the `data-value-caption` attribute of the corresponding `div` is updated accordingly:

```html
<div class="CoveoDynamicFacet"
     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 `DynamicFacet` component.

```html
<div class="CoveoDynamicFacet"
     data-title="Author"
     data-field="@author"
     data-value-caption='{ "Chuck": "Charlie Brown", "Lucy Vanpelt": "Lucy van Pelt", "Pigpen": "Pig-Pen" }'>
</div>
```

## Through the init or options call

You can set the `valueCaption` option of a `DynamicFacet` component in the [`init`](https://coveo.github.io/search-ui/globals.html#init) call of a search interface.

If the `init` call isn't accessible (for example, if you're using the Interface Editor), consider setting `valueCaptions` in the [`options`](https://coveo.github.io/search-ui/globals.html#options) call instead.

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

```javascript
document.addEventListener("DOMContentLoaded", () => {
  Coveo.init(document.getElementById("search"), {
  // Or, Coveo.options(document.getElementById("search"), { ... })
    authorFacet: {
      valueCaption: {
        "Chuck": "Charlie Brown",
        "Lucy Vanpelt": "Lucy van Pelt",
        "Pigpen": "Pig-Pen"
      }
    }
  });
});
```