DEV Community: JavaScript-Webix-UI

What To Look For When Choosing the Right JavaScript Library

JavaScript-Webix-UI — Wed, 28 Sep 2022 12:44:57 +0000

Choosing the right JavaScript library is crucial, especially early in a project. Otherwise, there is a big chance you spend a lot of time cleaning up the mess later. But how to know which one is best?

In web development, there isn't always a single "best choice." However, there are usually better options than others, and considering the following factors might assist you in making the right decision.

Widespread usage

Libraries and frameworks that are widely used provide access to a lot of tutorials, courses and discussions about best practices, how-tos, and blogs. Widely used libraries and frameworks would also make it easier to find developers with the necessary experience. In addition, many developers would be eager to work for your business and gain experience.

Detailed documentation

A good documentation makes the library easy to use and helps avoid wasting time. Libraries with straightforward and understandable APIs can get by with little documentation. But complex libraries with difficult concepts require in-depth explanations, examples, and tutorials. You can get started more quickly if you refer to the documentation, which may even include sample code.

Development activity

Active development ensures that any bugs are immediately rectified, and new functionality is added to projects. Check the date in their changelog to see how recently the library was updated. If the library is published in an open source repository like GitHub and there isn't a changelog, you can look for the most recent commit date.

Active community

A big user base may increase the likelihood that bugs will be found quickly and frequently. More external contributors to the library or framework may result from an active community. They may assist in delivering features that would not normally be on the author's plan. It could also mean the addition of more courses, videos, courses, manuals, and tutorials on the relevant library or framework.

Browser support

Verify that a library supports each of the browsers you choose. Many libraries these days purposely don't support earlier browsers’ versions, which your website may need to support, because they are exclusively meant to be lightweight. If the UI component from a library is ever used by your users on a mobile browser, it needs to function properly for them there.

Examples of powerful JS libraries, that fit most of the criteria

Webix JavaScript UI library

The library provides more than 100 widgets and components for building desktop, mobile, and web applications. There are also 13 complex widgets that can function as standalone programs. All of them are adaptable, interact with other famous frameworks, and work with modern browsers and devices. Before making a choice, developers can weigh all the advantages and disadvantages of the software during the free trial period.

Kendo

Kendo UI is a set of four JavaScript UI libraries built for jQuery, Angular, React, and Vue. You can quickly incorporate powerful JavaScript components into your existing or new projects. With just a few lines of code, you can easily add complex elements like data grids, charts, schedulers, and calendars.

Underscore.js

A powerful library with useful functions for numerous programming tasks. More than 100 functions are available, including general ones like map, filter, and invoke as well as more specialized ones like those for function binding, deep equality testing, building indexes, and JavaScript templating.

Sencha

Ext JS comes with more than 140 tested and pre-integrated high-performance UI components. You can speed up web application development with the help of this framework, designed for easy integration. There are also countless user add-ons available from the Sencha community.

Backbone.js

A lightweight JavaScript library makes it possible to create and organize client-side web applications. Various building components, including models, views, events, routers, and collections, are provided by BackboneJS. It is an open-source, free library with more than 100 available extensions.

Conclusion

The selection of a library to enhance the development team's tools is not a simple task. Therefore, it is essential to choose the framework carefully and to involve developers in the process. The key points we mentioned in the article may help when you next choose a library or framework to use.

5 Essential JavaScript Widgets for Effective Developers

JavaScript-Webix-UI — Mon, 12 Sep 2022 13:38:30 +0000

Over the past years, the demands placed on front-end developers have grown rapidly to the point where JavaScript codebases are getting increasingly complex. It gets harder to reason about a piece of software as it gets more complicated.

This is where complex widgets come for help. These components allow building high-performance web applications and help accomplish a variety of tasks – make complex calculations, create interactive reports, manage workflow, and perform advanced data filtering.

JavaScript File Manager

It is a pre-made solution that can be incorporated into any web application. The JavaScript File Manager has all the tools required to work with lists of items, including table and tile views, sorting, and searching. Additionally, this widget features a double panels view for working with files in the traditional manner.

Features:

Recognizable file-management interface with a split panel, previewing, and a file catalog tree, table, and tile arrangement.
Simple file and folder name navigation and search.
A built-in upload manager, the ability to download and upload files with a single click or using drag-and-drop.
Efficient work with two folders in the Total commander style.
Text and media file previews are available both in the preview panel and for large tiles.

JavaScript Spreadsheet

This web widget that may be customized and has all the capabilities of spreadsheets in the Excel format. There are all the standard Excel features available: formulas and math, sorting and filtering, editing, and numerous data types.

Features:

Export data to Excel, PDF, or PNG files and import Excel documents into web SpreadSheet.
Add a formula editor, subbars, menus, and change the number of columns and rows by modifying the customizable SpreadSheet UI.
Dates, numbers, monetary units, and text labels are localized to follow the laws of specific countries.
To add more functionality, use the popups, dialogs, and other Webix UI library elements.

JavaScript Kanban

Any project management tool can incorporate this ready-made JavaScript component. It allows users to take full control of their workload and effectively manage tasks. This advanced widget also aids in speeding up design and development.

Features:

