Gravatar for matt.kim@willistowerswatson.com

Question by mkkim, Nov 7, 2018 9:19 PM

How to use custom range in Coveo Hive Date Facet Range?

Hello -

We are trying to use a Date Facet Range on a datetime field to produce a Facet with options of the following format: "X days old", "greater than X days old", "X years old", etc.

I see the Facet value ranges field, but am unable to select anything other than 'Automatically generated date ranges' and using the data-ranges attribute does not seem to work.

Previously, we were using a script of the following format:

Coveo.$(function () {
            var facetOptions = @Html.Raw(new MyClass.Custom.Coveo.Concrete.FacetRangeOptions().GetFacetRangeOptions(Model))
            CoveoForSitecore.componentsOptions = Coveo.$.extend({}, CoveoForSitecore.componentsOptions, facetOptions);
});

But this does not seem transferable to Hive framework, nor does a direct manipulation of the data-ranges attribute.

What is the recommended way of going about this?

Thank you

1 Reply
Gravatar for flguillemette@coveo.com

Answer by François Lachance-Guillemette, Nov 7, 2018 9:48 PM

With Coveo for Sitecore Hive, you have multiple ways of doing this. I think you need the "dynamic" way, but I will also explain the "static" way for future references.

----

Dynamic ranges

You might want to generate ranges using the current date.

In this case, you need to use JavaScript for that. You can leverage the `Using JavaScript` part of the Translating Fields to the Coveo Format page and set the data attribute directly on the Facet Range.

For instance, the following code will set the `data-ranges` attribute on a facet with the "myrange" ID.

var myFacetRange = document.getElementById("myrange");
myFacetElement.dataset.ranges = [{"start": 0, "end": 100, "label": "0 - 100", "endInclusive": false}, {"start": 100, "end": 200, "label": "100 - 200", "endInclusive": false}]

This example is fetched from the `ranges` attribute of the FacetRange component from the JavaScript Search Framework.

The IRangeValue interface defines what attributes you can set in each of the elements contained the array.

Note that it is possible to output this range using MVC calls, similar to what you have in your example:

var myFacetRange = document.getElementById("myrange");
myFacetElement.dataset.ranges = @Html.Raw(GetRangesForModel(Model))

This would require you to change your back-end method, but it is still way simpler than it used to be with the Legacy UI.

----

Static Ranges

Coveo for Sitecore Hive provides items that are used to generate static ranges.

  1. Right-Click on an item in the content tree and select Insert > Insert from template.
  2. Under Coveo Hive > Custom Ranges Parameter, select Custom Date Ranges (or Custom Numeric Ranges for numeric values)
  3. Change the name to something useful like Years Ranges.
  4. Under this newly created item, insert a new Date Range item.
  5. Change the years and labels of this new item.
  6. Insert as many Date Range item as you need
  7. You can now select "Years Ranges" item from the dropdown instead of Automatically generate date ranges.

----

Let me know if this is the direction that you needed to implement your own range.

Gravatar for matt.kim@willistowerswatson.com

Comment by mkkim, Nov 8, 2018 5:35 PM

Hi @François Lachance-Guillemette -

Thank you for a speedy reply. The proposed dynamic solution is very much what we are looking for; however, I am having trouble getting it to behave properly. Here is my current code:

@{ 
    var today = System.DateTime.Now;
    var genesis = new DateTime(1, 1, 1);
}
<div>
    @Html.Coveo().RenderErrorSummary(Model.ValidateModel())
    @if (Model.IsConfigured)
    {
        @Html.Partial(Partials.DEBUG_INFORMATION, Model)
        <div id='@Model.Id'
             data-ranges='[{"start": @genesis, "end": @today, "label": "0 - 100", "endInclusive": false}]'
             class="@Model.CssClass"
             @foreach (var property in @Model.RawProperties) { @: data-@(property.Key)='@(property.Value)'
             }>
        </div>
        @Html.Partial(Partials.TOOLTIP, Model.Tooltip);
    }
</div> 

Yet the Facet range continues to display automatically generated ranges.

Is there a step I have missed, or specific syntax with datetime types that I am overlooking?

Thank you

Ask a question