Request specific facet range values

This is for:

Developer
In this article

When configuring a FacetRange (or DynamicFacetRange) component, you can use the ranges option to request specific range values instead of letting the index automatically generate range values.

  • You can only request range values for numeric and date fields (for example, @size, @date, etc.).

  • You can request overlapping range values (for example, 0..100 and 50..100).

  • The index can’t automatically generate range values for dynamic fields resulting from query functions. In such a case, you must use the ranges option.

  • Automatic range generation isn’t currently supported by the pilot DynamicFacetRange component.

Consider the following markup configuration:

<body id="search" class="CoveoSearchInterface">
  <div id="fileSizeFacetRange" class="CoveoFacetRange"
       data-title="File size"
       data-field="@size">
  </div>
  <div id="lastUpdatedFacetRange" class="CoveoFacetRange"
       data-title="Last updated"
       data-field="@date"
       data-date-field="true">
  </div>
</body>
  • You can request specific ranges for these two FacetRange components by passing arrays of IRangeValue in the init (or options) call of your search interface (see Configuring Components).

    document.addEventListener("DOMContentLoaded", () => {
      const myNumericRanges = [
        { start: 0, end: 1000, endInclusive: true, label: "0 - 1,000" },
        { start: 1001, end: 5000, endInclusive: true, label: "1,001 - 5,000" },
        { start: 5001, end: 10000, endInclusive: true, label: "5,001 - 10,000" }
      ];
      const myDateRanges = [
        { start: "2017-01-01", end: "2017-12-31" },
        { start: "2018-01-01", end: "2018-12-31" },
        { start: "2019-01-01", end: "2019-12-31" }
      ];
      const root = Coveo.$$(document).find("#search")
      Coveo.SearchEndpoint.configureSampleEndpointV2();
      Coveo.init(root, {
        fileSizeFacetRange: { ranges: myNumericRanges },
        lastUpdatedFacetRange: { ranges: myDateRanges }
      });
    });
    

    Requesting FacetRange Values Statically

  • You can also pass dynamically evaluated values.

    document.addEventListener("DOMContentLoaded", () => {
      function getISODateString(baseDate, offset={year: 0, month: 0, date: 0}) {
        let offsetDate = new Date(baseDate);
        offsetDate.setUTCFullYear(baseDate.getUTCFullYear() + offset.year);
        offsetDate.setUTCMonth(baseDate.getUTCMonth() + offset.month);
        offsetDate.setUTCDate(baseDate.getUTCDate() + offset.date);
        return offsetDate.toISOString();
      }
      const now = new Date();
      const myDateRanges = [
        {
          start: getISODateString(now, { year: -5, month: 0, date: 0 }),
          end: getISODateString(now),
          label: "In the last 5 year"
        },
        {
          start: getISODateString(now, { year: 0, month: -6, date: 0 }),
          end: getISODateString(now),
          label: "In the last 6 months"
        },
        {
          start: getISODateString(now, { year: 0, month: 0, date: -14 }),
          end: getISODateString(now),
          label: "In the last 2 weeks"
        }
      ];
      const root = Coveo.$$(document).find("#search")
      Coveo.SearchEndpoint.configureSampleEndpointV2();
      Coveo.init(root, {
        lastUpdatedFacetRange: { ranges: myDateRanges }
      });
    });
    

    Requesting FacetRange Values Dynamically

    If you only want to output a set of standard dynamic date values (that is, all dates, within last day, withing last week, within last month, and within last year), consider using the TimespanFacet component instead.

  • Rather than specifying a ranges array in the init (or options) call of your search interface, you can pass a JSON string directly in the component markup configuration. While this approach is arguably simpler, it doesn’t support dynamically evaluated values.

    <div class="CoveoFacetRange"
         data-title="File size"
         data-field="@size"
         data-ranges='[{"start":0,"end":1000},{"start":1000,"end":5000},{"start":5000,"end":10000}]'>
    </div>
    

    Requesting FacetRange Values Statically Using Markup Configuration