A facet represents a characteristic of a piece of content. It can help users refine their search. When a facet is assigned to a piece of content, it allows you to set up a filter so the end user can filter their search results by facets. In other words, this component provides a set of tools to filter the results. To add a facet filter to the UI, use a Refinement Lists component. Users can filter on multiple facets at the same time.

In the sample below, each checkbox represents a facet. Each piece of content is relevant to at least one of those facets. In this example, selecting the Chatbot facet would filter a user’s initial search results to retrieve only the search results relevant to the Inbenta Chatbot module.


This is how you create this component:

sdk.filterComponent('facet', target: filterOptions: Object);


By default, this component looks like this:

However, you can configure it according to your needs. For example, you could also configure it to be displayed as a range slider if you want the user to be able to filter results for a certain price range.


The following options can be set in this component:

Name Type Default Description
attributeName String The attribute name to refine on.
limit Number 10 The number of values to display
nullFacetString String '' The label of the null value refinement. Does not show if empty.
operator 'and' or 'or' 'or' Apply operator on refinement
sortBy Array ['isRefined:desc', 'count:desc', 'name:asc'] The sorting strategy for the refinement values. Available values are 'count:asc', 'count:desc', 'isRefined:asc', 'isRefined:desc', 'name:asc' and'name:desc'.
showFacetCount Boolean true Show the count for each facet values
templates Object The templates to override the default render behavior. See further information about templates here.
templates.item String | (Object) => String Item template, provided with:
  • count: The total number of results that contain the facet.
  • value: The name of the facet.
transformData Function (object) => object Function to transform the object sent to the view


This component uses the following labels:

Name Default Description
REFINEMENT_LISTS_SHOW_MORE Show more The text for the "show more filters" option
REFINEMENT_LISTS_SHOW_LESS Show less The text for the "show less filters" option


Basic example using the results component Store, through the linkTo method:
<div id="colour-filters"></div>
<div id="results"></div>

  var results = sdk.component('results', '#results');
  var colorRefinement = sdk.filterComponent('facet', { attributeName: 'COLOUR' });
  var colorFilter = sdk.component('refinement-lists', '#colour-filters', {
    refinements: [
      { component: colorRefinement, headerText: 'Colour filter' }