Part 4. Working with data. CRUD 
Tags: javascript, devops, webdev
Published: 2020-03-31 06:36:44

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zxdv6jcysn8wymzv9hkv.png)
<p>My career in front-end developing has just started. Currently, I am on a trial period&nbsp;in one of the IT companies&nbsp;in Minsk. I am exploring the subtleties of the web-ui development on the basis of the <a href="http://www.webix.com/">JS&nbsp;Webix&nbsp;library</a>. Sure enough I am glad to share my modest experience and to save it as a guideline of this curious UI library.&nbsp;<br />&nbsp;</p>
<p>FOURTH TASK&nbsp;</p>
<p>The Webix library has all the tools for implementing basic web development functions,&nbsp;<a href="https://ru.wikipedia.org/wiki/CRUD">or CRUD</a>. This article covers the following tasks:&nbsp;</p>
<ul>
<li>editing table data via the form;&nbsp;</li>
<li>installing the<a href="https://docs.webix.com/desktop__editing.html">&nbsp;built-in row editor</a>;&nbsp;</li>
<li>adding data to the list and the chart;&nbsp;</li>
<li>deleting items.&nbsp;</li>
</ul>
<p>&nbsp;In the documentation, you can learn more about the&nbsp;<a href="https://docs.webix.com/desktop__list.html">List</a>&nbsp;widget, the&nbsp;<a href="https://docs.webix.com/desktop__treetable.html">Treetable</a>&nbsp;widget, and the&nbsp;<a href="https://docs.webix.com/datatable__index.html">DataTable</a>&nbsp;widget covered in the article.&nbsp;</p>
<p>&nbsp;The source codes are&nbsp;<a href="https://github.com/sashko-web/webix/tree/master/webix%20sourses%20for%204%20article">here</a>.&nbsp;</p>
<p>&nbsp;You can find the finished application&nbsp;<a href="https://snippet.webix.com/dvf2u6z0">here</a>.&nbsp;</p>
<h2>Step 1. Editing data via the form.</h2>
<p>I work here with the&nbsp;<em>"Dashboard"</em>&nbsp;tab where the table and the form are drawn. The table code is located in the table.js file, the form code is in form.js.&nbsp;</p>
<p>I will add&nbsp;the&nbsp;<a href="https://docs.webix.com/api__selectionmodel_onafterselect_event.html">onAfterSelect</a>&nbsp;event to the&nbsp;<a href="https://docs.webix.com/api__refs__ui.datatable.html">Table</a>&nbsp;widget. When this event is triggered, I will get data from the table and pass it to the form fields.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/43br79hcnnvbwjsrkjal.jpg)
<p>The&nbsp;<a href="https://docs.webix.com/api__values_setvalues.html">setValues()</a>&nbsp;method in the above code passes the received values to the form.&nbsp;</p>
<p>I run the code and check the result:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mgj7kexqc2vfaaoppnrz.jpg)
<p>When the row in a table is selected, its data automatically enters the form and is ready to work.&nbsp;</p>
<p>To make the process more challenging, I will save the changes if the data is taken from the table and edited.&nbsp;&nbsp;</p>
<p>I rewrite the&nbsp;<strong><em>saveItem</em></strong>&nbsp;function and add new methods to it:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b88f7kftjnf4yildyo3m.jpg)
<p>Now there is the following algorithm in the function:&nbsp;</p>
<p>- first, two conditions are checked : whether the form data has passed validation, and whether changes have occurred in the form. Changes in the form are tracked by the<a href="https://docs.webix.com/api__values_setdirty.html">&nbsp;isDirty()</a>&nbsp;method;&nbsp;</p>
<p>- second, the condition "item_data.id" allows you to define a new record. A row with all its data is passed to the form, including the id, for which there is no text field in the form, but it is required for the data. The form stores and allows you to read all the passed values, so we use the id for verification.&nbsp;</p>
<p>- finally,&nbsp;after verification, either a new record is added using the<a href="https://docs.webix.com/api__link__ui.proto_add.html">&nbsp;add()</a>&nbsp;method, or the current element is updated with new properties. </p>
<p>To update the edited data, I use the<a href="https://docs.webix.com/api__link__ui.proto_updateitem.html">&nbsp;updateItem()</a>&nbsp;method. It takes two parameters: id of the selected element and a set of new properties taken from the form. When the function is called, the current data is replaced and supplemented with new data. </p>
<p>Result:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i7farw8penofhdvy8tmj.jpg)
<h2>Step 2. Installing the built-in editor.</h2>
<p>In the previous step, I edited the table data using the form. Now I will try the editing method directly in the element. This method is applicable both in the table and in other components for working with a large amount of data, for example, in the list.&nbsp;</p>
<p>I start with a tree table in the "Products" tab. The table code is in the products_module.js file.&nbsp;</p>
<p>The&nbsp;<a href="https://docs.webix.com/api__refs__ui.treetable.html">Treetable</a>&nbsp;widget allows you to edit table contents, but this feature is disabled by default. Editing is set in two places: in the table configuration with the&nbsp;<strong>editable:true</strong>&nbsp;setting, and in the configuration of each column. The editor:"text" setting is set to the columns. The &ldquo;text" attribute specifies the type of the editor. For more information about editor types, see the&nbsp;<a href="https://docs.webix.com/desktop__editing.html">documentation</a>.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2w1gu44a5b8qk2xcspk.jpg)
<p>I added editors for the Title and Price columns in the code. By clicking on any cell the text field editor opens up:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7tkp1tponsrtkpnk0grf.jpg)
<p>Now I will go to the "Users" tab, and analyze the option with editing the&nbsp;<a href="https://docs.webix.com/api__refs__ui.list.html">List</a>&nbsp;widget. The widget code is located in the users_module.js file.&nbsp;</p>
<p>Data editing is available by default for the TreeTable and DataTable widgets. To use the built-in editor in other widgets, you can use the special<a href="https://docs.webix.com/desktop__edit.html#editingotheruirelatedcomponents">&nbsp;EditAbility</a>&nbsp;module. I use this module to edit the List widget data. To do this, I will create a user&nbsp;component using the<a href="https://docs.webix.com/desktop__custom_component.html">&nbsp;protoUI</a>&nbsp;method based on the List widget.&nbsp;</p>
<p>I write the name of the future widget (the name property) and inherit the necessary modules for the widget base.&nbsp;</p>
<p>Prototype of the List widget.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/we3ujgx3nl1qdqjcebs4.jpg)
<p>After calling protoUI, I get the finished component. It is built into the widget in the same way as all other components: with the view:"editlist" setting.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lxu703yy67ztlgund9kc.jpg)
<p>Since there can be many fields in each record, and both name and country are drawn in the List template, the&nbsp;<a href="https://docs.webix.com/api__editability_editvalue_config.html">editorValue</a>:"name" setting is added in the&nbsp;configuration, indicating which field can be edited.&nbsp;</p>
<p>Result:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/etxjd65i6eno9rl76pax.jpg)
<h2>Step 3. Adding data to the list and chart.</h2>
<p>This part of the article uses the List and Chart widgets, the code of which is located in the users_module.js file and drawn in the Users tab.&nbsp;</p>
<p>The&nbsp;Chart and List widgets&nbsp;use the same data of the JSON array. Therefore, when I implement the opportunity to add data, it is necessary that it falls into both components.&nbsp;</p>
<p>To do this, I will draw the "Add new person" button in the users module.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/stp3zlr8btcaq4st2plx.jpg)
<p>Clicking on the button calls the&nbsp;<em>addPerson</em>&nbsp;function that adds a new entry to the list.&nbsp;</p>
<p>The chart shows the age from each record, so a random number will be generated for a larger spread.&nbsp;</p>
<p>Function for adding a new record:&nbsp;</p>
<p>Result:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ud3f617gywgl7hmio4r.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2y4tihycsld38q0gjr57.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2btv55h2wa6m4lk6weua.jpg)
<h2>Step 4. Deleting elements.</h2>
<p>To begin with, I create a new column with&nbsp;an html tag and an icon&nbsp;in the Table widget.&nbsp;</p>
<p>To process clicks on icons, I take the delete_icon class and write it to the onClick object as a key, the value of this key will be the function, which is the handler. Among the arguments the ID of the record comes, so I can delete it with the&nbsp;<a href="https://docs.webix.com/api__datastore_remove.html">remove()</a>&nbsp;method.&nbsp;</p>
<p>List widget code:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ccalho4e75h8x8xebin.jpg)
<p>The List widget’s rows removal algorithm is the same as the Table widget’s:</p> 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/saa3h4ml9w0ik8wj7rhv.jpg)
<p> Result of rows removal in the Users tab:</p> 
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nk2sym4jpg0ge37j12du.jpg)
<p>You can find the finished application<a href="https://snippet.webix.com/dvf2u6z0">&nbsp;here</a>.&nbsp;</p>
<h2>Conclusion</h2>
<p>CRUD implementation in the Webix JS library is performed in different ways. There are built-in editors for changing data, and&nbsp;<a href="https://ru.wikipedia.org/wiki/API">API</a>&nbsp;that allows you to do the same through a third-party form.&nbsp;The whole set of CRUD functions can happen in the form with several rows of the code. It is easy to combine various functions in the&nbsp;library architecture.&nbsp;</p>