Filter List (Facet)
FilterListConnector.Facet( filters: List<Filter.Facet>, filterState: FilterState, selectionMode: SelectionMode, groupID: FilterGroupID )
About this widget
FilterList.Facet
is a filtering view that displays any kind of facet filters and lets users refine their search results by selecting them.
Compared to the RefinementList
, which takes its values from the search response facets, this widget displays facet filters that you add yourself.
Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
val filterState = FilterState()
val color = Attribute("color")
val groupColor = groupAnd(color)
val facetFilters = listOf(
Filter.Facet(color, "red"),
Filter.Facet(color, "green"),
Filter.Facet(color, "blue"),
Filter.Facet(color, "yellow"),
Filter.Facet(color, "black")
)
val filterListConnector = FilterListConnector.Facet(
filters = facetFilters,
filterState = filterState,
selectionMode = SelectionMode.Single,
groupID = groupColor
)
val connection = ConnectionHandler(filterListConnector, searcher.connectFilterState(filterState))
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val filterListView: FilterListView.Facet = MyFilterListFacetAdapter() // your `FilterListView.Facet` implementation
connection += filterListConnector.connectView(filterListView)
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connection.disconnect()
searcher.cancel()
}
}
Low-level API
If you want to fully control the FilterList.Facet
components and connect them manually, use the following components:
Searcher
: TheSearcher
that handles your searches.FilterState
: The current state of the filters.FilterListViewModel.Facet
: The logic applied to the facet filters.FilterListView.Facet
: The view that renders the facet filters.FilterPresenter
: Optional. The presenter to customize the display of the filters.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
val filterState = FilterState()
val color = Attribute("color")
val filters = listOf(
Filter.Facet(color, "red"),
Filter.Facet(color, "green"),
Filter.Facet(color, "blue"),
Filter.Facet(color, "yellow"),
Filter.Facet(color, "black")
)
val viewModel = FilterListViewModel.Facet(filters)
val connection = ConnectionHandler()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val view: FilterListView.Facet = MyFilterListFacetAdapter() // your `FilterListView.Facet` implementation
connection += searcher.connectFilterState(filterState)
connection += viewModel.connectFilterState(filterState)
connection += viewModel.connectView(view)
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connection.disconnect()
searcher.cancel()
}
}
Compose UI
InstantSearch provides the FilterListState
as a state model, which is an implementation of the FilterListView
interface.
You need to connect FilterListState
to the FilterListConnector
or FilterListViewModel
like any other FilterListView
implementation.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
val filterState = FilterState()
val color = Attribute("color")
val groupColor = groupAnd(color)
val facetFilters = listOf(
Filter.Facet(color, "red"),
Filter.Facet(color, "green"),
Filter.Facet(color, "blue"),
Filter.Facet(color, "yellow"),
Filter.Facet(color, "black")
)
val filterListState = FilterListState<Filter.Facet>()
val filterListConnector = FilterListConnector.Facet(
filters = facetFilters,
filterState = filterState,
selectionMode = SelectionMode.Single,
groupID = groupColor
)
val connections = ConnectionHandler(filterListConnector)
init {
connections += searcher.connectFilterState(filterState)
connections += filterListConnector.connectView(filterListState)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
filterListState.items.forEach { selectableFacet ->
FilterRow( // your own UI composable to display `SelectableItem<Filter.Facet>`
selectableFilter = selectableFacet,
onClick = { filterListState.onSelection?.invoke(it) }
)
}
}
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connections.disconnect()
searcher.cancel()
}
}
Parameters
filters
|
type: List<Filter.Facet>
default: listOf()
Required
The facet filters to display. |
filterState
|
type: FilterState
Required
The |
selectionMode
|
type: SelectionMode
default: Multiple
Optional
Whether the list can have |
groupID
|
type: FilterGroupID
default: FilterGroupID(FilterOperator.Or)
Optional
The identifier for the group of filters. |
View
view
|
type: FilterListView.Facet
Optional
The view that renders the filters. |
||
Copy
|