Gravatar for sara.kevorkian@avanade.com

Question by sdkevorkian, Jul 5, 2018 6:25 PM

Tabs & Breadcrumbs

Is there a way to get the tab selected to show in the breadcrumbs? we have a component that would be best handled with a tab, but they would like it to display with the facets and appear in the breadcrumbs

2 Replies
Gravatar for olamothe@coveo.com

Answer by olamothe, Jul 5, 2018 6:50 PM

There is no option on the components themselves to do this out of the box, but you can use the dedicated breadcrumb events to populate the content of the breadcrumb with whatever DOM content you wish to build.

Coveo.$$(searchInterface).on('populateBreadcrumb', (e, args)=>{
  // Build any valid HTML content.
  // To get the currently selected tab, you can always use Coveo.state(searchInterface, 't')
  const myCustomHtmlElement = buildSomethingCustom();
  args.breadcrumbs.push({
    element: myCustomHtmlElement
  });
})

Another example from our documentation :

https://developers.coveo.com/display/public/JsSearch/Breadcrumb+Component#BreadcrumbComponent-populateBreadcrumb

Gravatar for sara.kevorkian@avanade.com

Comment by sdkevorkian, Jul 5, 2018 9:20 PM

great thank you! So if I want the click on this breadcrumb to direct to a certain tab, do i just make a click handler for it? do i have to initalize it within any specific event?

Gravatar for sara.kevorkian@avanade.com

Comment by sdkevorkian, Jul 5, 2018 9:34 PM

hi again, @olamothe

I have some existing logic on the populateBreadcrumb event, and so I just copy and pasted the example from the docs inside:

var dom = $('<div>My Custom Breadcrumb</div>');
args.breadcrumbs.push({
element: dom
});

and now I am getting this error. any tips?

CoveoJsSearch.Lazy.min.js:1 Uncaught TypeError: this.el.getAttribute is not a function
    at e.getAttribute (CoveoJsSearch.Lazy.min.js:1)
    at e.getClass (CoveoJsSearch.Lazy.min.js:1)
    at e.hasClass (CoveoJsSearch.Lazy.min.js:1)
    at e.addClass (CoveoJsSearch.Lazy.min.js:1)
    at Breadcrumb.minb39cb0d5044ba30842b9.js:formatted:119
    at Function.w.each.w.forEach (CoveoJsSearch.Lazy.min.js:1)
    at t.drawBreadcrumb (Breadcrumb.minb39cb0d5044ba30842b9.js:formatted:117)
    at t.handleDeferredQuerySuccess (Breadcrumb.minb39cb0d5044ba30842b9.js:formatted:148)
    at t.<anonymous> (Breadcrumb.minb39cb0d5044ba30842b9.js:formatted:158)
    at HTMLDivElement.<anonymous> (CoveoJsSearch.Lazy.min.js:1)

Gravatar for hsantos@coveo.com

Answer by Hugo Santos, Jul 5, 2018 6:29 PM

"Is there a way to get the tab selected to show in the breadcrumbs?"

There is no relation between your breadcrumb item and the Coveo components, so I'd say no. But you can always code something custom yourself to do that, it should not be that hard.

"we have a component that would be best handled with a tab, but they would like it to display with the facets and appear in the breadcrumbs"

Not sure that I understand what you mean here. What's is the relation between the tabs and facets in this case? And what problem this causes?

Gravatar for sara.kevorkian@avanade.com

Comment by sdkevorkian, Jul 5, 2018 6:35 PM

They basically want a facet of Sources with the ability to only be able to select one value at a time, with one of the values being "All". they would like the breadcrumb to show and it to display alongside the other facets.

Ask a question