Customize Vtiger UI

You can add custom UI actions like buttons, icons, links, widgets in Vtiger list and detail pages. Using these you can make Vtiger UI more interactive, customizable and cater to specific user and business needs.

Following are the placeholder hooks available in Vtiger UI

List Page hooks

• List View Button
• List Mass Action Button
• List Settings (only for Admin users)
• List Custom Views (Kanban view, Calendar view, or List of records view)
• List Row Basic Action
• List Row Secondary Action
• Global Action

Detail Page hooks

• Detail One View Widget
• Detail View Button
• Detail Header Widget
• Detail Summary Widget
• Detail More Action Icon
• Detail More Action Activity Item
• Detail Related Record Action

How to add custom button in List page?

Go to Menu, under Platform App select Module Designer. You will see the below page. Once there, you will want to select the module you wish to add the button to from the dropdown menu in the top left-hand corner.

Next, a pop-up window will appear. Add a name for the Tap Script, example "ListExample" and, once again, select the module. Here you can also select module where you want the button to appear,or leave the target module blank to let button appear in all modules.

Click ‘Save’ and you should now see a screen where you can begin coding.

    
        var Contacts_Component_ListExample = VTAP.Component.Core.extend({ 
            //created function is called 
            created() {
                VTAP.Component.Register('LIST_BASIC_BUTTON', 
                                        {}, 
                                        VTAP.Component.Load("BasicButton","Contacts"),
                                        {module : 'Contacts'}
                                );
            }
        });

        var Contacts_Component_BasicButton = VTAP.Component.Core.extend({
            methods : {
                click() {
                    alert('Hooray!! my first button');
                }
            },
            template : `Custom button`
        });
    

Please note that the name of script given and the name of the component should match, which in this example is "ListExample". Every button is wrapped in a Vtiger Component, to understand more about component and its life cycle click here.

Please check here for more examples on other hooks.