Collections and Server Side

.. in Webix Apps

Invisible Master is Watching You

Abstract and invisible

'viewless'

Painted

in UI,

'view'

DataCollection

TreeCollection

DataTable

List, DataView

Chart 

TreeTable, Tree

Invisible Master is Ruling You

var collection = new webix.DataCollection({
  data:grid_data
});

webix.ui({
    rows:[
        {view:"list", id:"list"},
        {view:"datatable", id:"table"}
    ]
});


$$("list").sync(collection);
$$("table").sync(collection);

Edit:             master collection

Add:             master collection

Remove:      master collection

slave views

slave views

slave views

Try it: https://snippet.webix.com/nxjqcvar

Why Collection?

$$("list").sync(collection);

$$("table").sync(collection, function(){
  this.filter(function(obj){
      return obj.rank%2;
  });
});

Try it: https://snippet.webix.com/sy5y4fpk

  • Load once, then work on client side
  • Up-to-date data in different app parts
  • Possible to sync data with extra processing  

 Collections

Same data, but different presentation

var users = webix.DataCollection({
    url:"users.js"
});
list.sync(users);
chart.sync(users, function(){
    this.group({
        by:"year",
        map:[
            "age":[ "age", "count"]
        ]
    })
});

https://snippet.webix.com/m6d1aziq

Using Collections

  • As data 
$$("table1").sync(categories);
//or 
$$("table1").parse(categories);
//or even
{ view:"datatable", data:categories }
  • As column collection 
{ view:"datatable", columns:[
    { id: "title" },
    { id: "categoryId", collection:categories }
]}
var categories = new webix.DataCollection({
    url:"categories.json"  //[ { id:1, value:"" }, { id:2, value:"" } ]
});
  • As selector options 
{ view:"combo", options:categories }

Connecting to Server Side

webix.ui({
    view:"datatable",
    url:"server/getfilms",
    save:"server/savefilms"
});

Simple, yep?)

View and Data Levels

View

DataStore

DataProcessor

shows data,

lets users interact with it

stores data and its order,

provides CRUD and processing logic

listens to data changes and invokes server scripts

{view:"datatable", id:"table"}
$$("table").data
{ view:"datatable", save:"savefilms"}

* There also exist more complex ways of DataProcessor initialization

Loading from Server

Request

Response

  • data array or..
  • object with properties:
    • 'data' with data array, must have
    • other parameters, optional

Any parameters in URL or request body,

normally it's GET request

Try it (F12, Network tab): https://snippet.webix.com/c1o1ij2l 

    { view:"list", url: "some_script" }
    //or
    list.load("some_script");

Dynamic Loading

  • linear data: scroll, paging
  • hierarchical  data: node opening
{ 
    data:[ .. ],
    pos:0,
    total_count:10000
}

GET some_script

GET some_script?start=50&count = 50

GET some_script

GET some_script?parent=2

{  data:[ .. ], parent:2 }
{  data:[ 
    { id:1, value:"Some" }
    { id:2, value:"Other", webix_kids:true }
]}

Try it: https://snippet.webix.com/dd9a5810

Try it: https://snippet.webix.com/c568ee86

Server Filtering and Sorting

  • { content: "serverFilter"}
  • clear data
  • request server for new data
list.clearAll();

//filter
list.load("some_script?filter[title]=a");

//sort
list.load("some_script?sort[title]=desc");

Datatable

General


{ id:"title", { content:"serverFilter" }, sort:"server" },
{ id:"categoryId", { content:"serverSelectFilter" }, sort:"server"}
  • sort:"server"

Try it: https://snippet.webix.com/dfcd73d8

Saving to Server

Request

Response

 

  • object with properties:
    • status ("success" or "error" or "invalid")
    • id or newid (for added items)
  • item data in POST, or.. 
  • REST: item data in POST, PUT, DELETE

Try it (F12, Network tab): https://snippet.webix.com/m1it5kfh

    
    { view:"list", save: "some_script" }
    { view:"list", save: "rest->some_script" }
    { view:"list", save: "some_script" }

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:"some_script"
});
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:"insert"

Request POST "some_script"

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

Response

Rest Mode: via Proxy

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

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

Add:             POST "some_script"

Update:      PUT "some_script/1"

Delete:        DELETE "some_script/1"

...same onStoreUpdated event

DataProcessor Options

    
    { view:"list", id:"mylist", save: {
        url:"some_script",
        trackMove:true
    }}

dp config and events

dp methods

dp init: save

    
    var dp = new webix.DataProcessor({
        url:"some_script",
        trackMove:true,
        master:$$("mylist")
    });
    
    { view:"list", save: {
        url:"some_script",
        on:{
            onAfterSync:handler,
            onBeforeDataSend:handler
        }
    }
    var dp = webix.dp($$("mylist"));

    //silent modifications
    dp.ignore(function(){
        $$("mylist").add({});
    });

dp init: object

Useful Links

Webix Topics:

Practice task: click here

Follow-up text: click here

1-5. Webix Basics. Collections and Server Side

By ihelga

Made with Slides.com

1-5. Webix Basics. Collections and Server Side

How to load, connect and save the data with Webix widgets.

  • 646

More from ihelga