Display a facet based on the selection of another facet

This is for:

In this article

Implementation example

To display a facet based on the selection of another facet, you can use the dependsOn property of the QuanticFacet, QuanticCategoryFacet, QuanticDateFacet, QuanticNumericFacet, or QuanticTimeframeFacet component. This is useful when you want to filter options in one facet based on the selection made in another facet. For example, if you have a facet for Category and another for Subcategory, you can use the dependsOn property to display only the relevant subcategories based on the selected category.

At present, dependencies can only be set on a basic (QuanticFacet) or category (QuanticCategoryFacet) facet. Dependencies on numeric (QuanticNumericFacet), timeframe (QuanticTimeframeFacet), and date (QuanticDateFacet) facets aren’t supported.

The dependsOn property is an object that contains two values:

parentFacetId: The ID of the parent facet that the child facet depends on.
expectedValue (optional): The value that must be selected in the parent facet for the child facet to be displayed. If omitted or set to undefined, the child facet displays whenever any value is selected in the parent facet.

Implementation example

The following example shows how to implement conditional facets by creating a parent facet and a dependant child facet that appears based on the parent’s selection.

HTML file

<!-- myComponent.html -->
<c-quantic-facet
    facet-id="mySource" 
    field="source"
    label="Source"
    engine-id={engineId}
></c-quantic-facet>

<c-quantic-facet
    facet-id="myFileType" 
    field="filetype"
    label="File Type"
    engine-id={engineId}
    depends-on={facetDependency} 
></c-quantic-facet>

	Create a parent facet (`mySource`) and a child facet (`myFileType`) in your component.
	Set the `depends-on` attribute (corresponding to the `dependsOn` property) of the child facet to an object containing the ID of the parent facet and, optionally, the expected value from the parent facet.

JavaScript file

// myComponent.js
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    facetDependency = {
        parentFacetId: 'mySource', 
        expectedValue: 'desiredValue' 
        // Replace with an actual value from the parent facet.
    };
}

	Set the `parentFacetId` object value to the ID of the parent facet that the child facet depends on.
	Set the `expectedValue` object value to the value that must be selected in the parent facet for the child facet to be displayed. If omitted or set to `undefined`, the child facet displays whenever any value is selected in the parent facet.