Current Filters

Shows applied refinements and lets users remove them.

Signature

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

Explore example code

About this widget

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

Examples

Kotlin

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.

Kotlin

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.

Kotlin

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 · Map<FilterAndID, Filter> · default: mapOf()

The default filters to display.

filterState · FilterState · required

The FilterState that will hold your filters.

groupIDs · List<FilterGroupID> · default: listOf()

When specified, only matching current refinements will be displayed.

View

view · FilterCurrentView · required

The view that renders the current filters.

presenter · FilterCurrentPresenter · default: "FilterCurrentPresenterImpl()"

The presenter that defines the way filters are displayed.

Kotlin

val view = FilterCurrentViewImpl(chipGroup, chipLayout) // with your view and layout
val presenter = object : FilterCurrentPresenter {
    // Implement the interface here
}
currentFilters.connectView(view, presenter)