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


We have some great news for you! Webix was updated to the version 2.4 which includes such great enhancements as a new Portlet widget, MultiCombo and Range Slider form controls, naming only the smallest part of all the changes.

Portlet widget

Portlet is a layout component that can include another component inside of it. Moreover, it’s possible to re-order portlets by drag-and-dropping them in the necessary position on your web page.

webix portlet

Therefore, you shouldn’t write lines of code to change the arrangement of your web page. All that you need is to grab a portlet by the handler with an inserted widget and put it at the place of future drop which is highlighted by a specific color. Want to check its performance? View this demo.

Read more