Intermediate

Implementing Server-side Integration

On previous steps you've done a good job.

You've set the layout for the app and placed UI components there. See Basic All Tutorial. Step 1.
You have enabled interaction between different components within the app. See Basic All Tutorial. Step 2.

Now it's time to learn how to work with data stored in the database and how to save all CRUD (create, read, update, delete) operations back to the database.

The tasks for server-side are as follows:

to populate our list with data from the database;
to ensure that all the changes you make on the client side (within the component) are reflected in the database (items should be added, deleted and updated in the DB).

Loading Data from the Database

You can load the data to the list from your server-side script. Set the path to the script in the url property in the list configuration:

{
    view: "list", id: "mylist",
    template: "#title# - #year#",
    select: true,
    url: "../server/films"
}

Saving Data to the Database

If you want all client-side changes to be saved to the database, you can set the path to your server-side script in the save property:

{
    view:"list", id: "mylist",
    template:"#title# - #year#",
    select: true,
    url:"../server/films",
    save:"../server/films"
}

DataProcessor Initialization

Webix.DataProcessor is responsible for server-side integration and handles all the CRUD operations.

DataProcessor is initialized implicitly if you set the save property. It can also be initialized explicitly for the component you wouldd like to perform server work with:

var dp = new webix.DataProcessor({
    master: $$("mylist"),  // specifies the desired component
    url: "../server/films"  // specifies the server API endpoint
});

Very often DataProcessor gets the same url that is specified as the component data source. At the same time, it can be your own piece of code if you want your own / custom logic.

DataProcessor will automatically "translate" all your actions to the server: when you add a record to the list, the new record will appear in the database table, etc.

Component Binding

At last, let's make a step up and simplify form update. In the previous step, you used the "onAfterSelect" event to transmit list data into the form and the "save_row" function to push the edited data back to list.

At the same time, Webix library has powerful Binding API to enable data synchronization between components. Bind() function is used to make one component a data source for another one on selection basis.

The updateItem() function is no longer needed as well, since from now on you apply the save() method to the form to push changes back to the list and the database.

 
webix.ui({
    view: "toolbar",
    cols: [
        {...},
        {
            view: "button",
            value: "Save",
            width: 100,
            click: function(){
                $$('myform').save();
            }
        }
    ]  // the new function for the button
});
 
$$("myform").bind($$("mylist")); //component binding

Addition and removal of items goes the same way as it was on previous step.

Implementing Server-side Integration

Loading Data from the Database

Saving Data to the Database

DataProcessor Initialization

Further Reading

Component Binding