A beginner explores the JavaScript Webix library.  
Part 3. Modules, charts, tree tables. 
Tags: javascript, webdev
Published: 2020-03-30 12:24:56

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/359iazmuwifqf0dt3gfa.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/" target="_blank" rel="dofollow">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.</p>
<p>In this part, I deal with the following: </p>
<ul>
<li data-aria-posinset="1" data-aria-level="2">splitting the project into modules;&nbsp;</li>
<li data-aria-posinset="2" data-aria-level="2"><a href="https://docs.webix.com/desktop__multiview.html">tabs and switching</a>&nbsp;between them;&nbsp;</li>
<li data-aria-posinset="3" data-aria-level="2">setting up&nbsp;<a href="https://docs.webix.com/datatable__index.html">a table</a>;&nbsp;</li>
<li data-aria-posinset="4" data-aria-level="2">drawing a<a href="https://docs.webix.com/desktop__list.html">&nbsp;list</a>&nbsp;and a<a href="https://docs.webix.com/desktop__chart.html">&nbsp;chart</a>;&nbsp;</li>
<li data-aria-posinset="5" data-aria-level="2">creating a<a href="https://docs.webix.com/desktop__treetable.html">&nbsp;tree table</a>.&nbsp;</li>
</ul>
<p>The source code is&nbsp;<a href="https://github.com/sashko-web/webix/tree/master/webix%20sourses%20for%203%20article">here</a>.&nbsp;</p>
<p>The finished application is&nbsp;<a href="https://snippet.webix.com/3hsddw9w">here</a>.&nbsp;</p>
<h2>Step 1. Splitting the project into modules</h2>
<p>To make things clearer it is better to split the project into modules. I create the following files and transfer the widget code to them:&nbsp;</p>
<ul>
<li>header.js-the<a href="https://docs.webix.com/desktop__toolbar.html">&nbsp;<em>Toolbar</em></a>&nbsp;widget;&nbsp;</li>
<li>aside.js-the<a href="https://docs.webix.com/desktop__list.html">&nbsp;<em>List</em></a>&nbsp;widget;&nbsp;</li>
<li>table.js- the<a href="https://docs.webix.com/datatable__index.html">&nbsp;<em>Datatable</em></a>&nbsp;widget;&nbsp;</li>
<li>form.js- the<a href="https://docs.webix.com/desktop__form.html">&nbsp;<em>Form</em></a>&nbsp;widget;&nbsp;</li>
<li>footer.js - the element with text: &ldquo;The software is ...".&nbsp;</li>
</ul>
<p>In new files I put widget configurations into variables, e.g.:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t1fdika114wdmznjjlfy.jpg)
<p>The created files are included in the index.html file in the following order:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wk6hcybrldxdd9horyqo.jpg)
<p>The script.js file now contains a simple application initialization code.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bku1lhzh04sap933295e.jpg)
<h2>Step 2. Tabs and switching between them</h2>
<p>The<a href="https://docs.webix.com/desktop__multiview.html" target="_blank" rel="">&nbsp;Multiview</a>&nbsp;component performs switching.&nbsp;I create it in the aside.js file:&nbsp;</p> 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ud5e19tbt37af59ir1bj.jpg)
<p>The tab code is in the cells array. Each tab needs an id. Multiview contains three tabs, the first of which contains the table and the form that were created earlier.&nbsp;</p>
<p>In the script.js file I replace the Table and the Form widgets with the Multi module.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3vn5dbu7uoxjjiomglk4.jpg)
<p>The<a href="https://docs.webix.com/api__refs__ui.list.html" target="_blank" rel="">&nbsp;List</a>&nbsp;widget acts as a switch between tabs.&nbsp;I set to the&nbsp;List&nbsp;widget elements the same id as the Multiview tabs.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qnkr6b6upiqiouurmnry.jpg)
<p>When you click on an element of the&nbsp;<em>List</em>&nbsp;widget, the&nbsp;<a href="https://docs.webix.com/api__selectionmodel_onafterselect_event.html">onAfterSelect</a>&nbsp;event is triggered. Inside its handler, we get the id of the selected element and show the corresponding tab referring to it by id.&nbsp;</p>
<p>Example:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/78w81lgakj244vxqas8a.jpg)
<p><em>Attention!</em>&nbsp;</p>
<p><em>Further actions with data will be performed with the local server running.</em> </p>
<h2>Step 3. Dashboard tab-table settings</h2>
<p>To delete a column or add a new one, the property&nbsp;<em>autoConfig:true</em> in the&nbsp;<em>Datatable</em>&nbsp;widget should be replaced with the&nbsp;<a href="https://docs.webix.com/api__ui.datatable_columns_config.html">columns</a>&nbsp;array with settings for each column.&nbsp;&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xw52ekm9i15gi7929px.jpg)
<p>- the&nbsp;value of the id property shows the data item field that will be displayed in this column;&nbsp;</p>
<p>- the&nbsp;<em>header</em>&nbsp;property in the element is the column header;&nbsp;</p>
<p>- all columns are set to a fixed width, but the second column with the fillspace property allows the title column to take up all the available space.&nbsp;</p>
<p>All settings of the table are predefined in the style.css file and we only need to insert the class name.&nbsp;</p>
<p>I add more data for the table from the data/data.js specifying the path to it using the<a href="https://docs.webix.com/desktop__data_loading.html">&nbsp;url</a>&nbsp;property.&nbsp;</p>
<p>Result:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v977hcdzkfuj7m8sawhq.jpg)
<h2>Step 4. The tab &ldquo;Users" - drawing a list and a chart</h2>
<p>In the second tab I will create a list and a chart. To do this, in the second Multiview element I will specify the name of the module as &ldquo;users&rdquo;.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/txa97eflqp71r17z4a57.jpg)
<p>&nbsp;I will create a new&nbsp;<em>users_module.js</em>&nbsp;file for the widgets.&nbsp;</p>
<p><strong>List.</strong>&nbsp;List refers to the<a href="https://docs.webix.com/api__refs__ui.list.html">&nbsp;<em>List</em></a>&nbsp;widget, which was previously used when creating the menu. The list rows must contain user names and country names.&nbsp;</p>
<p>List widget code:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k37u9sgt2cg0xd0mo4t7.jpg)
<p>The rows array is used to divide the workspace into two parts. The second one will be used for the diagram.&nbsp;</p>
<p>In the template property, there is a field between the # characters. The value of the field is taken from the data element that is loaded from the users.js file.&nbsp;</p>
<p>Result:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y843dqqbb563bwtyd1r1.jpg)
<p><strong>Chart.</strong>&nbsp;The library supports common<a href="https://docs.webix.com/desktop__chart_types.html">&nbsp;chart</a>&nbsp;types, all of which are created with the<a href="https://docs.webix.com/api__refs__ui.chart.html">&nbsp;Chart</a>&nbsp;widget with the&nbsp;<strong>type</strong>&nbsp;property.&nbsp;</p>
<p>I replace the setting template:"Chart" with the widget code:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9gcm9ldvnmt9irc8vx5j.jpg)
<p>- setting&nbsp;<em>type: "bar"</em>&nbsp;sets the linear chart type;&nbsp;</p>
<p>- the field name is passed to value, and it must be specified in `#...#`;&nbsp;</p>
<p>- the&nbsp;<strong>xAxis</strong>&nbsp;setting indicates the information shown on the&nbsp;<strong>X</strong>&nbsp;axis.&nbsp;</p>
<p>- template shows that there are age numbers below the chart lines;&nbsp;</p>
<p>- <strong>title</strong>&nbsp;contains the name of the chart, which is "Age".&nbsp;</p>
<p>Result of drawing the list and the chart:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ok7tvpxz61tg0509qh6u.jpg)
<h2>Step 5. The tab &ldquo;Products&rdquo; - tree table</h2>
<p>To initialize this component, I will create the products_module.js file. In the third element of the Multiview widget, I will specify the name of the module as "products".&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/blgy0bzphcml7qhhbtq6.jpg)
<p>The<a href="https://docs.webix.com/desktop__treetable.html">&nbsp;Treetable</a>&nbsp;widget is used to build a tree table. One of the widget columns should contain a template<a href="https://docs.webix.com/datatree__node_templates.html">&nbsp;{common.treetable ()}</a>, not to get a standard table instead of a tree table. The template allows you to immediately draw specific elements:&nbsp;</p>
<p>- an active icon to expand/collapse enclosed records;&nbsp;</p>
<p>- file/folder icons;&nbsp;</p>
<p>- indents depending on the record level.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gg4x54kptqr7xvrr88pr.jpg)
<p>The treetable component is filled with hierarchical data that I get from the products.js file.&nbsp;</p>
<p>Result:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t4lbi2j5arr6u6wuwem6.jpg)
<p>You can find the finished application<a href="https://snippet.webix.com/wfx663tz">&nbsp;here</a>.&nbsp;</p>
<h2><strong>Summary.</h2>
<p>The most important thing is to divide the code into modules. It helped to avoid confusion in the code, and to organize a multi-page interface. It was exciting to explore new Webix widgets in the form of charts and freely editable lists of tables.&nbsp;</p>