Pre-filtering facet with the configure widget

[corentin-gautier]

Hi! I have a documentation issue on Angular-InstantSearch, I could not find what I was looking for which is:

Is there a way to set a pre-filter using the configure widget ?

Here's what I mean: I want to filter my list on a specific facet value at runtime. I'm using the configure widget by passing the facetFitlters property like so: [FACET_NAME:facetValue]. The result is a correctly filtered list BUT my facet on the refinement list is not active and I also only get this facet value, not the whole set of values.

I would want the same behaviour as a user refining the list by clicking on a facet value, but do that when I setup the list. Currently the only way I've found to do this is by first showing all results then calling refine on the ais-refinement-list with the facet value i want.

// What I would want to do
// this.searchParams = {
//   analytics: true,
//   hitsPerPage: 36,
//   facetFilters: ['FACET_NAME:' + facetValue]
// };
// What I ended up doing
 this.refinementList.state.refine(facetvalue);

[Haroenv]

That makes sense, we actually have a feature for that in React InstantSearch that we want to expand, called defaultRefinement (maybe changing that name to initialRefinement).

Your workaround seems to be a good way around not having this feature yet. I'd expect Configure to also visually refine the item

see for example line

https://github.com/algolia/angular-instantsearch/blob/faa8251370c7cb0fa4636331c9de5defdff3d64c/src/refinement-list/refinement-list.ts#L48

Which implies that isRefined is coming from the connector, and thus the search state. Not sure what's causing this list to break.

[corentin-gautier]

@Haroenv yes, initialRefinement would be great. Do you know if the angular development of this feature has been scheduled ? (since it already exists in react).

[Haroenv]

This is something that will come at some point, but I can't make a promise on timeline.

If someone is interested in contributing on that, it would come from the InstantSearch.js connectors to all accept this option.

[ValentinFunk]

We do it like this: we add the field to the searchParameters.facets of the options object. We then have a searchFunction that skips the initial search. In afterViewInit() we then apply the inital filtering to the helper directly (helper.addFacetRefinement('color', 'red');) and then manually call helper.search(). That way you only get a single search request.

Works fine together with the widgets, they display the state correctly

[cubissimo]

@Kamshak thanks for the suggestion. I'm trying to reach that same result.. can you elaborate a little more? maybe an example :)? Tks

[logan-jobzmall]

@Kamshak - How do you get access to the helper in Angular Instantsearch?