DIY - Custom Integration Pattern

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

• integration with various frameworks
• integration with popular text editors
• integration with charts and planning tools.

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.

webix.protoUI({
    name:"myCustomName",
    $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:

webix.ui({
    view:"myCustomName",
    // config
});

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

Back to top