UI libraries / InstantSearch Android / Widgets

Filter Map

Signature 
FilterMapConnector(
  filters: Map<Int, Filter>,
  filterState: FilterState,
  selected: Int?,
  groupID: FilterGroupID
)
See code examples
See demo

About this widget

Components holding a map of filters, and that can apply a single filter at a time.

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

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val filterState = FilterState()
    val gender = Attribute("gender")
    val groupGender = groupAnd(gender)
    val filters = mapOf(
        R.id.male to Filter.Facet(gender, "male"),
        R.id.female to Filter.Facet(gender, "female")
    )
    val filterMap = FilterMapConnector(
        filters = filters,
        filterState = filterState,
        groupID = groupGender
    )
    val connection = ConnectionHandler(filterMap, searcher.connectFilterState(filterState))

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val viewGender = FilterMapViewRadioGroup(radioGroupGender)
        connection += filterMap.connectView(viewGender)
        searcher.searchAsync()
    }

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

Low-level API

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

  • Searcher: the Searcher that handles searches.
  • FilterState: the current state of the filters.
  • FilterMapViewModel: the logic applied to the filter map.
  • FilterMapView: the view that renders the filter map.
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

class MyActivity : AppCompatActivity() {
    val gender = Attribute("gender")
    val filterState = FilterState()
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val filters = mapOf(
        0 to Filter.Facet(gender, "male"),
        1 to Filter.Facet(gender, "female")
    )
    val viewModel = FilterMapViewModel(filters)
    val connection = ConnectionHandler()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val view =  FilterMapViewRadioGroup(radioGroupGender)
        connection += viewModel.connectFilterState(filterState)
        connection += viewModel.connectView(view)
        connection += viewModel.connectFilterState(filterState)

        searcher.searchAsync()
    }

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

Compose UI

InstantSearch provides the FilterMapState as a state model, which is an implementation of the FilterMapView interface. FilterMapState must be connected to the FilterMapConnector or FilterMapViewModel like any other FilterMapView 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

class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = ApplicationID("YourApplicationID"),
        apiKey = APIKey("YourSearchOnlyAPIKey"),
        indexName = IndexName("YourIndexName")
    )
    val filterState = FilterState()
    val gender = Attribute("gender")
    val groupGender = groupAnd(gender)
    val filters = mapOf(
        0 to Filter.Facet(gender, "male"),
        1 to Filter.Facet(gender, "female")
    )
    val filterMapState = FilterMapState()
    val filterMap = FilterMapConnector(
        filters = filters,
        filterState = filterState,
        groupID = groupGender
    )
    val connections = ConnectionHandler(filterMap)

    init {
        connections += searcher.connectFilterState(filterState)
        connections += filterMap.connectView(filterMapState)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyFilterMap(filterMapState) // your own UI composable to display filter map options
        }
        searcher.searchAsync()
    }

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

Parameters

Parameter Description
filters
type: Map<Int, Filter>
Required

The map of filters to be held. The key is an unique identifier for the filter value.
Copy 
1
2
3
4
5

val gender = Attribute("gender")
val filters = mapOf(
    0 to Filter.Facet(gender, "male"),
    1 to Filter.Facet(gender, "female")
)
filterState
type: FilterState
Required

The FilterState that holds filters.
selected
type: Int?
default: null
Optional

The key of the filter selected by default.
groupID
type: FilterGroupID
default: FilterGroupID(FilterOperator.And)
Optional

Groups all created filters under an ID.

View

Parameter Description
view
type: FilterMapView
Required

The view that renders the filter map.
presenter
default: FilterPresenterImpl()
Optional

How to display filters.
Copy 
1
2
3

val view = FilterMapViewRadioGroup(radioGroupGender)
val presenter = FilterPresenterImpl()
filterMap.connectView(view, presenter)
Did you find this page helpful?
InstantSearch Android v3