Controls

A control object holds an input value, such as the selected region in a dropdown. Map it to one or more queries, and its value flows into those queries when the app runs.

Creating and mapping a control

Create a filter control, map it to a query, then update the control when the user changes the dropdown:

const region = app.createFilter('region', { dataset: 'sales', field: 'users.region' })
app.mapControl(region, trend, { field: 'users.region' })

document.querySelector('#region').addEventListener('change', (event) => {
  region.setCondition({ operator: 'is', values: [event.target.value] })
  app.execute()
})

The dropdown is ordinary HTML. The control carries its selected value into the mapped query, and your subscription redraws the chart with the updated result.

Explicit mappings

A control affects only the queries it is mapped to. Nothing cascades implicitly, so you can tell which views a control changes by reading the mappings.