My career in front-end developing has just started. Currently, I am on a trial period in one of the IT companies in Minsk. I am exploring the subtleties of the web-ui development on the basis of the JS Webix library. I am happy to share my modest experience as a guideline of this curious UI library.
SIXTH TASK
Any operation in the Webix JavaScript library appears first of all on the client side. After that the server gets the result in case the data needs to be saved. The developer needs to connect the server and to work with simple queries, in case custom behavior is not intended for the project.
We will deal with the following issues:
- connecting the server part of the app;
- methods of requests to the server;
- how to track the download result;
- how to track the result of saving.
The DataTable widget is described in detail in the documentation.
The source code is here.
The finished application is here.
Connecting the server part of the app
We are going to work with the DataTable widget. The structure of the application has been changed in the source code. Two folders have been added: backend, with a simple server script on nodeJS, and the app folder, with the client code. There are separate files for the server operations. The films.js file is for the DataTable widget.
The DataTable widget code is placed in the table.js file of the app folder and is rendered in the Dashboard tab.
First, we run the application on the local server with the following commands:
npm install
npm run server
Then there is the following in the terminal:
Server is running on port 3000...
Open http://localhost:3000/app in browser
To load data into a table we provide the path to the script in its url property.
url: "/samples/server/films",
To send save requests, the path to the script is indicated in the save property.
save:"rest->/samples/server/films",
Methods of requests to the server
We will use the RESTful API method and other methods for the data operations, such as: GET, POST, PUT, and DELETE.
With the rest prefix already set in the save setting, all requests will be sent via the corresponding built-in proxy. The rest proxy matches the request method with the type of operation performed on the client. There are a few built-in proxies Webix suggests. It is also possible to create your own custom proxy.
We will track queries on the DataTable widget example. So, we go to DevTools->Network in the browser and look for the information on the desired request.
To load data to a table, we use the GET method.
We refresh the page and click on the request to the films script.
By default, there are no parameters in this request, as it is the first data loading into the component.
Thus, the server returns us the JSON array with all the data.
Result of the GET request:
To create a new record in the table, POST method is used.
We use the form to add new data to the table.
We send the following form data in the request body:
When adding an entry to the server the response must contain the id assigned there:
{"id":"ImurRuK1k59qzy2f"}
This is important not to lose the connection between the data on the server and the client. The same id will now be used on the client.
To change data in table rows, PUT method is used.
We select the first row in the table to edit it in the related form. Then we change them and save. The entire record (object with data) with the changes will be sent to the server.
The server will return the following JSON:
{ status: “updated”}.
To delete data, DELETE method is used.
We delete the first row by clicking on the cross icon.
In this case, the entire row will be passed to the server. The main thing in the parameters is the id of the record to be deleted on the server.
The server will return an empty object, since no special confirmation is required for this operation.
Tracking loading results
To count the number of records loaded into the table and output it as a message, we use the ready handler.
The Ready handler is called once the first data is available in the component. We put the webix.message() function inside the handler calling the count method. When the data is loaded, the notification “Loaded 250 records!" appears in the right upper corner of the screen.
Loading data:
In case of an error, the onLoadError event is triggered:
Tracking the result of saving
To get the server response for adding, editing, and deleting operations, we access the DataProcessor module. You can use the API of this module to tune the data saving more precisely. To track the moment of saving, we use the onAfterSync event.
The DataProcessor module is accessed with the webix.dp(id) method, where id corresponds to the widget in question (here - Datatable).
The onAfterSync event is called after the response from the server is received and processed. In the event handler, we render a message via webix.message(). After saving, the phrase "Saved!" appears in the right upper corner.
We delete the first row in the table and here is the result.
The events handler code is in the script.js file after Webix UI initialization:
Errors in this case can be detected with the onAfterSaveError event:
Summary
Using CRUD operations, we unout how to interact with the server part of the application. We considered the standard set of query methods and the way to track data loading and saving. The examples discussed in this article are available both for the DataTable and List widgets. Use the source code referenced at the beginning to try everything yourself.
The code of the finished application is here.
Top comments (0)