Working with Value

Setting Value

You can set the value through the related property in the configuration object or by changing it through the component state:

Initial value

view:"query",
value:{
  "glue": "or",
  "rules": [
    {
      "field": "first_name",
      "includes": [
        "Diana"
      ]
    },
    {
      "glue": "and",
      "rules": [
        {
          "field": "age",
          "condition": {
            "type": "less",
            "filter": 45
          }
        }
      ]
    }
  ]
}

Related sample: Query: Initialization

The value object contains the following properties:

glue (string) - the logic for combining filtering rules:
"AND" (default) - to display records that correspond to all rules at once;
"OR" - to show records that correspond to at least one of the rules.
rules (array) - a set of filtering rules. Each element of the array is a rule with the following properties:
- field (string) - the id of the field. Must match with a data field id of the related component which will be filtered with the help of Query;
- condition (object) - an object with the following properties:
  - filter - value passed to the field;
  - type - applied condition (filtering rule).
- includes (array) - an array of the included values.

Getting Value

Query value is a specific reactive propery, which means that developers can get and set its value as well as listen to its changes through the components state:

To get the value property call the getState() method and then access the "value" property of the resulting object:

$$("query").getState().value; // an object with filtering rules or null

Listening to Changes

To track value changes, you need to use the $observe handler of the component state:

$$("query").getState().$observe("value", function(value){
    // custom logic
});

Additionally, you can use $observe in tandem with the onInit handler. The code inside the handler will be executed before the initialization of a widget:

webix.ui({
 view: "query",
 fields: [ /*fields for filtering*/ ],
 value: { /*filtering rules and fields combinations*/ },
 
 on: {
  onInit: function() {
    // "this" points to the widget
   this.getState().$observe("value", function(value){ 
    // custom logic
   }); 
  }
 }
 
});

It can be useful when using Query to filter datasets.

Getting Filtering Function

To use Query for filtering datasets you need to get its helper function that implements the filtering logic. It can be done with the help of the getFilterFunction() method:

$$("query").getFilterFunction();

The method returns a "helper" function that combines all the defined filtering rules.

You can pass the helper function as a parameter to the filter method of Webix data components to iterate their items and check whether they correspond to the filter rules:

webix.ui({
  view: "query",
  on: {
    onChange() {
      const filter = this.getFilterFunction();
      // data-widget to filter data in
      $$("data-widget").filter(filter);
    }
  }
});

Related sample: Query: Filtering Data