Creating custom view - HipChat integration

One of the Webix’s (http://webix.com/) great advantages is the possibility to use the third-party components. Obviously, instead of reinventing the wheel, it is better to take advantage of reliable, ready to use solutions. Especially now when the open source community is actively developing and supporting a variety of interesting libraries.

The standard Webix pack already includes wrappers for such popular solutions as Google Maps, FCK Editor, D3 charts and lots of others. However, it is a drop in the ocean. Every day new js libraries appear, and it’s impossible to provide support to all of them out of the box. Instead of this, Webix allows creating new integration for any third party library by, literally, several lines. Lets check how it can be done.

<b>What is HipChat</b>

HipChat is one of the best professional chat solutions. Originally, it was created as a desktop app, but recent changes have introduced the web API and the ability to include the chat component on an html page. So, now you can place the ready to use, enterprise scale chat solution on your site or in your app.

<b>Building HipChat view</b>

To create a new view for webix, we can use the code similar to this:

  webix.protoUI({
name:"hipchat",
$init:function(config){
    //configuration params
    var params = [
        "anonymous=true",
        "minimal=true",
        "timezone="+config.timezone,
        "welcome_msg="+(config.welcome_msg||"Welcome to Webix Hub Chat")
    ];

    //building full url
    var url = config.url + (config.url.indexOf("?") > 0 ? "&" : "?") + params.join("&");
    if (url.indexOf("https://") !== 0)
        url = "https://" + url;

    //loading the hipchat
    this.$view.innerHTML = "<iframe src='" + url + "' frameborder='0' width='100%'  height='100%'></iframe>";
  },
  }, webix.ui.view);

The code is pretty simple. It creates a new view and defines the constructor function. Code of the constructor builds the HipChat url and renders the view. That’s enough to create a custom view, which can later be used the same as any default component:

 webix.ui({
view:"hipchat",  url: "YOUR_GUEST_ACCESS_URL", timezone: "PST"
})

There are two mandatory parameters – url and timezone. URL can be taken from hipchat client, when you are sharing access to the room.

Such custom view will work the same as any common webix component. It can be placed directly on the page, or it can be a part of webix layout (placed in the tabbar, accordion or window). For example, check the next sample:

http://snippet.webix.io/29d9a102

You can resize (collapse) webix views and HipChat view will adjust itself accordingly.

<b>Are we good?</b>

As you can see, it requires just a few lines of code to embed a third party component in Webix’s views.

By adding simple wrappers, it’s possible to use any custom lib with Webix UI. Still there’s a problem that each time we have to begin creating such wrappers from scratch. That’s why we’ve decided to create an open repository for solutions of this kind. It is located at https://github.com/webix-hub/components. Here we plan to place all the integrations for third-party libraries and custom components – all extras which can be used with the Webix library.