Data Loading and Saving

Get Data

Save Data

Customize it

Data Loading 

webix.ui({
    view:"datatable", id:"table"
    url:"some.php"
});
//or
$$("table").load("some.php");

GET "some.php"

[
    { "id":1, "title":"The Shawshank Redemption" },
    { "id":2, "title":"The Godfather" },
    { "id":3, "title":"The Godfather: Part II" },
    { "id":4, "title":"12 Angry Men" }
]

{ 
    "data":[
        { "id":1, "title":"The Shawshank Redemption" },
        { "id":2, "title":"The Godfather" },
        { "id":3, "title":"The Godfather: Part II" },
        { "id":4, "title":"12 Angry Men" }
    ],
    "pos":0, 
    "total_count":10000
}

Response:

Data Loading

webix.ajax(url,  params).then();

success

error

x.status >= 400, x.status is 0

view onLoadError

webix onLoadError

parsing

setValues,

painting

scheme

parse, painting

webix.ui({
    view:"datatable", id:"table"
    url:"some.php"
});
//or
$$("table").load("some.php");

GET "some.php"

webix.ajax() methods

    webix.ajax("some.php", { mode:"admin" }).then(function(data){});
    //equals to
    webix.ajax().get("some.php", { mode:"admin" }).then(function(data){});

Set request type

webix.ajax().post(url, params);
webix.ajax().put(url, params);
webix.ajax().patch(url, params);
webix.ajax().delete(url, params);

Set response type

webix.ajax().response("arraybuffer").get("some.xlsx", params);
webix.ajax().headers({
    "Content-Type":"application/json"
}).get(url, params);

Set headers

Sync request

var xhr = webix.ajax().sync().get(url, params);

webix.ajax() methods

$$("table").parse( 
    webix.ajax().get("some.php", {
        mode:"admin"
    })
);
webix.ajax().get("some.php", {
    mode:"admin"
}).then(function(data){
    $$("table").parse(data.json());
});
webix.ui({
    view:"datatable", id:"table", autoConfig:true
});

View:

Get and parse:

Parse Ajax promise directly:

/*
    json:function(){},
    xml:function(){},
    rawxml:function(){}, 
    text:function(){}
*/

Promises for webix.ajax()

webix.ui({
    view:"datatable", id:"table", autoConfig:true
});

View:

Get and parse:

