Define dependent facets

This is for:

Developer

The dependsOn and dependsOnCondition options let you define relationships between facets, so that a dependent facet will only appear when the end user interacts with its specified parent facet.

Example 1: Display a facet whenever any value is selected in its parent

You want to display the Book subgenre facet whenever any value is selected in the Book genre facet.

In such a simple case, all you have to do is set the dependsOn option in the markup configuration for the dependent facet.

<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicFacet"
        data-title="Book genre"
        data-field="@bookgenre"></div>
    <div class="CoveoDynamicFacet"
        data-title="Book subgenre"
        data-field="@booksubgenre"
        data-depends-on="@bookgenre"></div>
  </div>
  <!-- ... -->
</div>

Example 2: Display a facet only when a specific value is selected in its parent

Coveo JavaScript Search Framework 2.7610 (April 2020)

You want to display the Book genre facet only when the currently selected value in the Product type facet is Book.

Here the dependent facet (that is, Book genre) should only appear when its parent facet (that is, Product type) is in a certain state. To achieve this, you must set the dependsOnCondition option for the dependent facet in the init call of your search interface.

The dependsOnCondition option expects a function as a value. This function will always receive the parent facet instance as an argument, and must return a Boolean value.

<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicFacet"
         data-title="Product type"
         data-field="@producttype"></div>
    <div id="book_genre_facet"
         class="CoveoDynamicFacet"
         data-title="Book genre"
         data-field="@bookgenre"></div>
  </div>
  <!-- ... -->
</div>

document.addEventListener("DOMContentLoaded", () => {
  const root = document.getElementById("search");
  Coveo.init(root, {
    book_genre_facet: {
      dependsOn: "@producttype",
      dependsOnCondition: (parentFacet) => {
        const id = parentFacet.options.id;
        const value = "Book";
        const selected = parentFacet.queryStateModel.get(`f:${id}`)
        return selected.includes(value);
      }
    }
  });
  // ...
});

Example 3: Display a facet only when a specific hierarchical value is selected in its parent

Coveo JavaScript Search Framework 2.7610 (April 2020)

You want to display the Processor facet only when the Electronics > Computers hierarchical value is selected in the Product category facet.

This is similar to Example 2, except in this case the value to match is a hierarchical one.

<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicHierarchicalFacet"
         data-title="Product category"
         data-field="@productcategory"></div>
    <div id="processor_facet"
         class="CoveoDynamicFacet"
         data-title="Processor"
         data-field="@processor"></div>
  </div>
  <!-- ... -->
</div>

document.addEventListener("DOMContentLoaded", () => {
  const root = document.getElementById("search");
  Coveo.init(root, {
    processor_facet: {
      dependsOn: "@productcategory",
      dependsOnCondition: (parentFacet) => {
        const id = parentFacet.options.id;
        const value = "Computers;";
        return parentFacet.queryStateModel.get(`f:${id}`).includes(value);
      }
    }
  });
  // ...
});

Example 4: Defining multiple dependent facets with conditions

Coveo JavaScript Search Framework 2.7610 (April 2020)

You want to display different facets depending on the currently selected values in the Object type facet:

  • Display the Case status facet only when the Case value is selected.
  • Display the Opportunity stage facet only when the Opportunity value is selected.
  • Display the Lead source facet only when the Opportunity and/or Contact values are selected.

Here, using a higher level function to set the various dependsOnCondition will avoid code duplication.

<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="coveo-facet-column">
    <div class="CoveoDynamicFacet"
         data-id="sf-objecttype"
         data-title="Object type"
         data-field="@objecttype"></div>
    <div id="case_status_facet"
         class="CoveoDynamicFacet"
         data-title="Case status"
         data-field="@sfstatus"></div>
    <div id="opportunity_stage_facet"
         class="CoveoDynamicFacet"
         data-title="Opportunity stage"
         data-field="@sfopportunitystagename"></div>
    <div id="lead_source_facet"
         class="CoveoDynamicFacet"
         data-title="Lead source"
         data-field="@sfleadsource"></div>
  </div>
  <!-- ... -->
</div>

document.addEventListener("DOMContentLoaded", () => {
  function isAnySelectedInParent(values) {
    return (parentFacet) => {
      const id = parentFacet.options.id;
      const selected = parentFacet.queryStateModel.get(`f:${id}`)
      const matches = values.map((value) => selected.includes(value));
      return matches.some((element) => element === true);
    }
  }

  const root = document.getElementById("search");
  Coveo.init(root, {
    case_status_facet: {
      dependsOn: "sf-objecttype",
      dependsOnCondition: isAnySelectedInParent(["Case"])
    },
    opportunity_stage_facet: {
      dependsOn: "sf-objecttype",
      dependsOnCondition: isAnySelectedInParent(["Opportunity"])
    },
    lead_source_facet: {
      dependsOn: "sf-objecttype",
      dependsOnCondition: isAnySelectedInParent(["Contact", "Opportunity"])
    }
  });
  // ...
})

Defining multiple dependent facets