Intermediate

Loading and Saving Data to Server Side

Server-side integration is possible with Webix data components, client-side data stores (called Data Collections) and forms. It is enabled in several ways:

you can write your own custom scripts in your favorite language to load data and save changes back;
you can use server-side REST API (MVC.Net, Ruby on Rails, PHP Yii MVC frameworks coupled with your scripts or connectors);
you can choose one of additional ways.

You can launch Node.js server-side samples provided in the Webix package. After you downloaded the package, run the following commands:

npm install
npm run server

Examples of Integration with Server-side Platforms

There are several packages of samples intended for illustrating the ways of using Webix with different server-side platforms:

Data Loading

Basic client-side code that enables loading data to a component during its initialization is as follows:

webix.ui({
    id:"dtable",
    view:"datatable",
    url:"data.php"
});

Or, to load data after component initialization, apply load() method to it:

$$("dtable").load("myscript.php", "xml");

Note that

The server script that you state as the url parameter or pass into the load() function executes GET request and returns data from server in either of the possible data formats;
You should specify the datatype parameter if the incoming data are not JSON (the default datatype);
In case of long datasets dynamic loading functionality will be helpful;
The default loading pattern can be customized: you can set specific loading modes or use ajax helper for passing parameters into a loading script.

More info about custom scripts is in the dedicated article.

To load data from MongoDB, you might need to convert _id to id (the identifier in Webix). You can do it when you load data using a proxy. However, you can extend DataStore id method and use the primary key _id to set the id for incoming objects in order to improve performance.

webix.DataStore.prototype.id = function (data) {
  data.id = data._id || data.id || webix.uid();
  return data.id;
}

Data Saving

Basic client-side code that enables data saving from a component to database is as follows:

webix.ui({
    id:"dtable",
    view:"datatable",
    save:"save_script.php"
});

Note that

A saving script gets data in POST request and saves them to a database.
A saving script typically returns the operation status and the ID of the changed item. To tune the server-side response, look into the dedicated article.
Saving can be implemented via Webix Ajax helper, which adds more flexibility.

In addition, the save property automatically initializes DataProcessor for this component, so that data changes are transmitted to your saving script. DataProcessor listens to component events, defines the editing operation (as insert, update and delete one) and sends changed data to a server script in a POST request.

Defining Operation Type

By default, the operation status comes as webix_operation in a POST request. Usually, a saving script is single and contains patterns for different operations.

At the same time you can define a specific script for each operation. DataProcessor will define the type of an operation, and the necessary script will be executed:

save:{
    "insert":"data/insert.php",
    "update":"data/update.php",
    "delete":"data/delete.php"
}

If you need to change the default pattern of data processing, look up Dataprocessor docs.

Saving Uploaded Files

If you use Webix Uploader, you may wonder about how saving of the files is performed.

{
    view:"uploader",
    id:"uploader1",
    name:"uploader"
    upload:"upload.php"
    autosend:false
}
 
$$("uploader1").send();

Note that

Autosend should be set to false in order for saving to start only when you call the send method. When you call it, the script specified in the upload property will be executed;
Server part of file upload is described in detail in the dedicated part of uploader documentation;
The information about how to save form and uploader data separately is nearby.

Saving Form and Input Data

Form data are either

pushed to the component it is bound with;
or (more typically) is sent to a server by a Webix Ajax request.

Loading and Saving Data to Server Side

Examples of Integration with Server-side Platforms

Data Loading

Data Saving

Saving Uploaded Files

Saving Form and Input Data

Further Reading