API Reference / InstantSearch Android / Current Filters

Current Filters

Signature 
FilterCurrentConnector(
  filters: Map<FilterAndID, Filter>,
  filterState: FilterState,
  groupIDs: List<FilterGroupID>
)
See code examples

About this widget

Shows the currently active refinements within a given FilterState and lets users remove filters individually.

Examples

Copy 
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
50
51

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    private val color = Attribute("color")
    private val price = Attribute("price")
    private val tags = Attribute("_tags")
    private val groupColor = FilterGroupID(color)
    private val groupPrice = FilterGroupID(price)
    private val groupTags = FilterGroupID(tags)
    private val filters = filters {
        group(groupColor) {
            facet(color, "red")
            facet(color, "green")
        }
        group(groupTags) {
            tag("mobile")
        }
        group(groupPrice) {
            comparison(price, NumericOperator.NotEquals, 42)
            range(price, IntRange(0, 100))
        }
    }
    val filterState = FilterState(filters)
    val currentFiltersColor = FilterCurrentConnector(filterState, listOf(groupColor))
    val currentFiltersAll = FilterCurrentConnector(filterState)
    val connection = ConnectionHandler(
        currentFiltersColor,
        currentFiltersAll,
        searcher.connectFilterState(filterState)
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        connection += currentFiltersAll.connectView(
            FilterCurrentViewImpl(chipGroupAll, R.layout.filter_chip)
        )
        connection += currentFiltersColor.connectView(
            FilterCurrentViewImpl(chipGroupColors, R.layout.filter_chip)
        )
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        searcher.cancel()
        connection.disconnect()
    }
}

Low-level API

If you want to fully control the Current Filters components and connect them manually, use the following components:

  • FilterCurrentViewModel: The logic for current refinements in the FilterState.
  • FilterState: The current state of the filters.
  • FilterCurrentView: The view that renders the current filters.
  • FilterCurrentPresenter: Optional. The presenter that defines the way you want to display the Filters.
Copy 
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

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val filterState = FilterState()
    val viewModel = FilterCurrentViewModel()
    val connection = ConnectionHandler()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val view: FilterCurrentView = FilterCurrentViewImpl(chipGroup) // with your `ChipGroup` view
        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 FilterCurrentState as a state model, which is an implementation of the FilterCurrentView interface. You need to connect FilterCurrentState to the FilterCurrentConnector or FilterCurrentViewModel like any other FilterCurrentView implementation.

Copy 
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
50
51
52
53
54
55
56
57
58
59

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val color = Attribute("color")
    val price = Attribute("price")
    val tags = Attribute("_tags")
    val groupColor = FilterGroupID(color)
    val groupPrice = FilterGroupID(price)
    val groupTags = FilterGroupID(tags)
    val filters = filters {
        group(groupColor) {
            facet(color, "red")
            facet(color, "green")
        }
        group(groupTags) {
            tag("mobile")
        }
        group(groupPrice) {
            comparison(price, NumericOperator.NotEquals, 42)
            range(price, IntRange(0, 100))
        }
    }
    val filterState = FilterState(filters)
    val chipGroupColors = FilterCurrentState()
    val currentFiltersColor = FilterCurrentConnector(filterState, listOf(groupColor))
    val chipGroupAll = FilterCurrentState()
    val currentFiltersAll = FilterCurrentConnector(filterState)
    val connections = ConnectionHandler(currentFiltersColor, currentFiltersAll)

    init {
        connections += searcher.connectFilterState(filterState)
        connections += currentFiltersAll.connectView(chipGroupAll)
        connections += currentFiltersColor.connectView(chipGroupColors)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {  // your own UI composable to display filters
                chipGroupAll.filters.forEach { (filterGroupAndID, filter) ->
                    Chip(text = filter, onClick = { chipGroupAll.selectFilter(filterGroupAndID) })
                }
                chipGroupColors.filters.forEach { (filterGroupAndID, filter) ->
                    Chip(text = filter, onClick = { chipGroupColors.selectFilter(filterGroupAndID) })
                }
            }
        }
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        searcher.cancel()
        connections.disconnect()
    }
}

Parameters

filters
type: Map<FilterAndID, Filter>
default: mapOf()
Optional

The default filters to display.
filterState
type: FilterState
Required

The FilterState that will hold your filters.
groupIDs
type: List<FilterGroupID>
default: listOf()
Optional

When specified, only matching current refinements will be displayed.

View

view
type: FilterCurrentView
Required

The view that renders the current filters.
presenter
type: FilterCurrentPresenter
default: FilterCurrentPresenterImpl()
Optional

The presenter that defines the way filters are displayed.
Copy 
1
2
3
4
5

val view = FilterCurrentViewImpl(chipGroup, chipLayout) // with your view and layout
val presenter = object : FilterCurrentPresenter {
    // Implement the interface here
}
currentFilters.connectView(view, presenter)
Did you find this page helpful?
InstantSearch Android v3