Compact and functional design makes it easy to visualize the working process.
Add text, tag, and attachments, change the color, status, and performer for cards.
Simply move task cards between the columns and add comments to the tasks.
The component renders with lightning speed and is written entirely in JavaScript.
All components can be changed using the API, without editing anything in the source code.

JavaScript Scheduler

Web calendar that can be integrated into any business application. This solution can be used to plan events, schedule meetings, book items, and more. Because Scheduler is designed as a web widget, you may incorporate it into any browser-based solution, including websites, IoT panels, and single-page apps.

Features:

Compiling events from various calendars or other sources, then setting up the display of those events for the chosen group.
Each day is divided into a number of vertical sections, where the events are shown one after the other.
Timeline can be shown in three modes: day, week, month.
Adding unique features to events by selecting color schemes, creating recurrent activities, and segmenting a given day's schedule into specific time slots.

Webix Chat / Messenger

With the ability to manage the contact list and the chat's appearance, JavaScript Chat allows the creation of chat rooms with several users. You can download and add Webix's JS complex widget, which combines Chat and Messenger functionalities, to your business application.

Features:

Possibility to message multiple users.
Searching and selecting chat channel contacts.
Communication via audio and video calls.
Sharing files with each other as well as downloading them.
Selecting the channel's icon and entering the chat's name.

Conclusion

Complex widgets are easy to configure, integrate and customize for different purposes and specific apps. All of them operate perfectly in the Angular or React environment and have thoroughly documented the API, backend service and methods so that you can connect any back-end.

Project Resource Management: When? Why? What?

JavaScript-Webix-UI — Wed, 23 Feb 2022 11:37:14 +0000

When you start a project, you think about the aim of it, about the developers who will implement your idea, and about the money that you will need to invest. As a rule, a start-up is a small team, where all the processes happen intuitively without any additional tools because you can't spend extra money and also because everything does work well.

When the project starts growing it is impossible to keep everything in mind, at the same time, making notes on paper is not effective. This is the time when you may consider using some additional tools to help you with the workload and to manage your resources. In this article, we will focus on the idea of resource management. We will try to understand what it is, why it is useful, and we will also define the best solutions from the JavaScript resource management components that exist today and that your project can benefit from. So, look through the text to find the part you need or read it all if you are not sure if you know what we are talking about.

Resources you need to manage

Resources are all the things the team needs to implement the project. If you are dealing with e-commerce, your resources are the goods in stock, transport for the delivery, couriers, software. If your business is event management, you probably need catering services, music equipment, contacts of available venues. Thus, resource management is the process of planning your business, allocating tasks between team members, and tracking the implementation of all the activities. The better you organize your resources, the higher the performance will be. People will know what you expect them to do, they will be motivated and focused. And of course, the resource management process is a must for a big team. You can't individually talk to each person if you have 100 people on staff. So, it is more convenient to have a special tool with an opportunity to visualize the tasks.

Benefits of the resource management tools

Project management
It doesn't matter how big or small your company is. Resource management tools will allow the business to carefully monitor each step in the strategy of further development.
Transparency of the processes
When your operations are transparent, the team members know their workload, they are not stressed. Besides, customers are aware of the progress, other teams may ask for support, and the general goal is clear and manageable.
Team motivation
We all enjoy pleasant working conditions. When we know our tasks ahead, we can be relaxed and we know what to expect from the next working day. It contributes to work satisfaction and employees are glad to be of service.
Decreasing risks
Thorough resource allocation and exploitation lead to minimizing risks in the future.
Return on investment assessment
When you know what you need and you know when you will need more, it provides you with the vision in the long-term perspective. Thus, you can predict the time when your investment will pay out.

Resource management JS components

We now move on from theory to practice. Let's explore the features of the tools that are offered today and have high users ratings.

Webix Gantt Chart

The Gantt Chart widget is a complex widget from the Webix UI library. Complex widgets are complete single-page applications, that developers can use independently or build into the environment of their system. All Webix widgets comply with any modern browsers and devices and integrate with Angular, React, Vue. The library is regularly updated and new features become available to users holding a license.
Features of the Gantt Chart:

viewing, creating, editing tasks
tasks allocation and resources assignment
marking the start and end of the task
critical path mapping

Webix Kanban JS

This is one more complex widget of the Webix UI library that is successfully used by the developers in their projects. Kanban is a task management board, it is probably a simpler solution in comparison with Gantt, but it still copes with tasks allocation perfectly well. A custom pack of the available license plans allows users to choose the widgets they would like to have. A free trial period is also available.
Features of the Kanban widget:

cards with tasks
commenting tasks
drag-n-drop
compact view mode

GanttPro

This is a powerful solution that includes not only the functionality of a resource management tool. It is a complete online platform that contains solutions for team cooperation, budget tracking, time management, resource management, and others. A free trial period and fast registration on the platform allow users to start benefiting from the solution in just 3 minutes.
Features of GanttPro:

saved history of the project
setting roles and calendars for team members
managing the workload of the resources
various access permission rules

Bryntum Scheduler Pro

Another JS component that integrates with any popular modern framework. Web components from Bryntum are supported with detailed documentation, a blog, and a trial period. Scheduler differs from Gantt or Kanban but it also allows to arrange the tasks depending on the availability of resources.
Features of Scheduler Pro:

