Understand Vtiger Components

Vtiger Client framework is built on Vuejs and vue framework has components which serves as building blocks in Vtiger. Every page, widget, chart, list in Vtiger is made up of such components. Each component are resuable instance of vue identified with a name. To learn more read this.

In Vtiger we have defined root component VTAP.Component.Core and all other components extend this base component. You can include one component inside another component also.

Naming Conventions of a component

Component name is divided into 3 parts separated with underscore (_). First is the name of the module where the component would be used, 2nd is fixed term 'Component' and the last part is the your custom name to identify the component. For example if you want to build a custom widget for Contacts module then you should give Contacts_Component_WeatherWidget.

    
        var Contacts_Component_WeatherWidget = VTAP.Component.Core.extend({

        });
    

General structure of a Vtiger component consist of following properties:

• data : its an on object where all the properties are converted into reactive elements. These can then be further used to render in templates or used in functions for processing.
• props : it hosts list of attributes that are passed from the parent component. These attributes consists of data and can be used in child component.
• component : this allows you to add other components within the component.
• methods : all the functions defined inside methods can be accessed within the component instance using this context.
• created : this lifecycle hook/method is triggered when component instance is created.
• mounted : this hook/method is triggered when component is mounted on the DOM.
• template : this is where the html of the component is added which gets rendered in the browser.

There are other properties but we have defined the commonly used ones only here, if you are interested to learn more then you can give this a read. A skeleton structure of a component is shown below.

    
            var  Contacts_Component_WeatherWidget = VTAP.Component.Core.extend({
                props : { 
                    //add props from the parent
                }, 
                data() { 
                    return {
                        //add your component data variables here
                    }
                }, 
                components :{ 
                    //add other child components here if used in templates
                },
                computed : {
                    //add computed properties
                },
                created() {
                    //add other component registration or listen to vtiger events
                    //perform ajax request required for your component.
                },
                mounted() {
                    //this is called after component is mounted on the DOM
                },
                template :
                    `<div>Custom component structure</div>`
            });