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
  }
]

Related sample:  Query: Custom Conditions

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",
fileds: [
  {
    id: "birthdate",
    value: "Date of birth",
    type: "date",
    // long date representation
    format: value => webix.i18n.longDateFormatStr(value),
  }
]

Related sample:  Query: Custom Format

Back to top