tasks links and connectors
customized styling
highlighting overloading
synchronized resources shifts

Syncfusion Gantt Chart

Syncfusion offers a wide range of components for creating web, mobile, and desktop applications. Besides the components, they also provide users with a developer, analytics, and reporting platforms that comprise many useful tools and serve as a powerful support for the team.
Features of the Gantt Chart:

binding various formats of data
different timeline views
tasks dependencies
filtering and sorting

Conclusion

Resource management tools are useful components that facilitate working processes and increase the general performance of the team. Those components take over a significant part of the tasks, letting the team leads and project managers concentrate on more challenging issues. With a resource management solution, the daily routine activities will be monitored resulting in continuous progress and employees satisfaction.

How to Create a Simple Web App Using JavaScript UI Library

JavaScript-Webix-UI — Wed, 30 Jun 2021 09:48:26 +0000

JavaScript was designed for developing simple web applications with interactive interfaces. So far, it has become a highly demanded skill among programmers as it can create rather complex solutions with a limited number of code lines. Together with HTML and CSS, JS has proved to be a powerful programming language. While HTML deals with the structure and contents of the application, CSS is responsible for the style, JavaScript deals with the following tasks:

Interactivity. When we open up a site, all the buttons respond to our actions, the fields are validated and the pictures slide. All those activities are possible due to JS.
Animation. You are creative, and you want your site to grab users' attention at first sight. JavaScript is there for you. With modern frameworks and libraries, such as Three.js,Anime.js,Mo.js any imaginable animation is possible.
Games. JavaScript is probably not the best tool when it comes to the gaming industry. But it can be successfully used for something simple or as a learning tool for those who are into game development.

Why use a JS UI library?

JavaScript UI library is a set of tools and components that can be used as ready-made pieces in the development process. Such an approach shortens the time on the development, as you do not need to create everything from scratch. Besides, it is convenient if you want to show the prototype of the future project to your clients. JS libraries provide junior developers with a learning tool. They gain experience by studying the principles of building apps with ready-made widgets.

How to create an app?

There is a wide variety of JS libraries on the market. Some of them are more well-known, like React or jQuery, others are less popular but not less productive, such as Webix. Let's briefly outline the steps of creating a simple web app with a JS library:

The first step will be to define what app you need. Is it a messenger tool or an app for tracking someone's progress, or a simple project management solution?
The second step will be to set up the budget. Whether you prefer to rely on an open space solution or you have a sum that you are ready to invest into your project. The first option leads to much independent work. You might have a difficult time trying to figure out how things should best work for you. If you opt for buying a license, that will guarantee technical support, detailed documentation, and probably some mentoring from the side of the developers. Everything depends on the product and you'd better choose the one that is regularly updated.
The third step is the most interesting one. Get started and fire away.

Since there is enough information on the web about open-source solutions, let's look at the library which is less popular but surely worthy of attention. Webix UI library has gained 4.8 out of 5 on Capterra. The library has been developed by XB Software since 2008. It is regularly updated, there is a blog with lots of reviews of the users. Many of them note the responsive support, the convenience of outsourcing services, and the speed and ease of building apps with the help of the Webix complex widgets. The downsides of the library mentioned are the documentation which is quite restricted and the lack of examples of combining Webix with TypeScript.

What are the apps easy to create?

If you need to deal with data, folders, and documents, you will benefit from the File Manager or Document Manager widgets.
If you are interested in project management, the Kanban widget will be handy.
Webix Scheduler will help to develop a simple event calendar, that will be compatible with mobile devices.
Chat widget is a tool for the messenger application.

Wrap-up

The purpose of any JS library is to make the life of a developer easier. Webix UI library successfully copes with this task. The number of tools ready to be used is staggering, the Webix team does its best to improve and to enhance their offspring. In general, the JavaScript language has gained a stable position in the IT development process and it will continue supporting its reputation with the help of libraries and frameworks that are designed to help programmers.

10 Helpful JavaScript Demos for your Business

JavaScript-Webix-UI — Thu, 25 Mar 2021 12:24:02 +0000

There are two ways we can understand the word demo in the IT development. It may be a meeting with the team and the stakeholders to review the sprint in the Scrum methodology. It may also be understood as an example of the product given to a potential customer to attract their attention and check if they need the product and ready to pay for it. In both meanings we talk about some small result of the development process that is used as an example and that can show what the future solution will be capable of.

Using demos in the development process is an effective idea for several reasons:

customers see the future product, they know what to expect;
the time for the design customization is saved;
demos teach customers how to interact with the future application.

In this review, we will focus on the most common types of web apps and resources to find suitable demos for them.

Dealing with files

There is a wide choice of JavaScript libraries and frameworks that offer tools for creating file manager applications for uploading, organizing, and previewing files. Business domain is not limited to any specific topic, as any business needs documents and convenient tools for coping with their flow.

JavaScript/HTML5 File Manager – view demo
The following components are used: DataView, Grid, Form, Layout, Menu, Popup, Tabbar, Toolbar, Tree, and Window. The features include uploading and downloading files, creating and deleting folders, grid and list preview modes, sorting and searching files, and keeping track of the space left.
Webix JS File Manager – view demo
This solution includes additional advanced features, such as cards view, split panels view, and media files playback.
Syncfusion File Manager – view demo
It contains built-in searching functionality with which users can search for an item in the current path and its child folder. Besides, features include ascending and descending search order by the name, size, and date, built-in drag-n-drop and multi-item selection.

