Current Filters

Signature

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

See code examples

See demo

About this widget

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

Examples

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

Parameter	Description
`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

Parameter Description


            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?