Configuring Query

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

view:"query", fields: [
  { id: "first_name", value: "First Name", type: "text" },
  { id: "age", value: "Age", type: "number" }
]

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

You can provide your own sets of conditions using the default or custom ones.

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:

Back to top