Available only in PRO Edition
To start working with Query Builder, you need to initialize it on a page. For this you need to take 2 simple steps:
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">
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
Related sample: Querybuilder initialization
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:
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