Gravatar for paldrich@ascedia.com

Question by Paul Aldrich, Jan 25, 2018 4:43 PM

Issues with managing breadcrumbs for a custom facet

Using Hive, CfS 4.1.82.12. I have a custom component with start and end date fields for filtering search results, both pointing to a custom date field. I have breadcrumbs populating when I select a date in my custom facet / component. However I am experiencing the following issues:

  1. Breadcrumbs generated (manually) by my custom component cannot be cleared out. Clicking the "Clear" button clears out breadcrumbs for other facet selections, but not for my custom facet.
  2. Breadcrumbs duplicate when I select a date more than once. I think my issue is that I don't know how to selectively update or delete breadcrumbs (i.e just one). Also, since args.breadcrumbs is empty when I make my 2nd date selection, I can't check that and update or delete the existing breadcrumb of the same type.

Code: https://jsfiddle.net/3o8pg0wa/1/

I found this, and I was able to use some of the code from it, but I'm not sure where to go from here. I'm pretty sure the Clear button does a `breadcrumb.clearBreadcrumbs();` which doesn't even clear mine out if I run it from the console.

1 Reply
Gravatar for paldrich@ascedia.com

Answer by Paul Aldrich, Jan 29, 2018 7:17 AM

First, I didn't register or handle the `clearBreadcrumbs` event, so when I cleared breadcrumbs for my custom facet nothing was happening. I registered the event in the constructor and when triggered I ran some code like this:

AOPADateRangePickerFacet.prototype.handleClearBreadcrumb = function (coveoClass) {  // Clear out textboxes  $(coveoClass.startDateField).val('');  $(coveoClass.endDateField).val('');  // Clear out state     coveoClass.clearState(coveoClass);  }

My clearState function:

AOPADateRangePickerFacet.prototype.clearState = function (coveoClass) {  coveoClass.bindings.searchInterface.element.Coveostate.set('f:@aoparesultdate:range', []);  coveoClass.bindings.queryController.executeQuery();  }

For the second issue, the main issue was that I was registering the buildingQuery event in processQueryChange, meaning that it was happening every time one of the dates changed. So I moved that event registration to the constructor and made a bunch of other updates. Long story short, here's the updated code that works: https://jsfiddle.net/7m7e5q90/

Ask a question