Client Framework

Vtiger CRM frontend client framework is developed using VueJS 2.x components which serves as building block. UI page, widget, chart, listview in CRM is built using tailored components. These components can be further reused by finding their name read more

The VTAP.Component.Core can be extended to create custom components with naming convention:

ModuleName_Component_ComponentName

To create WeatherWidget component for Contacts module you will have define it as follows:

var Contacts_Component_WeatherWidget = VTAP.Component.Core.extend({});

Each component comprises of following essential properties or methods:

NameTypeDescription
datafunctionshould return object having variable and default value. variables can be in templates or methods
propsarraylist of tag attributes that can be used when embedded in HTML
componentsobjectdependent component-name mapped to target component instance.
methodsobjectinstance specific functions.
createdfunctionlife-cycle function called when instance of component is created.
mountedfunctionlife-cycle function called when component is mounted to DOM.
templatestringHTML content that will be transformed to DOM.

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>`
});