HAPPY BIRTHDAY, WEBIX! 12 YEARS Read More Up to 25% OFF on licenses and complex widgets! Offer valid from July 7 to July 15!

WEBIX BLOG

Webix 2.3: New UI Widgets, Typescript and Material Skin

Spring is a time of great changes and endless possibilities! This spring a new Webix version 2.3 has also brought plenty of useful updates and new features.

Webix team has been working hard on adding advanced features and responding to all the great feedback from the Webix Community. Version 2.3 comes with entirely new components such as Organogram and Barcode along with a fresh material skin, TypeScript support and other cool enhancements.
Webix Material Skin

Manage Your Customers with Webix CRM

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

webix crm

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

Animation in Webix UI

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

Using Third-party Libraries with Webix UI

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.

How to Create Kanban Board with Webix

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.

webix kanban board

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

Material Design in Webix UI

Material Design is a visual language that was developed by Google and is becoming trendy in mobile and web apps development. It is aimed at increasing the usability of application interfaces while preserving simplicity and nice look and feel of the apps. Web apps with this design can easily adapt across various platforms and all types of devices.

material design

Webix team was inspired by Google Material Design and created a new skin in accordance with the described visual principles.

Checkboxes in DataTables. Little-known techniques

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:

webix.ui({
  view:"datatable",
  columns:[
    { id:"status", header:"Is Active", width:80, css:"center",
        template:"{common.checkbox()}"},
    { id:"value", header:"Records", fillspace:1 },
  ],
  data: [
    { status:0, value:"Record A"},
    { status:1, value:"Record B"},
    { status:0, value:"Record C"}
  ]
});

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.

Basic Webix Checkboxes

 

Live Demo >>

Use Webix CDN for Building Fast Web Apps

Good news! From today to start using Webix library you don’t need to download the package from our website and then unpack it. You may include 2 webix files from the Internet by just setting links to CDN.

CDN can offer a performance and availability benefit by hosting Webix on servers all over the world. The advantage is that if the visitor to your webpage has already downloaded a copy of Webix from the same CDN, it won’t have to be re-downloaded.

Webix uses CDN

Now if the end user works, for example, with several apps that are built on the basis of Webix, the loading speed of the second app will be much faster than it was before using CDN. When your user works with the first app the webix.js and webix.css files are downloaded into cache and stored there. Thus, when a user checks the second app, the browser won’t need to re-download Webix files as they are already in the cache.

Webix UI 2015 Roadmap

Everybody plans their work, Webix team is not an exception. Today we want to share our plans concerning library improvements.

Thus, we will present you the Webix Roadmap for 2015.

By publishing roadmaps (we are going to continue this tradition) we will make our ideas transparent.

All the plans described in Roadmap are formed on the basis of the following issues:

  • trends in IT industry
  • forum posts
  • support tickets
  • comments in docs, blog
  • requests via social network

It means that your feedback is essential for us as it helps us choose the right direction in product development and concentrate on the most valuable features. This ensures that the functions expected and preferred by you will be implemented in our next releases.

Enhance File Management with a Webix widget File Manager

With the increase in using web applications, the need for a widget that allows working with hierarchical data becomes primary. A web-based file manager is a good solution for managing such type of data within any modern web browser.

Today we are glad to present you a new Webix widget intended for organizing your data in the Internet – JavaScript File Manager. It is a JavaScript and HTML5 component that allows you to manage hierarchical data, e.g. files and folders.

Webix File Manager Widget

1 2 3 4 5