WEBIX BLOG

Kanban boards allow visualizing the workflow in an easy and intuitive way. And Webix has a tool that allows you to create your own Kanban Board.

There’s already a well written guide that describes how you can use the Webix Kanban Board widget. This time we’ll take a look at some tips and tricks you can use to customize the existing project management application.

Splitting the Columns

First of all, the basics. Here’s how you can create a simple Kanban Board:

And here’s the result:

Webix version 2.4 brings you a new UI component that allows creating portal layouts in an easy and intuitive way. Portlet component can be dragged over the page and swapped with other portlets. This behaviour allows you to rearrange your web page elements the way you want. Let’s take a look at the basics of portlet usage.

Portlets Basics

You can create a basic portlet in the same way as other Webix UI components. Just set “portlet” as the view property value. The body property defines the portlet content:

By arranging portlets into rows and columns, you can create the required layout which can be easily reorganized if necessary:

The result is shown below:

Starting with version 2.4, Webix provides you with a new way of user interaction improvement. Validation Messages can be pretty useful in case you want to make sure that users will fill in all your web forms properly.

Let’s take a look at how it works. Here’s an example of a registration form:

You can check the Form documentation page if you want to get more details of form creation with Webix.

Ace is a handy JavaScript code editor. It combines the possibilities and behavior of popular editors like Sublime, Vim and TextMate. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. You can build Ace into your web page or app with ease.

And now it is possible to use Ace Editor with Webix UI.

TL; DR Grab the final package from https://github.com/webix-hub/webix-firebase

Dynamic Web

Not so long ago web apps were slow and phlegmatic. The whole page had to be reloaded to update information. AJAX has only slightly improved this situation. Now we update separate blocks instead of reloading the whole page. Hardly had we got used to this technique, when a new web transformation appeared on the scene. It is dynamical web, where the content of pages updates by itself.

Now you can find such elements on Facebook or Twitter pages, for example. Data are changed there without our participation. As soon as someone has added a comment or re-tweeted the post, the changes are reflected on the page immediately.

There are several technologies behind dynamical web. WebSockets are the most important of them. You can read how to use them with Webix here. However, web sockets present a very low level of abstraction. Fortunately, it’s possible to get all the benefits of dynamic updates without diving so deeply into the details of data synchronization. There are several great solutions created by web enthusiasts. They allow avoiding difficulties and creating cool dynamic apps.

*The product is discontinued.

Our company XB Software Ltd. has recently released its own CRM system that is mostly based on the Webix library. It is a necessary tool for most sales or service-related companies that are seeking to build and maintain strong relationships with existing customers as well as to look for new ones.

Webix CRM has a user-friendly Material Design interface and allows storing a client base of any size, preserving the history of customer interactions (emails, phone calls, etc.), grouping contacts by specific categories and more.

Let’s learn about numerous Webix CRM functions in more detail.

While providing many UI options, Webix is quite short of animations. It can be easily changed though. Let’s check how to add nice animation effects for different Webix controls.

Carousel, MultiView, TabView

TabView is one of two components that have a built-in support for animation. When you are changing the active tab, a new one is shown with some animation. You can use the animate property to configure the details of animation

Code of demo

Webix UI provides a lot of widgets, but it is just a tiny bit, as compared to the massive amount of different Open Source libraries. Fortunately, it is quite easy to wrap any custom library in Webix UI control.

Konva.js

As an example, I will use Konva javascript library.

During the process of web development it’s highly important to organize the workflow and keep in touch with all members of the team. There are useful tools that allow visualizing all the stages of work and keeping track of each participant’s current workload. One of such tools is a popular Kanban board. It helps to control work processes and maintain steady progress, as you can see what stage of the project should be speeded up and which one is overloaded.

JavaScript Kanban Board is a great widget that can be used for creating powerful apps intended for managing the development process.

In this article we’ll describe the stages of creating a basic Kanban Board with the Webix library. Tasks on the board will be supplemented with tags, images and personal avatars for tasks’ assignees. There will be icons that allow opening a form for editing tasks. Besides, you’ll learn how to customize the styling of the board.

You can check the live demo of the ready Kanban Board.

You probably already know that DataTable has the ability to show checkboxes instead of plain text data. It allows you to provide a simple solution for status marking and data selection.

Basic checkboxes

The minimal code for initializing a DataTable with checkboxes will look as follows:

It will result in a nice-looking JavaScript grid presented in the picture below. The “{common.checkbox()}” line in the template expands in a checkbox control.

Live Demo >>