Online communication

With the Corona virus people spend much time at home, so it should be easy for them to solve any issue online. The following JS libraries and frameworks offer an opportunity of online chat or messenger.

TalkJS – view demo
This real time messaging solution has the following features: channels, groups, and topics, presence, typing, and read indicators, translation, file and location sharing, emojis and text formatting. The UI is pre-built and highly customizable. TalkJS can also boast a robust notification system, that supports push, email, SMS, and desktop notifications.
Webix JS Chat – view demo
The solution includes chat and messenger functionalities. It offers chat rooms, managing channels, and a list of contacts.

Hotel management

The requirements for the solutions in the domain of hospitality business are quite common. They include booking tickets, rooms, car rentals, online communication. Here is a list of popular demos:

DHTMLX JS Scheduler - go to the site
This is a Google-like calendar component with 10 views for booking appointments. The demo of the hotel reservation can be seen here. It includes room types filtering, different statuses for the rooms and booking, drag-n-drop. Car rental demo is also shown. The features are similar.
Webix Booking App – view demo
This widget allows everything mentioned: search tickets, book rooms, and rent cars. It supports all browsers, can be integrated with jQuery, Angular, React, Vue.js, and Backbone. The widget is easily customizable.
DayPilot Hotel Room Booking – code tutorial
You can create a simple JS booking system with this tool. The features include drag-n-drop, filters, and statuses. The demo is configurable with a DayPilot JS API. The appearance may also be modified using the default theme or custom CSS classes. This app can be used with Angular, React, Vue.js, and jQuery.

Hospital management

Another trend of the previous year that is going to stay with us for quite some time is online medical service. Social distancing led to the outbreak of various services provided with no contacts. The doctor's help is one of them. Study the list of the helpful demos in this sphere:

Bayanno Hospital Management System – view demo
Features include appointment module, accounting, staff management, medication management, and other necessary functions for the whole hospital operating.
DXTMLX JS Hospital Management System – view demo
The system is built with Suite components: TreeGrid, DatePicker, Tabbar, Layout, Form, and ComboBox. The demo app contains an org chart to visualize a hospital management hierarchy. Advanced features include hospital bed allocation, patient admission, sorting, and filtering.
Webix JS Appointment App – view demo
This is a template for recording appointments. It can be successfully used in the medical domain for registration, record keeping, and tracking of upcoming visits. Features include registration of visitors, managing the list of visitors, visitor cards record, experts' profiles.

Online education

This is a domain that unites teachers and students, includes tutoring services, webinars, and various online platforms for conducting seminars and workshops.

Online Exam Management – view demo
This is a WordPress plugin to create and manage online exams for students and publish exam results. You can create exams, set exam centers, duration, date, and start time, as well as setting the tasks of the exam with the desired question types. Manage students and assign roll numbers to each student.
DHTMLX Online Exam System – view demo
The solution includes scheduling exams, forms for online examination, picking exam dates, exam filters.
Webix Student/Teachers Dashboard JS – view demo
The dashboard allows teachers to keep records of achievements, track the average student score, compare grades.

Follow-up

There is a wide choice of various solutions, plugins, and open-source codes to implement one of the ideas mentioned. We have focused on the most convenient ways, keeping in mind the variety of the functions in demand. There are libraries on the market that can implement any of the sophisticated start-up ideas. So the choice depends on the performance required and available resources.

TOP 6 Business application features of Webix UI Framework

JavaScript-Webix-UI — Tue, 25 Aug 2020 19:31:29 +0000

You may not have heard of the JavaScript Framework Webix before. But if you are a professional front-end developer, then you should definitely read this article.

What is Webix?

