NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

WEBIX BLOG

Rich Webix Form Editor 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

Understanding Component Data: DataStore and TreeStore

Hey all! Can you already smell the autumn in the air? Alas, the fruitful summer gradually comes to an end, and it’s time to receive a Bachelor’s degree in Webix 🙂 Today I suggest you to brush up your knowledge of data components by uncovering one of the base concepts – DataStore. In the article below you will learn what is hidden behind visual presentation and may pick useful snippets for working with data.

heading

Save space, show more – Multiview and Carousel widgets

While football players are restricted by the field area (watching the championship, eh?), web developers compete with each other in an even smaller battlefield called viewport. And the one wins who manages to occupy every inch of it wisely.

carousel widget vs multiview

 

Still,  you can always add one more layer  to your application and choose content you’d like to show first. No doubt, Webix is always at hand with ready-made solutions for multiple-view layouts:  

  • Accordion widget
  • Carousel widget
  • Multiview widget

Combobox Widget Party: Webix way

“Thanks God it’s Friday” – that’s what people say as they feel a great relief after a fruitful working week. I want to make this day even more happier and suggest the cure to a common developer problem – user inputs.

We all want to collect as much information from users as possible, while making this process predictable and controlled with respect to user freedom of choice. In this article we will try to squeeze through the variety of Webix combobox controls to solve this task.

combobox_widget

As a teaser, I’m giving you the numbers: Webix offers 7 ready-made select widgets and 7 suggest lists for autocomplete options alongside with great possibilities to customize and mix them all to create an ultimate web combobox!

Playing the Accordion

Hi everybody! I’m lucky to inform you that summertime is approaching rapidly and it’s high time to rejoice, indulge into various kinds of outdoor activities, twist and shout. Today I suggest you to combine all these things with web development. So, are you ready to play the Accordion? 😉

Webix Accordion Widget

Still, I don’t want you to read musical notes. In HTML and Javascript accordion means a UI control that consists of panels that can be expanded and collapsed (just like the bellows of a musical accordion) to make the whole interface sound.

Webix accordion widget is one of the basic ui layout types. It seems to be very simple and non-configurable, but one needs to learn and practice to play the music. Here we gathered three common use cases and customization samples with the Accordion component:

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!

Organogram

 

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):

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:

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

And you get the following output:

TreeMap_Basic

Dynamic Loading. Fetching Unlimited Number of Records from Server Side

Hi everybody. Today we will be speaking about Webix ways to optimize server-client communication in case of huge data. Those of you who are happy to fetch long datasets at once, please raise your hands!

Webix dynamic loading

 

Just as I’ve expected, nobody’s here.  Everybody has gone to dynamic loading which is implemented very easily with Webix data components.

webix.ui({
  view:"datatable", url:"mydata.php", datafetch:100
});

Initially, a limited number of records (e.g. 100) is loaded, while further requests are triggered by scrolling or paging automatically. Guys, isn’t it nice?

Still, such a pattern requires quite a specific format of a server response –  {data:[ /*array of records*/], pos:0, total_count:100  } – and you may ask yourself: “So what should I do, if I cannot tune the response or I don’t know the total length of server-side data?” Indeed, there are lots of web services that do not provide such information.

The article below shows the solution that relies totally on Webix public API and can be built by any of you.

The Webix way of positioning: how to put everything in its right place

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.

1_form_initial

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:

Oscar for DiCaprio – Visual Designer for you!

Hey guys!

It is the last month of the winter and only 25 days are left before Oscar, the main American awards ceremony.

We could not pass by such an event. And if you hope and believe, the same as we do, that Leonardo DiCaprio, not the bear, will get the Oscar, click “Like” and “Share”.

Visual designer

 

At the end of the month, in case this talented actor wins, all participants will get an annual access to the PRO edition of our Visual Designer, which is scheduled for release exactly at the end of February.

1 4 5 6 7 8 10