Customizing Query

Query is a complex widget created with Webix Jet, the MV* framework for Webix Library. It is a ready-to-use application with minimum configuration settings but has API for redefining the logic of inner modules.

You will need to study the source code to customize views and models.

Jet App and Inner Modules

Query is built as a Jet App and wrapped into a Webix view, so you can initialize Query in either of the ways.


The interface of Query is split into parts (views). Each view is a class that extends the JetView class and has own handlers for setting the configuration and logic.

The sources for interface parts (Jet Views) are located in the sources/views folder.


Go to the Class Map page to see the list of all Jet views in Query and where they are in the interface.


Query models contain the logic for working with fields and data. They are defined as Jet Services.

The sources for models (Jet Services) are located in the sources/models folder.


Service methods are called by the UI and can be called by a programmer as:


Customizing Views

  • you can override the config() method for changes in the UI
  • you can override the init() for changes in the UI and behavior
  • you can override any existing method but with a caution
  • you can add and call your own methods

Firstly, create you own view class by inheriting it from one of the default views or from query.views.JetView:

class CustomBar extends {
    config() {
        //get JSON object with configuration
        const ui = super.config();
        //exact changes depend on a particular view
        ui.height = 200;
        return ui;
    init() {
        // call default logic
        // custom logic below
    doSomething() {
        // do something on init

Secondly, replace the default view via the override map:

    view: 'query',
    override: new Map([[, CustomBar]]),
    // other properties

Adding a Button to the Bar

To add a new button into the Bar, you need to change its JSON configuration:

class CustomBar extends {
    config() {
        // default logic
        const ui = super.config();
        // add new button
            view: 'button',
            value: 'Clear',
            width: 70,
            // clear value upon clicking the button
            click: () => {
                this.getParam('state').value = null;
        return ui;

Related sample:  Query: Adding a Button


1. We do not recommend to remove any component from the interface as the inner logic might still try accessing it. Instead, hide the components.

class CustomBar extends query.views.base {
    init(view) {
        // default logic
        // hide "Add filter" button

2. You can access component instances within a Jet view by:

  • using the $$(id) method of JetView.

It works for an inner component that is assigned the localId setting.

init() {
    // default logic
    // get instance of the component with "button" localId
    const button = this.$$("button");
init(view) {
    // default logic
    // get instance of the first button
    const button = view.queryView("button");

3. You can find out whether the app is currently compact from any view or service method as:

const compact = this.getParam("compact", true);

4. You can get state properties from any view or service method as:

const state =;
// or
const state = this.getParam("state");

Backward Compatibility

Query is extremely flexible when it comes to customizations: you can change almost anything in it. However, keep in mind the following:

  • The inner logic of Query modules may change in future releases.
  • We will try to maintain method signatures, but breaking changes might happen if they are necessary for further development of the widget.

Code for Edge –°hromium must be with different syntax.

Back to top