Intermediate

Server-Side Integration

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.

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

  • Server script you state as url parameter or pass into load() function executes GET request and returns data from server in either of the possible data formats;
  • You should specify datatype parameter if incoming data is not JSON (the default datatype);
  • In case of long datasets dynamic loading functionality will be helpful;
  • Default loading pattern can be customized - specific loading modes, ajax helper for passing parameters into load 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

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

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

Defining Operation Type

By default, operation status comes as webix_operation in POST request. Usually, save 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 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 that saving starts only when you call the send method. When you call it, the script specified in 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