Rich Webix Form with Automatic Configuration

Developers don’t like monotonous coding. But even with a number of tools and frameworks one often has to configure big forms by hand. Webix offers to exclude this task from your daily routine with the help of a custom Form Editor tool which was built totally on Webix public API.

Form Editor Read more

Life is not on Instagram, let us choose Organogram

I remember my school years and those long evenings spent by painting a family tree. It was the first time in life when I faced the inevitable consequences of a poorly planned work – the sheet of paper unexpectedly came to an end and I had to redraw the scheme from the very beginning. That was a fail!



Time has passed and new technologies stepped into our lives offering a number of tools for that trivial task. I also saw that the big world is built around the same hierarchical schemes used everywhere: from simple IT org charts to multi-department companies’ hierarchy.

And although there’s a number of tools for manual drawing of organograms, drawing itself is no longer needed. Now I can simply pass the data into a cute Webix organogram widget and feast my eyes upon the ready-made chart in the browser!

No magic, just code (and Webix Pro): Read more

Webix TreeMap – Power of Visualization

Webix offers a number of possibilities to nicely visualize linear data – bar, pie, area, scatter and radar charts – to match any use case. But what can be done if hierarchy matters?  You may think of a Webix Tree as the first and foremost widget as it perfectly shows parent-to-child relation. But that’s almost all about its visualization abilities.

For more powerful tools we should look into the PRO package that includes Organogram (a tree-like diagram ) and TreeMap. We will pay a closer attention to the Webix TreeMap as it is the only Webix widget that can display hierarchical data on a proportional  basis.

The simplest initialization code is brief:

     view:"treemap", value:”#value#”,  
     template: function(item){  return item.label||""; },

And you get the following output:

Read more

Day by day Webix evolves and dozens of new features appear with every release. But while the framework is constantly improved, something always stays the same.

Let’s talk about the very basic and the most important Webix feature – component positioning and sizing.


Live demo

Layout. Basics.

The main Webix way of the element positioning is dividing the page into rows and columns.

The basic layout can  be created with the help of the same-name Layout widget. And you can place any of the numerous Webix widgets into any Layout cell: Read more

Navigate your way. Sidebar and Sidemenu

Hey guys, let us check today what Webix offers to make our lives easier during app navigation. I bet that there’s something worth a closer look.

Since the launch of the library its users had a standard Menu at their disposal with the possibility of  placing items horizontally or vertically (too simple). But not very long time ago the developers went further and ended up with two handsome widgets created with user-friendly navigation in mind – Sidemenu and Sidebar.

So, let’s explore the widgets’ functionality to find out the use cases that are more suitable for each of them.

Basically, Sidebar can be initialized on the page with the following code:

      view: "sidebar",
      data: [
           {id: "dashboard", icon: "dashboard", value: "Dashboards",  data:[
               { id: "dashboard1", value: "Dashboard 1"},
               { id: "dashboard2", value: "Dashboard 2"}

And you get: 


Live demo

Read more