DIY - Custom Integration Pattern

Webix offers a number of ready-made solutions that integrate it with other JavaScript libraries and frameworks:

However, it's not possible to provide support for all the libraries or tools that exist in huge number on the Web. If you haven't found the needed solution among the built-in ones, you can write your own integration pattern. Webix offers an elegant way to do this.

The main thing here is to create a new Webix component that will display the needed tool on the page.

    $init:function(config){ ... },
    // other methods
}, webix.ui.view);

This prototype component should inherit from view, a base class for all the ui-related components. A pure view doesn't contain any info and acts as a placeholder for the real component.

It can have any number of properties and methods with two of them being mandatory:

  • name - property that defines view name you will use during initialization
  • $init - function that is executed on component initialization. It's argument is the component's configuration object.

The following code will instantiate the above-created object and display it on the page:

    // config

To learn more about how to create a custom object in Webix, go to the corresponding documentation article.

HipChat Integration

Let's take a HipChat, a popular professional chat solution with an opportunity to work on the web.

Prototype Component

        //configuration params
        var params = [
            "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
        var html="<iframe src='"+ url+"'frameborder='0' width='100%' height='100%'>
        this.$view.innerHTML = html;                           
}, webix.ui.view);

Initializing HipChat on a page:

    view:"hipchat",  url: "YOUR_GUEST_ACCESS_URL", timezone: "PST"

You get the URL value through Hipchat client when you share the room access.

Related Sample: HipChat Integration

Back to top