Tuning Webix for Odata

As we know, web app development is a complex process that, on the one hand, consists of laborious work at the backend and, on the other hand, includes plenty of efforts while creating a nice-looking and responsive UI.

If you want to optimize the construction of your web applications, you need to find the best option for organizing your work with data as well as a fast and powerful js library for drawing app interface.

This variant can be implemented by using OData, an open data protocol for building RESTful API’s, and by adapting Webix UI library to its rules of requesting and modifying data.

Odata protocol

OData’s goal is to enable a broad access to data regardless of the way it is stored. It allows requesting and updating resources via HTTP commands and provides an entire query language directly in the URL.

Well, if you are reading this post, you probably know a lot about Webix. If suddenly no, you can find more info here. All in all, I can say that our users find it fast and easy.

twitter review of webix

There is a wide range of services that expose their data using the OData protocol. Among them are such popular ones as Windows Azure Table Storage, Microsoft Dynamics, SharePoint, IBM DB2. You can find the full list of them here.

To show you how to build a feature-rich web app with a flexible backend and stylish user interface, we use a recently released DataBoom service. DataBoom is a DBAAS solution with a powerful rest API based on OData standard.

DataBoom database

We’ve prepared some samples built with Webix and DataBoom. To check them please continue reading this post.

Creating a Proxy

Standard loading and saving can be enabled by this codeline:

webix.ui({ view:"datatable", url:some_url, save:some_url });

To add custom logic, we need to create a proxy object that will organize client-server communication according to the desired pattern. Let’s give a speaking name to our proxy and fetch the data from “persons” collection at the server-side:

webix.proxy.odata = {
    load:function(view, callback, url){ ..custom loading pattern..},
    save:function(view, callback, url){ ..custom saving pattern..}

      save: "odata->"

DataBoom is an online database that allows storing and retrieving data with a few lines of code without database administration and schema definition. You can create a free account and use an online database for working with OData.

Data Loading

To comply with Odata requirements of data requesting, we need to configure the query string each time we load, filter or sort the data:

load:function(view, callback, details){
    var url = this.source; //
    url += "$format=json"; //ensures that data is returned in JSON format

    // if server-side sorting or filtering is triggered
      var start = details.from, count = details.count;

          url += "&$orderby="" "+details.sort.dir;

        var filters = [];
        for (var key in details.filter){
       if(filters.length) url +="&$filter="+filters.join(" and ");
    //GET request
        data = data.json();
        var records = data.d.results;
        webix.ajax.$callback(view, callback, "", records, -1);

Data Saving

To insert, update or delete a record in Odata way we need to send a request of an appropriate type. Odata conventions require sending a POST for creating a new record, PUT or PATCH for updating it and DELETE for deleting a record.

saving data with odata and webix

We also need to set a request header that specifies the type of data that goes to server. It should be “application/json”.

save:function(view, update, dp, callback){
    var url = this.source,
        mode = update.operation,
        data =,
        editLink = url.replace(/\/$/, "")+"("+data["id"]+")";

    if(mode == "insert") delete;
    data = JSON.stringify(data);

    //call odata URI
    if(mode == "insert"){
        }).post(url, data, callback);
    } else if (editLink){
        if (mode == "update"){
            }).put(editLink, data, callback);
        } else if (mode == "delete") {
            }).del(editLink, data, callback);

After the data saving request is fulfilled, the response should be processed in order to replace an auto-generated client-side ID to the real server-side ID:

result:function(state, view, dp, text, data, loader){
    data = data.json();
    var obj = state;
    if (data){
        obj = data.d.results || {status:"error"};
        obj.newid =;
        dp.processResult(state, obj);

Check the sample by this link.

Dynamic Loading with Odata

To enable dynamic loading within a data-management component, Webix requires a definite format of the incoming data so that later on this component can request a certain amount of data at a certain position:

{ data:[..records..], pos:0, total_count:1000 }

So the above proxy should be supplied with additional logic to fetch total data count and starting position from server. Also, a query string should be modified each time a request for a new portion of data is prepared:

load:function(view, callback, details){
        url += "&$inlinecount=allpages";
        if(!details) url+="&$top="+view.config.datafetch;

        var start = details.from, count = details.count;
        if(start && count!==-1){
            if(start<0) start = 0;
            url += "&$skip="+start+"&$top="+count;

    data = data.json();
            var records = {
            var records = data.d.results;
        webix.ajax.$callback(view, callback, "", records, -1);

And the proxy for dynamic loading will look like:

webix.proxy.odataDynamic = {
        webix.extend(this, webix.proxy.odata);

Evaluate the sample of dynamic loading with OData.


Webix way of loading and saving data can be seamlessly customized to adjust to different data services and protocols. The library package already contains solutions for working with Faye, IndexedDB, DHTMLX connectors, REST API, browser local storage, etc. At the same time users are encouraged to write their own integrations.

In this article we’ve  taken OData, an open data protocol for building RESTful API’s, and adapt Webix to its rules of requesting and modifying data

On the client side we’ve made loading and saving adjustments with the help of webix.proxy interface. As a serverside background we’ve taken DataBoom, a cloud database that supports OData protocol.

All in all,  Webix can be easily tuned to work with OData protocol to support the most common operations like retrieving and saving data, filtering and sorting it at the server-side as well as loading the data dynamically in case of a long dataset.

Do not miss the DataBoom service as well, it provides much more pleasant experience than conventional database and integrates with Webix very well. In addition to this, it is free for using it in small applications.

Written by
The following two tabs change content below.
Veronika Lindorenko

Veronika Lindorenko

Webix product manager since 2012, interested in SMM and usability. She strives to make the online world better by creating qualitative and catching content.
Veronika Lindorenko

Latest posts by Veronika Lindorenko (see all)

Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on Vote on Reddit
  • Sergey Pylagin

    Your sample doesn’t work in IE 11 (Win7) without any console errors

    • Helga

      Yes, you are right. It happens due to IE CORS policy.
      The support for such requests for IE will be added in Webix 3.0 version.

      • Sergey Pylagin

        Helga, thank you!
        What about Webix roadmap? When to expect this version?

        • Helga

          The 3.0 version is scheduled for the end of September.

          You may as well study the Webix roadmap on Trello, where our plans concerning library improvements are listed.

  • Sergey Pylagin

    How can I do remote paging, using odata options $top, $skip?

    • Helga

      The logic for remote paging is described in “Dynamic Loading with OData” part of this article. Webix pager triggers


      method, in which




      parameters are added to the url.

      There’s a snippet that shows it:

      • Ken Yang

        Hi, I am wondering where is the “details” coming from??

        • Helga

          Hi! The


          parameter is passed into the


          method that is called by filters and sorter in “server” mode.

          • Ken Yang

            Thanks. One more question, is there any example on specifying initial sorting column for datatable initialization??

          • Helga

            There’s not clear way to achieve it, but you can use the workaround like this:

            Basically, you provide a “sorting” part of the url during the initial loading and remove it in the


            handler (called only during the first loading).

  • very cool article!!
    btw, how do I use it with specific accounts? this example works for public database only right? what if the user have an account on