Configuring Query

By default Query uses filtering rules depending on the field type that can be "text", "date" or "number".

Field Configuration

Each field object has the following properties:

id (string, number) - field ID;
value (string) - field value;
type (string) - field type ("text", "number", "date");
conditions (array) - optional. Allows specifying custom conditions instead of the default type-related options;
format (funciton) - optional. Defines how the value will be displayed in the Query.

view:"query", fields: [
  { 
    id: "first_name", 
    value: "First Name", 
    type: "text",
  },
  // other fields
]

As far as Query uses Filter under the hood, its filtering rules are the same.

Customizing Conditions

Default conditions

You can restrict the number of filtering rules for a particular field by providing an array of conditions for this field:

var fields = [
  {
    id: "first_name", value: "First Name",  type: "text",
    conditions: ["equal", "contains"] // only 2 conditions
  }
]

Custom conditions

Furthermore, you can provide custom filtering rules in the conditions array. To do this, take the following steps:

1) Create an object and provide a custom condition in it:

Creating a custom condition

var maxLength = {
  id: "max-length",
  value: "Max Length",
  batch: "text",
  handler: (a, v) => a.length <= v,
};

The object contains 4 properties:

id (string, number) - the rule id;
value (string) - text label for the rule;
batch (string) - name of the required input:
- text - standard input field for text and number;
- datepicker - datepicker control;
- none - the absence of input.
handler (function) - a comparison function with two parameters:
- a - field value;
- b - input value.

2) Add the conditions property (an array) and pass your custom condition there:

Providing custom conditions

var fields = [
  {
    id: "first_name",
    value: "First Name",
    type: "text",
    conditions: ["equal", "contains", maxLength] // custom "maxLength" condition
  }
]

Result should be the following:

Customizing Format

You can also customize value format and define how the value will be displayed in the widget. To do that access the format property of a field and define a formatting function:

view: "query",
fields: [
  {
    id: "birthdate",
    value: "Date of birth",
    type: "date",
    // long date representation
    format: value => webix.i18n.longDateFormatStr(value),
  }
]

Related sample: Query: Custom Format