Build custom components

Module Designer lets you build your own custom components and reuse them across different custom pages and other custom components. Please give this a read if you are not aware of what is component, its importance and structure.

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_ComponentButtonWithIcon.

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.