Available only in PRO Edition

Creating Query Builder on a Page

To start working with Query Builder, you need to initialize it on a page. For this you need to take 2 simple steps:

  1. Include the necessary JS and CSS files into an HTML file.
  2. Call the object constructor.

Files to Include

There are 4 files that you should include on a page:

<!-- js files -->
<script src="codebase/webix.js" type="text/javascript"></script>
<script type="text/javascript" src="codebase/querybuilder.js"></script>
<!-- css files -->      
<link rel="stylesheet" type="text/css" href="codebase/webix.css">
<link rel="stylesheet" type="text/css" href="codebase/querybuilder.css">

Initialization

To initialize Query Builder, you need to specify its configuration as follows:

webix.ui({
    view: "querybuilder",
    id: "querybuilder",
    fields: [
        { id:"fname",   value:"First Name", type:"string" },
        { id:"lname",   value:"Last Name",  type:"string" },
        { id:"age",     value:"Age",        type:"number" },
        { id:"bdate",   value:"Birth Date", type:"date" }
    ]
})

Main properties

  • fields - (array) - mandatory, an array of field objects that will be used for filtering the dataset. Each field object has three properties:
    • id - (string,number) the id of the field;
    • value - (string) the value of the field;
    • type - (string) the type of the field. Can have the following values: string, number, date;
    • validate - (function) the validation rule for the input field.
  • columnMode - (boolean) optional, true to arrange attributes of filtering fields into columns. False by default. See details below
  • filtering - (boolean) optional, enables filtering functionality. True by default.
  • sorting - (boolean) optional, true to enable sorting. False by default.
  • maxLevel - (number) optional, defines the maximum level of nesting for filtering fields

Related sample:  Querybuilder initialization

Referring to Query Builder Elements

Each rule of Query Builder (querybuilderline) represents a form with controls. RichSelect control is used for selecting keys and rules, while Text, DatePicker, DateRangePicker or RangeSlider are used for setting values.

You can access forms and their elements via the queryView method. For example, to get elements of the first form, use the following code:

// getting elements of the 1st form
$$("querybuilder").queryView({view:"querybuilderline"},"all")[0].elements

The names of the form elements correspond to the names of the attributes of the rules object:

  • key - the key input field
  • rule - the rule input field
  • value - the value input field

Arranging Fields as Columns

By default, inputs for attributes of filtering fields are arranged in a row. However, you can place them in a column, one under another:

For this, you need to set the columnMode property to true in the configuration of Query Builder:

webix.ui({
    view: "querybuilder",
    id: "querybuilder",
    fields: [
        { id:"fname", value:"First Name", type:"string" },
        { id:"lname", value:"Last Name",  type:"string" },
        { id:"age",  value:"Age", type:"number" },
        { id:"bdate",  value:"Birth Date", type:"date" }
    ],
    columnMode:true
})

Related sample:  Querybuilder columns mode

Back to top