days to give it a try before you buy! Download now. The best deals on licenses are coming soon Download now. The best deals on licenses are coming soon

WEBIX BLOG

Using Custom Fonts and Custom Icons for Webix Widgets

“Never judge a book by its cover”, — my teacher told me many a time, but still I cannot deny that good design opens all doors, especially in web development. Since colorful and motley interfaces passed into oblivion long time ago, font and icons became a small but significant detail that can add a unique aesthetic touch to web apps. In this article we will speak about conventional ways of altering font and icons within Webix widgets.

change icons UI

Webix Ribbon Interface: Creating a Custom Control

Webix has never been just a javascript library. At first sight it looks like a static collection of widgets and ties between them, but an experienced eye will easily trace the system of reusable mixins and UI components. At the same time, Webix API allows anybody build homemade but fully functional tools. In this article we will cast the light on the peculiarities of prototyping in Webix and create an Office-like ribbon interface.
office like ribbon interface

Creating a Web Dashboard with Webix

Web dashboards are in high demand today as they have proven to be a helpful tool for at-a-glance analysis of complex data together with its laconic visual presentation. Although dashboards originated from desktop applications web environment requires something not typical for them – responsiveness. In this article we will find out what Webix has already issued to meet this requirement and build our own flexible web dashboard.
Creating Web Dashboards

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:

Webix FAQ: Pivot

Hey guys!  The new FAQ article is ready. Last time we were talking about Webix licenses. The new topic is Webix Pivot.

pivot webix

 

To begin with, Pivot is a cool JavaScript widget that is perfect for making interactive table reports and pivot charts. You can easily embed it into your web page or new app. Pivot is based on Webix Tree Table JS, consequently your data will have a tree-like structure. Why Webix Pivot? Because it allows automatically organizing, summarizing and comparing complex data from database files. To get the whole idea, you may check out our online samples.

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

1 4 5 6 7 8 10