Intermediate

Server-Side Integration: Loading and Saving Data

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.

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 incoming data is 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.

If you are unsure what to do in case you need to get data from a different domain with relations to your app's one, consult our solution to cross-domain data loading.

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"
}

Related sample:  Server-side Integration: Custom URL

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 is either

Other Ways of Integrating with Server

Further Reading

Back to top