This product was first introduced to the market in 2013. Webix is developed and maintained by XBSoftware software house. For the full 7 years, the product has gone a long way of evolution and earned its place in the market. Today, version 7.4 is available to users. And according to the published road map it is preparing the release of a new version 8.0. The main competitive advantage of Webix is the accelerated development of business applications. To do this, Webix offers a business-oriented UI library and a set of complex widgets, which are sort of SPA web apps for common business application tasks. How is this business orientation implemented? In addition to 100+ ready-made components, Webix contains many useful features that make the development and prototyping of the UI interface for business applications easy and fast. For example, predefined content in combination with professional material design skin allows you to create ready-made applications using a few lines of code (here is an example. For a more detailed review, see the ThinkMobiles blog.

Now let's consider the main business application features.

Feature 1: User Management

A very popular feature in the development of any multi-user business application. Therefore, Webix offers a ready-made ser management module u. Developers can access Users list, Roles List, Rules, Roles matrix, and Security audit. A detailed overview of this app can be found at the link. This is not just a template, but a full-fledged application with its back end. The architecture of this solution is designed for easy customization and integration with any platforms.

Feature 2: File Management

Here is another good example of how beautiful and functional applications can be created using the Webix Framework. This solution is also a ready-made UI application for javascript files exploring. Thanks to simple customization, developers can easily adapt this solution to perform different business functions. And there is no need to go far for examples. The same Webix offers Document Manager, which is a clear example of customization and adaptation (you can read an overview of File and Document manager in this article).

Pay attention to such features as Split panel view and multifunctional preview tab.

Feature 3: JavaScript Chat-Messenger

Check out the ready-made JavaScript chat app. One more business application with back-end and front-end layers. A detailed overview is available here. Today there are many similar solutions, but Webix allows you to integrate and customize your solution without any restrictions or binding to external services.

Feature 4: Task Management

Task management board (or the so-called Kanban) is included in Webix as a complex widget. This is a reactive single page app ready to be used and integrated into any web solution. This case study provides an example of Webix Kanban integration in .Net SharePoint, and in this one into the classic web ERP system. A more detailed overview can be found here.

Feature 5: Pivot Table and Charts

Looking for some sort of data-driven report management tool? Check out the Webix Pivot. This is a powerful analytical tool that can be integrated into any web system. A detailed overview can be found here.

Feature 6: SpreadSheet

This is a JavaScript Excel-likeapplication for tabular computing. Webix offers a variety of features and functions that can be integrated, customized, and set to fit your solution.

Is it all?

Of course not. Webix is 100+ components and applications. A complete list of all features can be found on the Javascript UI widgets list. Besides, the published Webix roadmap has already announced new business apps:

1.Scheduler

2.Gantt chart

3.Report Builder

Is it free of charge?

Webix is available as an Open Source solution, but the described business functions are only present in the commercial version of Webix Pro. You can buy a license or get it for free through the startup support program or cooperation with software outsourcing companies.

Need more business functions?

Write in the comments about business features and apps you need specifically. Today, Webix is actively looking for new ideas to inspire the development of its product, and this is a good time to share your thoughts.

A beginner explores the JavaScript Webix library. Part 6. Interaction with the server

JavaScript-Webix-UI — Thu, 02 Apr 2020 07:05:53 +0000

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.

Webix JavaScript library through the eyes of a freshman. Part 5. Working with data on the user's side

JavaScript-Webix-UI — Wed, 01 Apr 2020 06:33:23 +0000

I have just started my career in IT. Currently I am studying web-ui development with the JS Webix library. Here is a short description of what I have learnt so far.

FIFTH TASK

In this article, I will consider the following tasks:

filtering and sorting table data;
filtering and sorting via the API;
grouping data in the tree table;
synchronizing components;

Learn more about the List widget, the Treetable widget and the DataTable widget used in the article.

The source code ishere.

You can find the finished application here.

Filtering and sorting table data

We start with tables. There is a number of built-in filters embedded directly into the header of the DataTable and TreeTable widgets.

I use two options in the Table widget: a simple text filter (textFilter) and a filter with a set of options in the drop-down list (selectFilter). I add one filter for the columns title and year. I set the Header in them as an array instead of a row to fit the header and filter. The second element in the array is an object with the content property and the filter name.

The code of the Table widget is located in the table.js file and is rendered in the Dashboard tab.

The data is filtered by substring match, when characters are added in "textFilter". When selecting an option in "selectFilter", it will be filtered by the selected value.

Here is the result of filtering by substring "star”:

Sorting. To tune column sorting, add the sort property to the column configuration. There are several ready-made sorting types: by numeric values, by date and by row. For the 'year', 'votes', and 'rating' columns I will set the sort:"int” setting for sorting by numeric values. For the title column, the value will be "string".

When clicking the column header, the data will be sorted according to its type. Here is the result of sorting by rating:

Sorting and filtering via the API

All Webix widgets support the features of filtering and sorting elements via the API methods. I will demonstrate programmatic filtering and sorting in the List widget.

The code of the List widget is located in the users_module.js file and is drawn in the "Users" tab.

Filtering. In the "Users" tab, after the “Add new person " button, I will place the Text widget, for filtering names in the list.

Now in the script.js file I'll add the logic for filtering elements.

Elements are filtered in the following way:

using the attachEvent method I add a handler to the onTimedKeyPress event;
the onTimedKeyPress event is triggered by entering characters in the text field, but with a short delay so that the filter is not activated every time you press the keys;
I get the entered text and use the filter method to start filtering.

Here is the result of filtering via the text input:

Sorting. The List widget elements will be sorted by clicking the “Sort asc” and “Sort desc” buttons.

To create buttons in the "Users" tab, I will add two Button widgets with the click event handler after the text field.

Inside the click handler, the sort method accepts the name of the field to sort data by, and the sorting directions: “asc“ (ascending) and” desc" (descending). By default, data elements represent rows and sorted accordingly.

As a result, names in the list are sorted alphabetically:

Grouping data in the tree table

Now let's look at the data grouping by random parameters on the example of the TreeTable widget.

The code of the TreeTable widget is located in the products_module.js file and is rendered in the “Products" tab.

I will change hierarchical data in the tree table to get a linear array. I will get rid of the hierarchy and move the “category” field from it to each record.

There are two ways to group data in a table:

immediately after loading them;
dynamically, using the group and ungroup methods.

I use the first option, as I need to group the data as soon as it is available.

In the TreeTable widget configuration, I will add the scheme property. It determines the way of processing data. I use the $group method to group data.

Two parameters are used inside the $group handler:

a required parameter by, which groups the data.
the map object, where we will describe the data fields for the created groups. Grouping splits the source data by the specified parameters and creates "parent records" for them . We can use map to add new fields to these records. To display the data correctly, I will add the "title" field. Its value will be the parameter that is used for grouping.

Additionally, I set the $sort function to sort the grouped data in alphabetical order.

The result of the grouping is as follows:

Synchronizing components

The task uses the Chart and List widgets. Their code is in the users_module.js file and they are rendered in the "Users" tab.

The sync method allows you to copy data from one component and pass it to another. Thus, changes in the main component, such as adding, deleting, and so on, are immediately reflected in another.

First, in the Chart widget I will delete the link to the data.

Now, in the script.js file using the sync method, I synchronise the Chart widget with the List widget.

In the addPerson function, we add data only for the List widget.

Now, when you add or remove entries from the list, changes will also occur in the Chart. Sorting and filtering in the List widget will now affect data in the Chart as well.

Summary

Thus, I have shown how to improve the user experience on practical examples. We have learnt the built-in means to sort and filter data in the DataTable and TreeTable widgets with a single setting. We have grouped data in a table, and the synchronization example expanded the ability to improve the performance of widgets that use the same data source.

You can find the finished application here.

Webix JavaScript library through the eyes of a freshman.

Part 5. Working with data on the user's side

Part 4. Working with data. CRUD

JavaScript-Webix-UI — Tue, 31 Mar 2020 06:36:44 +0000

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. Sure enough I am glad to share my modest experience and to save it as a guideline of this curious UI library.

FOURTH TASK

The Webix library has all the tools for implementing basic web development functions, or CRUD. This article covers the following tasks:

editing table data via the form;
installing the built-in row editor;
adding data to the list and the chart;
deleting items.

In the documentation, you can learn more about the List widget, the Treetable widget, and the DataTable widget covered in the article.

The source codes are here.

You can find the finished application here.

Step 1. Editing data via the form.

I work here with the "Dashboard" 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.

I will add the onAfterSelect event to the Table widget. When this event is triggered, I will get data from the table and pass it to the form fields.

The setValues() method in the above code passes the received values to the form.

I run the code and check the result:

When the row in a table is selected, its data automatically enters the form and is ready to work.

To make the process more challenging, I will save the changes if the data is taken from the table and edited.

I rewrite the saveItem function and add new methods to it:

Now there is the following algorithm in the function:

- 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 isDirty() method;

- 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.

- finally, after verification, either a new record is added using the add() method, or the current element is updated with new properties.

To update the edited data, I use the updateItem() 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.

Result:

Step 2. Installing the built-in editor.

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.

I start with a tree table in the "Products" tab. The table code is in the products_module.js file.

The Treetable 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 editable:true setting, and in the configuration of each column. The editor:"text" setting is set to the columns. The “text" attribute specifies the type of the editor. For more information about editor types, see the documentation.

I added editors for the Title and Price columns in the code. By clicking on any cell the text field editor opens up:

Now I will go to the "Users" tab, and analyze the option with editing the List widget. The widget code is located in the users_module.js file.

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 EditAbility module. I use this module to edit the List widget data. To do this, I will create a user component using the protoUI method based on the List widget.

I write the name of the future widget (the name property) and inherit the necessary modules for the widget base.

Prototype of the List widget.

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.

Since there can be many fields in each record, and both name and country are drawn in the List template, the editorValue:"name" setting is added in the configuration, indicating which field can be edited.

Result:

Step 3. Adding data to the list and chart.

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.

The Chart and List widgets 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.

To do this, I will draw the "Add new person" button in the users module.

Clicking on the button calls the addPerson function that adds a new entry to the list.

The chart shows the age from each record, so a random number will be generated for a larger spread.

Function for adding a new record:

Result:

Step 4. Deleting elements.

To begin with, I create a new column with an html tag and an icon in the Table widget.

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 remove() method.

List widget code:

The List widget’s rows removal algorithm is the same as the Table widget’s:

Result of rows removal in the Users tab:

You can find the finished application here.

Conclusion

CRUD implementation in the Webix JS library is performed in different ways. There are built-in editors for changing data, and API that allows you to do the same through a third-party form. 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 library architecture.

A beginner explores the JavaScript Webix library. Part 3. Modules, charts, tree tables.

JavaScript-Webix-UI — Mon, 30 Mar 2020 12:24:56 +0000

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. Sure enough I am glad to share my modest experience and to save it as a guideline of this curious UI library.

In this part, I deal with the following:

splitting the project into modules;
tabs and switching between them;
setting up a table;
drawing a list and a chart;
creating a tree table.

The source code is here.

The finished application is here.

Step 1. Splitting the project into modules

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:

header.js-the Toolbar widget;
aside.js-the List widget;
table.js- the Datatable widget;
form.js- the Form widget;
footer.js - the element with text: “The software is ...".

In new files I put widget configurations into variables, e.g.:

The created files are included in the index.html file in the following order:

The script.js file now contains a simple application initialization code.

Step 2. Tabs and switching between them

The Multiview component performs switching. I create it in the aside.js file:

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.

In the script.js file I replace the Table and the Form widgets with the Multi module.

The List widget acts as a switch between tabs. I set to the List widget elements the same id as the Multiview tabs.

When you click on an element of the List widget, the onAfterSelect event is triggered. Inside its handler, we get the id of the selected element and show the corresponding tab referring to it by id.

Example:

Attention!

Further actions with data will be performed with the local server running.

Step 3. Dashboard tab-table settings

To delete a column or add a new one, the property autoConfig:true in the Datatable widget should be replaced with the columns array with settings for each column.

- the value of the id property shows the data item field that will be displayed in this column;

- the header property in the element is the column header;

- 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.

All settings of the table are predefined in the style.css file and we only need to insert the class name.

I add more data for the table from the data/data.js specifying the path to it using the url property.

Result:

Step 4. The tab “Users" - drawing a list and a chart

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 “users”.

I will create a new users_module.js file for the widgets.

List. List refers to the List widget, which was previously used when creating the menu. The list rows must contain user names and country names.

List widget code:

The rows array is used to divide the workspace into two parts. The second one will be used for the diagram.

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.

Result:

Chart. The library supports common chart types, all of which are created with the Chart widget with the type property.

I replace the setting template:"Chart" with the widget code:

- setting type: "bar" sets the linear chart type;

- the field name is passed to value, and it must be specified in `#...#`;

- the xAxis setting indicates the information shown on the X axis.

- template shows that there are age numbers below the chart lines;

- title contains the name of the chart, which is "Age".

Result of drawing the list and the chart:

Step 5. The tab “Products” - tree table

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

The Treetable widget is used to build a tree table. One of the widget columns should contain a template {common.treetable ()}, not to get a standard table instead of a tree table. The template allows you to immediately draw specific elements:

- an active icon to expand/collapse enclosed records;

- file/folder icons;

- indents depending on the record level.

The treetable component is filled with hierarchical data that I get from the products.js file.

Result:

You can find the finished application here.

Summary.

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.

Webix Tooltips for Improving User Experience

JavaScript-Webix-UI — Wed, 31 Jul 2019 12:26:49 +0000

Tooltips are champions at improving user experience. These pop-up messages guide users through your web app, providing clues and other useful information. Webix Tooltips can be added anywhere: to DataTable headers and footers, controls, HTML elements, etc.

Live demo >>

Webix JavaScript tooltips have several advantages as if compared to HTML tooltips:

You can add any text, markup, or image;
It is possible to display different text in a tooltip window depending on conditions (when you define a tooltip as a function);
You can effortlessly customize tooltips is the same way as Webix data templates.

How to apply

You can easily add Webix tooltips to your app. You need just one setting for it. See the example below:

{ view:"button", value:"Make everything great", tooltip:true },
{ view:"datatable", autoConfig:true, tooltip:true }
Good
Great
Make everything Great

View code >>

If you would like to make the content of a tooltip more diverse, you can use familiar template strategies. Such an approach will allow you to get the result that you strive for. There are some hints below showing how to achieve it. Pay attention, the way you add a tooltip depends on a target widget or UI element.

Add a tooltip anywhere you like

You can equip almost any item of your app with a tooltip. Check out the showcases below.

Items of Webix data widgets

If you need a tooltip with just a small text message for data widgets, you can add it via tooltip: true. But you can also attach an image or dynamic text to a message. Webix tooltips can also display any HTML content.

{
    view:"list",
    width:250,
    select:true,
    tooltip:function(obj){
        return "<div>" + obj.lname + ", " + obj.fname + "</div>";    
    },
    // ...rest of the config
}

It's also possible to use your CSS classes and change the place where tooltips pop up. To do this, define tooltip as an object and add the necessary settings:

{
  view:"list",
  width:250,
  select:true,
  tooltip:{
    template:obj => {
      //... same tooltip template as above
    },
    dx:10, dy:10,
    css:"persons_tooltip"
  },
  // ...rest of the config
}

View code >>

Tooltips and controls

You can set tooltips for any form controls by means of tooltip: true. It allows adding simple default tooltips which display the value of the control. Have a look at the example of how you can insert a tooltip which shows a selected date of a datapicker.

webix.ui({
  view:"datepicker", tooltip:true
});

You can also create something more sophisticated using the same principles as for data item tooltips. The only thing is that the contents displayed by tooltips come from the control settings, but not from the data.

{
  view:"datepicker",
  tooltip:obj => {
    var result = "";
    if (obj.value){
      var age = Math.floor((new Date() - obj.value) / (1000 * 60 * 60 * 24 * 365));
      result += "Client is " + age + " years old";
    }
    return result || "Age is unknown";
  }
}

A control with options is another story. In this case, you can add a tooltip for every option.

{
  view:"radio", name:"notifications",
  label:"Notifications",
  tooltip:obj => {
    var result = obj.id%2 ? "" : "no";
    return "You will receive" + result + "email notifications.";
  },
  options:[
    { id:1, value:"Yes" },
    { id:2, value:"No" }
  ]
}

View code >>

DataTable and Webix tooltips

Webix tooltips provide outstanding user experience with DataTable. It's possible to add clues to almost any element of it.

Headers and footers

Tooltips for headers and footers allow you to inform users about the features they can be unaware of. For example, hovering a mouse over a header will call a window with the information that the list can be sorted by name when you click the header. You can also set tooltips as:

true (default tooltips that show the ‘text’ of the header),
string,
function that receives the object of a header line.

webix.ui({
  view:"datatable",
  tooltip:true, footer:true,
  columns:[
    {
      id:"", header:{
        text:"Purchase",
        tooltip:"Click to sort the list by #text# name"
        // "Click to sort the list by Purchase name"
      }
    },
    {
      id:"sum", header:"Cost",
      tooltip:false,
      footer:{
        content:"summColumn",
        tooltip:"Total money flow"
      }
    }
    // ...other columns
  ]
});

A header or a footer with a filter or an aggregator requires a more complicated tooltip function. You can turn to the getHeaderContent method to display the sum in the footer of the column.

webix.ui({
  view:"datatable",
  tooltip:true, footer:true,
  columns:[
    {
      id:"", header:{
        text:"Purchase",
        tooltip:"Click to sort the list by #text# name"
      }
    },
    {
      id:"sum", header:"Cost",
      tooltip:false,
      footer:{
        content:"summColumn",
        tooltip:obj => {
          var sum = this.$$("grid").getHeaderContent(obj.contentId).getValue();
          return "Total money flow: " + sum;
        }
      }
    }
    // ...other columns
  ]
});

Tooltips for Sparklines

You can add tooltips for cells that show sparklines. You have two options:

1. tooltip:true allows you to show a bigger variant of sparklines,

a special column tooltip if you want to show them for sparkline items.

To do this, define the tooltip as a function, which in this case receives one more parameter – the value of the sparkline item.

webix.ui({
  view:"datatable",
  data:[
    { id:1, name:"Austria", income:[710, 780, 390, 660, 600] },
    { id:2, name:"France", income:[810, 500, 780, 800, 940] }
  ],
  tooltip:true,
  columns:[
    {
      id:"income", header:"Income per Month",
      template:"{common.sparklines()}", width:200,
      tooltip:function(obj,common,value){
        return value || "";
      }
    }
  ]
});

View code >>

Tooltips for any HTML areas

Webix tooltips can pop up anywhere you like, e.g., when you hover the mouse over a picture. All you need to do is:

to set tooltips for the widget with the tooltip setting,
to set tooltip text as the webix_tooltip attribute to the HTML element.

{
  view:"multicombo", name:"tags", id:"mcb",
  placeholder:"Click to add tags",
  options:tags,
  tooltip:true
}
// ...
var delIcons = $$("mcb").$view.querySelectorAll(".webix_multicombo_delete");
for (var i = 0; i &lt; delIcons.length; i++){
  delIcons[i].setAttribute(
    "webix_tooltip",
    "<span class="danger">Click to remove the badge</span>"
  );
}

The example above shows how to apply tooltips to the whole widget. If you want the tooltips to show up only in particular areas, you can use lower-level API. [TooltipControl(https://docs.webix.com/api__refs__tooltipcontrol.html) will help in this case:

webix.ui({
 id:"photo",
 template:`<img style="height: 260px;" src="/photos/jim.jpg" />`,
 // ... other config
});
...
webix.TooltipControl.addTooltip($$("photo").$view);

View code >>

Tooltips for HTML elements

You can add Webix Tooltips even to the body of the document where it's possible to place Webix and a non-Webix layout.

Check out the guidelines for creating a static text tooltip:

Give the HTML area an ID.
Use the TooltipControl mixin and its addTooltip() method that expects the ID and the text of the tooltip.

// html code
<div class="label"><label for="title">Book title</label></div>
<div><input id="title" name="title" type="text" value="" placeholder="Title" /></div>
// js code
webix.TooltipControl.addTooltip("title", "Enter book title");

It would be inconvenient to call addTooltip() many times, especially when you need a lot of tooltips for several HTML areas. Luckily, you can add the webix_tooltip attribute with the text to the areas and then enable “tooltip ability” for their common parent area with addTooltip():
// html code
<fieldset id="genre">
  <div id="genre1"><label for="genre1">Poetry</label></div>
  <div id="genre2"><label for="genre2">Horror</label></div>
</fieldset>
//js code
webix.TooltipControl.addTooltip("genre");

You can also create dynamic tooltips. They will depend on the changing contents of the master area. To enable this, you will have to provide extra customization handlers within addTooltip(). The handlers define the tooltip behavior and can be used to change it.

See the example of how you can create a dynamic tooltip for a textarea. Note, the tooltip will show an empty field if you don't type anything in it. $tooltipIn handler will determine the view of the tooltip.

// html code
<div class="label">
  <label for="annotation">Annotation</label>
</div>
<textarea id="annotation" cols="40" name="annotation" rows="5">
  Some book annotation is here
</textarea>

// js code
webix.TooltipControl.addTooltip("annotation", {
  $tooltipIn:function(node){
    var tooltip = webix.TooltipControl.getTooltip();
    tooltip.define("template", function(){
      return node.value||"Empty field";
    });
    return node;
  }
});

Live demo >>

Bottom line

In the hunt for tricks allowing to improve user experience, it would be wise to pay attention to tooltips. If they are well-styled and applied in the right place, users can learn how to work with your web app very quickly and effortlessly. If you build your software solutions using a UI library, make sure that its tooltips are customizable, so that you could change them to meet your requirements.