webix.ajax().get("some.php", {
    mode:"admin"
}.then(function(data){
    $$("table").parse(data.json());
}, function(xhr){
    webix.message("Data loading error");
});
var promise = webix.ajax().get("some.php");

promise.then(function(data){ ... });
promise.fail(function(xhr){ ... });
promise.finally(function(){ ... });

Promises for webix.ajax()

var tableData = webix.ajax().get("some.php");
var listData = webix.ajax().get("other.php");

webix.promise.all([
    tableData, listData
]).then(function(results){
    $$("table").parse(results[0].json());
    $$("list").parse(results[1].json());
});
webix.ui({
    cols:[
         { view:"datatable", id:"table", autoConfig:true },
         { view:"list", id:"list"} 
    ]
});

View:

Get all and parse:

Change Loading Pattern

    view.load(function(){
        return webix.ajax("some.php");
    });
    ...
    
    view.load(function(){
        return webix.ajax("some.php").then(function(data){
            return data.json();
        });
    });
    view.load({
        $proxy:true,
        load:function(view, params){
            return webix.ajax().get("some.php", params);
        }
    });

Loading function

Loading proxy

view.load(...);

Change Loading Pattern

    view:"datatable",
    url:function(){
        return webix.ajax("some.php");
    }
    ...
    
    view:"datatable",
    url:function(){
        return webix.ajax("some.php").then(function(data){
            return data.json();
        });
    }
    view:"datatable",
    url:{
        $proxy:true,
        load:function(view, params){
            return webix.ajax().get("some.php", params);
        }
    }

Loading function

Loading proxy

view.config.url

Loading Proxies

GET to POST

Fetching file contents

    view.load("post->some.php");
    view.load("binary->some.php");

Any custom logic

webix.proxy.myProxy = {
    $proxy:true,
    load:function(view, params){
        var url = this.source+"?mode=admin";
	return webix.ajax().get(url, params);
    }
};

view.load("myProxy->some.php");
//GET "some.php?mode=admin"

Rest

   { view:"list", save:"rest->some.php"}

Custom proxies

    webix.proxy.myProxy = {
        $proxy:true,
        load:function(view, params){
            var url = this.source+"?mode=admin";

            return webix.ajax().get(url, params);
            ...
            return webix.ajax(url).then(function(data){
                return data.json();
    	    });
        }
    };
    webix.ui({
        view:"datatable", id:"table", url:"myProxy->some.php"
    });
    
    $$("table").load("myProxy->some.php");
    
    //GET "some.php?mode=admin"

Loading Parameters

    webix.ui({
        view:"datatable",  url:"myProxy->some.php", datafetch:100
    });
webix.ui({
    view:"datatable", id:"table", url:"some.php", columns:[
        { id:"package", sort:"server", header:[ { content:"serverFilter"} ]},
        { id:"size", sort:"server", header:"Size"}
    ]
});

GET "some.php?filter[package]=pack"

GET "some.php?filter[package]=pack&sort[size]=asc"

Filtering and sorting on server

Dynamic loading

GET "some.php"

GET "some.php?continue=true&count=100&start=99"

Loading Params in Proxies

webix.ui({
    view:"datatable", id:"table", url:"some.php", columns:[
        { id:"package", sort:"server", header:[ { content:"serverFilter"} ]},
        { id:"size", sort:"server", header:"Size"}
    ]
});
webix.proxy.myProxy = {
    $proxy:true,
    load:function(view, params){    
        /*params
           sort:{ id:"title", dir :"asc"},
           filter:{ title":"a", year:1966 }

           count:50
           start:150
        */
        return webix.ajax().post(url, params);
    }
};

Data Saving

View

DataStore

DataProcessor

webix.ui({view:"datatable", id:"table"});
var store = $$("table").data;
webix.ui({ view:"datatable", save:"save.php"});

POST: "save.php"

id:1,
title:"Some",
year:1957,
votes:1254,
rating:6,
webix_operation: "update"
{ 
    "id":"1",
    "status":"success"
}

Data Saving

View

DataStore

DataProcessor

webix.ui({view:"datatable", id:"table"});
var store = $$("table").data;
webix.ui({ view:"datatable", save:"save.php"});
webix.ui({ 
    view:"datatable",
    save:{
        url:"save.php"
    }
});
webix.ui({ view:"datatable", id:"table" });

new webix.DataProcessor({
    url:"save.php",
    master:$$("table")
});

1.

2.

3.

Data Saving

webix.ui({
    view:"datatable",
    on:{
        "data->onStoreUpdated":function(id, item, operation){
            //id: 1
            //item:  { id:1, title:"Some", year:1957 }
            //operation:  add, update, delete
        }
    },
    save:"save.php"
});
id:1,
title:"Some",
year:1957,
votes:1254,
rating:6,
webix_operation:"update" || "delete"
id:4587121254545,
title:"Some",
year:1957,
votes:1254,
rating:6,
webix_operation:"add"

Request POST "save.php"

{ "id":"1", "status":"success" }
{ "id":4587121254545, 
    "status":"success", "newid":99 }

Response

Data Saving:Response


  { "id":"1", "status":"success", "newid":99}

Success

Error

  • xhr status code is >=400 or 0
  • status "error" or "invalid"
  • xhr is ok
  • any status

successfull DP events

item ID for add

item updates, if enabled

error DP events

undo, if enabled

  • no response data

Data Processor 

webix.ui({
    view:"datatable",
    id:"table",
    save:{
        url:"save.php",
        updateFromResponse:true,
        undoOnError:true,
        trackMove:true,
        on:{
            onAfterSync:function(status, text, data, xhr){
                // data.json() { id:"", status:"success", newid:"8" }"
            },
            onBeforeDataSend:function(update){
                // { id:id, item:item, operation:"add"}
            }
        }
    }
});

Configure:

Call methods: 

var dp = webix.dp($$("table"));

dp.ignore(function(){
    $$("table").add({});
});

Saving Proxies

webix.ui({
    view:"datatable",
    save:"rest->save.php"
});

    id:1,
    title:"Some",
    year:1957,
    votes:1254,
    rating:6,
    rank:1

Add:              POST "some.php"

Update:        PUT "some.php/1"

Delete:         DELETE "some.php/1"

Saving Proxies

webix.ui({
    view:"datatable",
    save:"rest->save.php" //or "json->save.php"
});
webix.proxy.auth = {
    $proxy:true,
    load:function(view){
        return webix.ajax(this.source);
    },
    save:function(view, update, dp){
        //change operation name
        var data = update.data;
        data.action = update.operation;

        //send headers
        return webix.ajax().headers({
            Authorization: "Basic QWxhZGRpbjpPcGVuU2VzYW1l"
        }).post(this.source, update.data);
    }
};

webix.ui({
    view:"datatable", save:"auth->save.php"
});

Built-in:

Custom:

//view
view obj

//update
{
    id:id, 
    data:item,
    operation:"add"
}

//dp
dataprocessor obj

2-5. Webix Intermediate. Data Loading and Saving.

By ihelga

Made with Slides.com

2-5. Webix Intermediate. Data Loading and Saving.

Communication with backend: loading, saving and proxies.

  • 264

More from ihelga

  • 2-4. Processing Data with Webix Widgets
    ihelga
    227
  • 1-5. Webix Basics. Collections and Server Side
    ihelga
    622
  • 3-2. Webix Jet: Interaction
    ihelga
    657