---
title: Create a custom caption provider for facets
slug: latest-create-custom-caption-provider-component
canonical_url: https://docs.coveo.com/en/quantic/latest/usage/create-custom-caption-provider-component/
collection: quantic
source_format: adoc
---
# Create a custom caption provider for facets
This tutorial provides detailed instructions on how to create and connect a custom caption provider component to a Quantic [search interface](https://docs.coveo.com/en/2741/).
Creating a custom caption provider component is recommended when, for example, you want to override many [facet](https://docs.coveo.com/en/198/) captions at once.
In a nutshell, this article covers the following tasks:
- [Identify the facet values to translate](#identify-the-facet-values-to-translate)
- [Create custom labels in Salesforce](#create-custom-labels-in-Salesforce)
- [Create a custom caption provider component](#create-a-custom-caption-provider-component)
- [Connect the caption provider to the search page](#connect-the-caption-provider-to-the-search-page)
- [Validate everything works as expected](#validate-everything-works-as-expected)
## Sample use case
You create a Quantic search page with facets displaying textual values.
Suppose you want to translate the search page in a different language, then it would make sense to translate the facet values too.
The [`QuanticFacetCaption`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-facet-caption/) component can be used to easily configure custom captions for the [`QuanticFacet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-facet/) and [`QuanticCategoryFacet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-category-facet/) components.
However, the `QuanticFacetCaption` component overrides only one caption at a time.
Creating a custom caption provider component is therefore a better option when:
- You want to override many captions at once.
- You want to leverage Salesforce custom labels.
- You're required to use custom logic for formatting captions.
- You want to share the same set of captions across many facets.
## Identify the facet values to translate
The first aspect to consider when creating a custom caption provider component is to identify the facet values that need to be overridden.
Assess if values require translation or correction.
To translate values, identify which languages should be supported.
> **Tip**
>
> A custom caption provider is meant to provide a finite set of captions.
> You can apply custom formatting to the facet values, but the facet values must be known beforehand.
For this article, we will use the example of a facet on the `filetype` field with the values listed in the following table:
[Attributes]
|===
|Facet value |Expected caption
|`html`
|Web page
|`jpg`
|JPEG image
|`png`
|PNG image
|`txt`
|Text file
|`zip`
|Compressed file
|===
> **Note**
>
> Instead of showing the file extension, we want to show the application name.
## Create custom labels in Salesforce
Next, the following custom labels must be created in Salesforce.
[Attributes]
|===
|Description |Name |Value
|Filetype html
|filetype_html
|Web page
|Filetype jpg
|filetype_jpg
|JPEG image
|Filetype png
|filetype_png
|PNG image
|Filetype txt
|filetype_txt
|Text file
|Filetype zip
|filetype_zip
|Compressed file
|===
To create custom labels
. From Setup, enter `custom labels` in the Quick Find box, and then select **Custom Labels**.
. Click the **New Custom Label** button.
. On the **New Custom Label** page, specify values for the **Short Description**, **Name**, and **Value** fields.
. Click **Save**.
. Repeat these steps for each custom label.
## Create a custom caption provider component
Once the custom labels have been created in Salesforce:
. [Create a custom caption provider LWC component](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_introduction) that references your custom labels.
Use a descriptive name such as `filetypeCaptionProvider`.
**Example**
**filetypeCaptionProvider.html**
```html
```
**filetypeCaptionProvider.js**
```typescript
import { api, LightningElement } from 'lwc';
import html from '@salesforce/label/c.filetype_html'; <1>
import jpg from '@salesforce/label/c.filetype_jpg';
import png from '@salesforce/label/c.filetype_png';
import txt from '@salesforce/label/c.filetype_txt';
import zip from '@salesforce/label/c.filetype_zip';
export default class FiletypeCaptionProvider extends LightningElement {
labels = { <2>
'html': html,
'jpg': jpg,
'png': png,
'txt': txt,
'zip': zip,
};
@api get captions() { <3>
return this.labels;
}
}
```
<1> Custom labels must be imported using static import.
It's not yet possible to dynamically import labels.
<2> `labels` is a dictionary representing the set of facet values (keys) and their corresponding caption.
The imported custom labels return the localized value according to the user language.
<3> The `captions` property is called by the Quantic facets to retrieve the mappings required to replace a facet value by the right caption.
. [Deploy the custom caption provider component](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_project_commands_unified.htm#cli_reference_project_deploy_start_unified) to Salesforce.
## Connect the caption provider to the search page
The final step involves adding the newly created custom caption provider component to your existing search page.
To do so, modify your search page component markup to reference the new `filetypeCaptionProvider` component as follows:
. Make sure the facet on the `filetype` field looks like this:
```xml
```
. Add the `filetypeCaptionProvider` component this way:
```xml
```
. [Deploy the modified search page component](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_project_commands_unified.htm#cli_reference_project_deploy_start_unified) to Salesforce.
## Validate everything works as expected
At this point, the custom caption provider is in place, and it should be functioning properly.
To confirm that everything is working as expected, validate the following:
- The custom captions are visible on the facet.
- Custom captions are used in facet search.
- When selecting a facet value with a custom caption, the same custom caption is displayed in the [breadcrumb](https://docs.coveo.com/en/2731/) manager (see [`QuanticBreadcrumbManager`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-breadcrumb-manager/)).