{"bigh3": true}

## Custom Queries

### Data Aware UI components

One of the key ideas behind Reactive Maps is the abstraction of a query interface.

The UI components are already associated with the data queries. For instance,

- **SingleList** and **MultiList** components create a exact term match query based on the selected items.
- A **RangeSlider** component creates a numeric range query based on the selected `start` and `end` values.

Components rely on the `appbaseField` prop for selecting the database field on which the query needs to be applied.

However, there are cases where you would wish to override the associated query with your own. For example,

### Defining a Custom Query

Each component has a `customQuery` prop that accepts a function. The function should return a query object compatible with <a href="https://www.elastic.co/guide/en/elasticsearch/reference/2.4/query-dsl.html" target="_blank">Elasticsearch Query DSL</a>. Here is a simple query object that applies a match query.

```javascript
<TextField
  ...
  customQuery={this.customQuery}
/>

this.customQuery=function() {
  return {
    "query": {
      "match": { "fieldName": "text to match" }
    }
  }
}
```

Here is another example that applies a match_phrase_prefix query.

```javascript
<DataSearch
  ...
  customQuery={this.customQuery}
/>

this.customQuery=function() {
  return {
    "query": {
      "match_phrase_prefix": {
        "fieldName": {
          "query": "hello world",
          "max_expansions": 10
        }
      }
    }
  }
}
```

### Data Controller Component

Reactive Maps UI library comes with a specific component that is designed to be truly customizable, [**Data Controller**](../components/DataController.html). It's a UI optional component that requires defining the `customQuery` prop.

For example, let's say you want to apply a query filter to represent an end-user's global preferences within the UI without adding a widget. Data Controller allows you to define a query without needing a UI widget.

### Not familiar to Elasticsearch?

You need to write a custom query but haven't worked with Elasticsearch. Okay, as a super quick primer, Elasticsearch is a data store cum search engine with a NoSQL JSON data model.

The docs link above is a good way to explore ElasticSearch in depth. Another alternative to get started with the query syntax is [Mirage](https://opensource.appbase.io/mirage), a GUI for composing Elasticsearch queries.