How to Build a Mega Menu with Webix

Unlike the regular menus that you can create using the Menu Component, Mega Menus are big and wide enough to allow you place other components and widgets within them. Such a type of menus is widely used on the online shopping websites since it’s pretty easy to use them for navigation purposes.

Here’s an example of how this menu works:

Mega menu built with webix

The demo of the final mega menu with its source code is here.

In this article, we’ll create our own mega menu with Webix in a few easy steps.

Read more


Tuning Webix for Odata

As we know, web app development is a complex process that, on the one hand, consists of laborious work at the backend and, on the other hand, includes plenty of efforts while creating a nice-looking and responsive UI.

If you want to optimize the construction of your web applications, you need to find the best option for organizing your work with data as well as a fast and powerful js library for drawing app interface.

This variant can be implemented by using OData, an open data protocol for building RESTful API’s, and by adapting Webix UI library to its rules of requesting and modifying data.

Odata protocol

OData’s goal is to enable a broad access to data regardless of the way it is stored. It allows requesting and updating resources via HTTP commands and provides an entire query language directly in the URL.

Well, if you are reading this post, you probably know a lot about Webix. If suddenly no, you can find more info here. All in all, I can say that our users find it fast and easy.

twitter review of webix

Read more


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:

webix.ui({
    view:"kanban",
    type:"space",
    //the structure of columns on the board
    cols:[
        { header:"To Do",
          body:{ view:"kanbanlist", status:"new" }},
        { header:"Estimated",
          body:{ view:"kanbanlist", status:"estimated" }},
        { header:"In Progress",
          body:{ view:"kanbanlist", status:"work" }},
        { header:"Done",
          body:{ view:"kanbanlist", status:"done" }}
    ],
    //URL to the file with data collection
    url: "tasks.php"
});

And here’s the result:

Basic Kanban Board

Read more


Portal Layout Creation with Portlet

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:

view:"portlet", body:{
    // portlet content
}

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

rows:[
    { view:"portlet", body:{
        template:"Row 1"
    }},
    { view:"portlet", body:{
        template:"Row 2"
    }},
    { type:"wide", cols:[
         { view:"portlet", mode: "cols",body:{
            template:"Col 1"
        }},
         { view:"portlet", mode: "cols", body:{
            template:"Col 2",
        }}
    ]
    }
]

The result is shown below:

webix portlet widget

Read more


Form Handling with Validation Messages

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:

Registration form

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

Read more