UI Component

Module Designer allows you to build 3 different types of components, Custom, List View, and Detail View components.You can navigate to Module Designer > Components to add the component you want.

Types Of Component :

Custom Components: These are independent of the existing components in Vtiger CRM and can be reused across different custom pages and other custom components. If you are unfamiliar with what a component is, its importance, and its structure, please review the this document.
List View Components: This component extends the main ListView component of Vtiger CRM, enabling you to add extra features to the existing ListView, according to your specific needs.
Detail View Components: This component extends the main DetailView component of Vtiger CRM, enabling you to add extra features to the existing DetailView, according to your specific needs.

Note : While custom components are designed for reuse across various custom pages and other components, these changes won't automatically apply to the CRM interface. To see your customizations reflected in the CRM, you must add the custom component to Module Designer > TAP Scripts and then save and publish your changes. This step ensures that your modifications are integrated into the CRM's workflow and are visible in the interface.

Custom Component

To add custom component, go to Module Designer and select any module and add Component under resources.

In the below example we will define a custom component that will show an icon inside the button. We will name it ButtonWithIcon and create it in Contacts module, you will see the IDE with default component name.

Example

Lets start writing the component, first is the name of the component with "ButtonWithIcon". Since we want to add this in Contacts module, the final name would be Contacts_Component_ButtonWithIcon.

Note: Please be sure to follow the syntax for naming the component i.e ModuleName_Componet_Componentname, where Component is a standard keyword and ComponentName is the one that you provided while creating the component.

We want to give label to the button and pass an icon name to display before the label. These will be provided by the parent component as attributes so we need to add them in props properties. For icons we will make use of font awesome classes.

props : ["label", "icon"]

Finally we will add html which will be used to display in DOM to the template property. Notice the use of props in templates, if used to display as text then place them under curly braces, if passed to attribute then activate reactivity by binding with colon(:).

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

    //add props to get icon name and button label from parent component
    props : ['icon', 'label', 'varient'],

    //dynamic property defines button varient
    computed : {
        buttonClass() {
            if(this.varient == '') this.varient = 'primary';
            return 'btn btn-'+this.varient;
        }  
    },

    //button html
    template : 
        `<button :class="buttonClass">
            <i :class="icon"></i>
                {{label}}
            </button>`
});

Add_AdvancedSettings_ListPage.js

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

    created() {
        VTAP.Component.Register('LIST_ADVANCED_SETTING',
                                {name:'Custom Settings',
                                clickHandler:() => { 
                                    alert('redirect to settings page'); 
                                }
                            });
    }
});

Add_Global_Action.js


var Contacts_Component_GlobalAction = VTAP.Component.Core.extend({ 
    created() {
        VTAP.Component.Register('GLOBAL_ACTION', 
                                {},
                                VTAP.Component.Load('CustomGlobalIcon','Contacts'));
    }
});

var Contacts_Component_CustomGlobalIcon = VTAP.Component.Core.extend({
    methods : {
            click(){
                    alert('click on global action icon');
            }
    },
    template:`<ispan class='btn p-2' @click=click()><ii class='fa fa-cloud'><i/i><i/span>`
});

Save and Publish the component and it will be available for any custom page to include.

See here how custom components are used in custom pages.

List View Component

Consider a scenario where you have developed a custom page for the Contacts module, you’ll have to type the entire url every time you want to access the custom page, but using the list view component you can create a LIST_BASIC_BUTTON which on click will redirect you to the custompage.

Navigate Module Designer -> Select Module -> Component -> List View

Add the code for creating the button which redirects to the custom page on clicking

var custom_Contacts_Component_ListView = Contacts_Component_ListView.extend({ 
     created() {
        VTAP.Component.Register('LIST_BASIC_BUTTON', {
            label: 'Custom Page',       
            clickHandler: () => {   
                window.location.href = "https://vti-shrravya-a-20240721120901.od1.vtiger.ws/view/custompage?module=Contacts";
            },
            icon: 'fa-check',        
            variant: 'primary'       
        });
    }
});

Save And Publish. Now go back and refresh you should be able to see, the custom page button will be added to your List View of Contacts Module which onclick will redirect you to your custom page.

Detail View Component

Consider an example where you want to create a record for Deals in the Detail View of Contacts Module. We can add a button to the Detail View which on click will open the quick create of the Deals Module. Navigate Module Designer -> Select Module -> Component -> Detail View

Add the code for creating a deals quick create button

var custom_Contacts_Component_DetailView = Vtiger_Component_DetailView.extend({ 
   created() {
        VTAP.Component.Register('DETAIL_BASIC_BUTTON', 
            {
                label: 'Deals', 
                icon: 'fa-pencil', 
                variant: 'primary', 
                clickHandler:() => { 
                    VTAP.Utility.ShowRecordCreate(this.record,'Potentials',()=>{});
                }
            }
        );
    }
});

Save And Publish. Now go back and refresh you should be able to see your Deals Quick Create Button in the detail view which on click will show a quick create of Deals.

Vtiger Application Platform Documentation

UI Component

Custom Component

List View Component

Detail View Component