VTAP JS

App Creator provides Javascript runtime under VTAP which provides helper APIs to interact with CRM.

VTAP.Component

Component is the representation of UI element on the page. It controls the presentation of data based on UI state.

.Core

You can create custom components by extending core component as follows:

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

To create Settings View component for MyModule you should use:

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

Core component has lifecycle hooks as of VueJS 2.x read more

var MyModule_Component_RegisterButton = VTAP.Component.Core.extend({
    props: {
        /* parent to this component */
    },
    data() {
        return {
            /* self data variables */
        }
    },
    components: {
        /* dependent components */
    },

    template: `<div>Custom component HTML structure</div>`,

    created() {
        /* setup listener to events (or) fetch data */
    },

    mounted() {
        /* UI element is mounted to DOM */
    }
})

.Load

VTAP.Component.Load(name, module) - Load and return Vtiger Component Object.

Parameters

namestring
modulestring

Returns

objectVtiger Component

.Find

VTAP.Component.Find(name) - Find Vtiger Component Object defined by name.

Parameters

namestring
modulestring

Returns

objectVtiger Component

.Register

VTAP.Component.Register(type, data, component, filter) - Add and Return custom component on a Page.

Parameters

typestringtype of component to be added, click here for complete list with examples.
dataobjectMany components only depend on data to show in UI, these are generally key-value pair values. See component types for examples
componentVtiger ComponentCustom component that you want to render in the UI.
filterobjectUse this when you want to restrict the component to be loaded for a particular module. For example {‘module’:’Contacts’)

Returns

objectVtiger Component

This API allows subscribing to UI Event Hooks that are emitted by core or custom components on the page. Visual representation of the hooks is shown below:

See all UI Hooks here

VTAP.View

VTAP.View() helps get the current page view name like list, detail, edit etc.

VTAP.User

VTAP.User() helps fetch the current logged in user details like first name, last name, email, profile image, isadmin etc.

Example : To display a button based on the roles of the users.

var Contacts_Component_ListViewExamples = VTAP.Component.Core.extend({
    created() {
        var userInfo = VTAP.User();
        var userRole = userInfo.roleid.label;

        // Define the roles allowed to view the button
        var allowedRoles = ['CEO','Sales Manager'];

        if (allowedRoles.includes(userRole)) {
            VTAP.Component.Register('LIST_BASIC_BUTTON', {
                label: 'Custom Page',
                clickHandler: () => {
                    window.location.href = " ";  
                },
                icon: 'fa-check',
                variant: 'primary'
            });
        }
    }
});

VTAP.Utility

Provides utility functions like showing modal, show success/error UI notification etc.

.ShowSuccessNotification

VTAP.Utility.ShowSuccessNotification(message)

Shows success UI notification - useful to inform success after the action.

messagestringThe message that needs to be shown in notification. Default values to "Success".

.ShowErrorNotification

VTAP.Utility.ShowErrorNotification(message)

Shows the error UI notification - useful to inform users about failed actions.

messagestringThe message that needs to be shown in notification. (default=error)

.ShowPopup

VTAP.Utility.ShowPopup({component, componentData, modalOnModalMode})

Shows a popup modal

componentVtiger ComponentThis is Vtiger Vue component, see here for more details.
componentDataobjectIt will hold parameters that need to be sent to the Vtiger component to be shown in popup.
modalOnModalModebooleanIf there is another popup then do you want to show the modal on top of it or not. (default=false)
VTAP.Utility.ShowPopup({
    component : VTAP.Component.Load('Relation', 'MYMODULE'),  
    componentData : {title : 'List of records'}, 
    modalOnModalMode : true
});

var MYMODULE_Component_Relation = VTAP.Component.Core.extend({
   template:
   //We are using boostrap-vue components b-modal here. Check [here](https://bootstrap-vue.org/docs/components/modal) more details.
      `<b-modal id="modal-1" title="Vtiger popup">
          <p class="my-4">Add popup contents here</p>
       </b-modal>`
});

.HidePopup

VTAP.Utility.HidePopup('modal-1') - This will hide the popup opened by ShowPopup API. 'modal-1' is the id value from the above pop up template example.

.UserLabels

VTAP.Utility.UserLabels() - This returns a list of all the CRM users and their ids. This is useful to identify owner of the record as API's return back in the form of ID.

.ShowProgress

VTAP.Utility.ShowProgress() - This can be used to when some background tasks like fetching data from the server is initiated, and inform user to wait for the job to complete.

.HideProgress

VTAP.Utility.HideProgress() - This is used to hide the progress bar initiated by ShowProgress API.

.ShowRecordPreview

This API lets you see the preview of a CRM record, given you have crm ID and the name of the module.

idstringThis is the CRM record ID.
modulestringModule name
VTAP.Utility.ShowRecordPreview('1234', 'Contacts')

.ShowRecordCreate

VTAP.Utility.ShowRecordCreate(record,module,callback)

Shows a quickcreate popup modal

recordobjectHere we need to send params to which quickcreate modal fields will be populated with that data
modulestringModule name
callbackfunctionuser handler function
VTAP.Utility.ShowRecordCreate(
        {'fieldname':'fieldvalue'},
        'MODULENAME',
        ()=>{}
);

var MYMODULE_Component_ComponentName = VTAP.Component.Core.extend({
    //Here record is injected by the VTAP framework.
    props : ['record'],
    created() {
        var showRecordCreate = ()=>{
            VTAP.Utility.ShowRecordCreate(this.record,'MODULENAME',()=>{});
        };
        VTAP.Component.Register('DETAIL_BASIC_BUTTON', 
                                {label:'Custom', 
                                icon:'fa-pencil', 
                                variant:'primary', 
                                clickHandler : showRecordCreate
                            }, '', {module:'MODULENAME'});
   }
});

.ShowRecordEdit

VTAP.Utility.ShowRecordEdit(record,module,callback)

Shows a edit popup modal of a record

recordobjectVtiger_Record_Model object
modulestringModule name
callbackfunctionuser handler function
let record = Vtiger_Record_Model.getCleanInstance();
record.set('id', '12345');

VTAP.Utility.ShowRecordEdit(record, 'Contacts', () => {
    //callback function
});

.ShowRecordDelete

VTAP.Utility.ShowRecordDelete(record_id,module)

Shows a delete popup confirmation of a record.

record_idnumberVtiger_Record_CRMID
modulestringModule name
VTAP.Utility.ShowRecordDelete(record_id, 'Contacts', () => {
    //callback function
});

VTAP.List

Provides helper function to work on List View Page.

.Records

VTAP.List.Records() returns current record objects available in the list page.

Returns void

.NextPageExist

VTAP.List.NextPageExist() - checks if there are records in the next page.

Returns

BooleanReturns true if records exists in next page, if not then returns false

.PrevPageExist

VTAP.List.PrevPageExist() : checks if there are records in the previous page.

Returns

BooleanReturns true if records exists in previous page else returns false

.NextPage

VTAP.List.NextPage() : moves the current page to the next page.

Returns void

.PreviousPage

VTAP.List.PreviousPage() : moves the current page to the previous page if it exists.

Returns void

.Reload

VTAP.List.Reload() : reloads the current page, all the meta data are retained like page, search, ordering etc. It only reloads the list page records not the entire page.

Returns void

VTAP.List.Search(searchobject) : It searches for the search string, you can search for multiple fields. It searches for those fields that are available in the UI.

Parameters

searchObjectobjectjavascript map of fieldname and search string.
VTAP.List.Search({'firstname':'John', 'lastname':'wick'})

.ClearSearch

VTAP.List.ClearSearch() : It will remove all the search values applied for all the fields.

Returns void

.Sort

VTAP.List.Sort(fieldname, order) : It will sort the list page with the fieldname.

Parameters

fieldnamestringName of the field on which sort has to be applied
orderstring'asc' for ascending order, 'desc' for descending order. (default=desc)

.SelectedRecords

VTAP.List.SelectedRecords() : It gives a list of records selected in the list page.

Returns

PromiseReturns Promise function, use a handler to get the list of records.
VTAP.List.SelectedRecords().then( (records) => {
    console.log(records);
});

VTAP.Detail

Provides helper functions to work with Detail View Page.

.Id

VTAP.Detail.Id() : If you are in the detail page, then it returns record id.

Returns

integerit returns record id

.Module

VTAP.Detail.Module() : This function returns the name of the module.

stringit returns module name

.Record

VTAP.Detail.Record() : It returns a current record object.

Returns

PromiseIt returns Promise function, use handler to get record object
VTAP.Detail.Record().then( (record) => {
        //record is of type Vtiger_Record_Model
})

.RefreshRecord

VTAP.Detail.RefreshRecord() : This function is used to refresh the record in detail view when any PUT or POST action is performed.

VTAP.Detail.RefreshRecord();

.Relations

VTAP.Detail.Relations() : This function returns all the relationship meta with the current record(module).

Returns

PromiseIt returns Promise function, use handler to get relation objects
VTAP.Detail.Relations().then( (relations) => { });

.Relation

VTAP.Detail.Relation(module) : Use this function to get relation meta for a particular module.

Parameters

modulestringmodule name of the relation

Returns

PromiseIt returns Promise function, use handler to get relation object
VTAP.Detail.Relation('Contacts').then( (relations) => { });

.RelatedRecords

VTAP.Detail.RelatedRecords(module, filterobject) : It returns related records of the current record.

Parameters

modulestringmodule name of the relation
filterobjectobjectfilterobject lets you set a page, filter conditions etc.
extrafieldsarrayUse this parameter to include extra fields beyond the default ones, such as fields that are not enabled for Quick Create, Header, etc.
You can include the label field to fetch the record's name in the API's response.

Returns

PromiseIt returns Promise function, use handler to get filtered records
VTAP.Detail.RelatedRecords('Contacts', {page : 2, filter : [] }).then(
(records) => {
    console.log(records);
});

Assume you are working with the Contacts module and want to retrieve related Case records that include fields such as casechannel and slastatus, which are not part of the default response. You can now easily include these fields in your API request.

VTAP.Detail.RelatedRecords("Cases", { 'extrafields': ['casechannel', 'slastatus'] })
.then((case_records) => {
    // Process the retrieved case records with extra fields
});

When fetching related Case records, you might want to include the record's name for easy identification. Simply pass label as an additional field.

VTAP.Detail.RelatedRecords("Cases", { 'extrafields': ['label'] })
.then((case_records) => {
    // The response now includes the label (name) of each case
});

.RelatedRecordsCount

VTAP.Detail.RelatedRecordsCount(module, filterobject) : It gives you total records available in the relation.

Parameters

modulestringmodule name of the relation
filterobjectobjectfilterobject lets you set filter conditions etc.

Returns

PromiseIt returns Promise function, use handler to get filtered records
VTAP.Detail.RelatedRecordsCount('Contacts', {filter : [ ] }).then( (count) => { });

.ShowRelatedRecordCreate

VTAP.Detail.ShowRelatedRecordCreate(record,module,callback) : It opens QuickCreateRelatedModal popup and allows to create related records

recordobjectGet detail recordmodel send as record object ,you can see here for reference
modulestringRelated Module name
callbackfunctionuser handler function
var MYMODULE_Component_DetailButton = VTAP.Component.Core.extend({
    var showRelatedRecordCreate = ()=>{
        VTAP.Detail.Record().then((record)=>{
                    VTAP.Detail.ShowRelatedRecordCreate(record,'Tasks',()=>{});
            })
    };
    VTAP.Component.Register('DETAIL_BASIC_BUTTON', 
                                {label:'Custom', 
                                icon:'fa-pencil', 
                                variant:'primary', 
                                clickHandler : showRelatedRecordCreate
                            }, '', {module:'Deals'});
});

VTAP.Modules

Provides helper function to get access to module meta information on any page.

VTAP.Modules.CurrentModuleName

VTAP.Modules.CurrentModuleName() : returns current module name.

Returns

stringmodule name

VTAP.Modules.CurrentModuleModel

VTAP.Modules.CurrentModuleModel() : It returns current module meta information.

Returns

PromiseIt returns Promise function, use handler to get module object
VTAP.Modules.CurrentModuleModel().then( (moduleObject) => { });

VTAP.Modules.GetModule

VTAP.Modules.GetModule(modulename) : It returns module meta information for passed modulename.

Parameters

modulenamestringname of the module

Returns

PromiseIt returns Promise function, use handler to get module object
VTAP.Modules.GetModule('Contacts').then( (moduleObject) => { })

VTAP.Modules.GetAll

VTAP.Modules.GetAll() : It returns list of accessible modules

Returns

PromiseIt returns Promise function, use handler to get module list
VTAP.Modules.GetAll().then( (moduleList) => { });

VTAP.Api

Provides helper functions to interact with core product APIs. For more details on see here

VTAP.Api.Get

VTAP.Api.Get(uri, parameters, callback) : Performs get request on the uri and returns the response to the callback handler.

Parameters

uristringunique server resources, see here for the list
parametersobjectparameters required for the uri, it is to be given in key-value format
callbackfunction(error, success)handler function gets response from server

Example: To retrieve record information

VTAP.Api.Get('records', {id : VTAP.Detail.Id(), 
  module : VTAP.Detail.Module()}, (error, response) => {
    //response has record data
});

VTAP.Api.Post

VTAP.Api.Post(uri, parameters, callback) : It is used to add new resources to the server.

uristringunique server resources, see here for the list
parametersobjectparameters required for the uri, it is to be given in key-value format
callbackfunction(error, success)handler function gets response from server

Example : To add a Contact record

VTAP.Api.Post('records', {module : 'Contacts', firstname : 'John', 'lastname' : 'Wick', 'email' : 'john@wick.com'}, (error, response) => {
    //response will have record data
});

VTAP.Api.Put

VTAP.Api.Put(uri, parameters, callback) : It updates an existing resource on the server.

uristringunique server resources, see here for the list list
parametersobjectparameters required for the uri, it is to be given in key-value format
callbackfunction(error, success) handler function gets response from server

Example: To update Contact record, id is the record crmid or the id you see in the url of detail page.

VTAP.Api.Put('records', {module : 'Contacts', id : '123', 'email' : 'newjohn@newwick.com'}, (error, response) => {
    //response will have record data
});

VTAP.Api.delete

VTAP.Api.delete(uri, parameters, callback) : This function deletes a resource on the server.

uristringunique server resources, see here for the list
parametersobjectparameters required for the uri, it is to be given in key-value format
callbackfunction(error, success)handler function gets response from server

Example: To delete a Contact record.

VTAP.Api.Delete('records', {module : 'Contacts', id : '123'}, (error, response) => { });

VTAP.CustomApi

Provides helper functions to invoke API defined through API Designer using logged in user context. Signature of the functions are similar to VTAP.Api scope.

VTAP.CustomApi.Get

VTAP.CustomApi.Get(uri, parameters, callback) : Performs get request on the uri and returns the response to the callback handler.

uristringunique server resources created from API Designer
parametersobjectparameters required for the uri, it is to be given in key-value format
callbackfunction(error, success)handler function gets response from server

Example: To retrieve weather of a Mailing City of a Contact (get_weather added from Api Designer)

VTAP.Detail.Record().then( (record) => { 
    VTAP.CustomApi.Get('get_weather', {'city' : record.mailingcity}, 
        (error, response) => {
            //response has record data
        });
});

VTAP.Event

Provides helper functions register, unregister and listen on Vtiger UI Events.

VTAP.Event.Register

VTAP.Event.Register(eventname, handlerName) : It allows you to register for vtiger events or custom events.

eventnamestringname of the event, list of supported events are here
handlerNamefunctionhandler function

Example: To listen for detail preview popup to show up.

function handler() { }
VTAP.Event.Register('DETAIL_PREVIEW_SHOWN', handler);

VTAP.Event.DeRegister

VTAP.Event.DeRegister(eventname, handlerName) : You can de-register for events that you have registered with the Event.Register API. Parameters and return type are the same as the Register API.

Example :

function handler() { }

VTAP.Event.DeRegister('DETAIL_PREVIEW_SHOWN', handler);

VTAP.Event.Trigger

VTAP.Event.Trigger(eventname, data) : You can trigger custom events using this API, generally used when you have custom buttons, links and widgets.

eventnamestringname of the event, list of supported events are here
dataobjectkey value pair of data that you want to send to the listening handler.

Example: To trigger a custom event on a page..

VTAP.Event.Trigger('MY_CUSTOM_EVENT', ({"id":VTAP.Detail.Id(), "module":VTAP.Detail.Module()});

VTAP.Notification

Provides helper functions to work with real-time notifications.

VTAP.Notification.Trigger

VTAP.Notification.Trigger(module, data) : This is used to send real-time notification from client-side to other connected users on the same module.

modulestringname of the module
dataobjectkey value pair of data that you want to send to the listening handler.

Example: To trigger notification on Contact Detail View for all connected users.

VTAP.Notification.Trigger('Contacts', ({"id":VTAP.Detail.Id(), "user_name":VTAP.User().user_name, "mode":"accessed"});

Example: To trigger notification on Contact Detail View for only specific connected users.

VTAP.Notification.Trigger('Contacts', ({"id":VTAP.Detail.Id(), "user_name":VTAP.User().user_name, "mode":"accessed","users": [1, 6]});

VTAP.Notification.Listen

VTAP.Notification.Listen(module, callback): This helps you listen on the event notification sent using VTAP.Notification.Trigger api.

modulestringname of the module
callbackfunctionuser handler function

Example: To listen to notification triggers.

VTAP.Notification.Listen('Contacts', (data) => {
    //data has the custom info send from Notification.Trigger api
});

VTAP.AppData

VTAP.AppData.Save(module, data, callback) : It saves the data for the module.

modulestringname of the module
dataobjectdata_key is used to store the key and data_value is where actual data is stored. Use onlyadmin flag to allow only admins to read/write. Ex : ({"data_key":"secret", "data_value":"wrfs3fr","onlyadmin":true})
callbackfunctionuser handler function

Example:

VTAP.AppData.Save("my_extension_name", {"data_key" : "username", "data_value" : "something@email.com"}, (error, success) => {

});

.Get

VTAP.AppData.Get(module, data, callback) : This is used to fetch the app data that is stored using VTAP.AppData.Save api.

modulestringname of the module
dataobjectdata_key is used to retrieve the key. Ex : ({"data_key":"secret"})
callbackfunctionuser handler function
VTAP.AppData.Get("my_extension_name", {"data_key":"username"}, 
(error, success) => {

});

.Delete

VTAP.UserData.Delete(module, data, callback) : It will delete the data saved by UserData.Save api.

VTAP.UserData.Delete("extension_name", {"data_key" : "conversation", "id" : "23"}, (error, success) => {

});

VTAP.Resource

Provides helper functions to include external resources like Javascript libraries, style sheets.

.Require

VTAP.Resource.Require(path, type) : This will let you add external resources to use them in your components.

pathStringPath to external script
typeStringDefault value is “script”, if you are including style sheets then set type as “style”
VTAP.Resource.Require('https://unpkg.com/leaflet@1.6.0/dist/leaflet.js');

Note: Before using any resource you need to whitelist the domain in Module Designer > Settings > Add Domain

VTAP.OAuth

Provides a helper function to gather the OAuth grant from the user of the application to further interact with APIs of third-party-services (setup through API designer).

.Authorize

This will open up the service that is registered for the module. This depends on the oauth client app that you have registered in your application.

Any OAuth needs an client app to be registered, this setup is generally done by the administrators. Admins will be first prompted to provide client details like Client ID, Client Secret, Auth URL, Token URL and Scopes. Refer the screenshot here, once the setup is done then only other users will be able to use it.

After saving the details, if they are correct then we will redirect and open popup requesting grant from the target application.

serviceStringname of the service
moduleStringname of the module
callbackfunctionuser handler function
VTAP.OAuth.Authorize("3PService", "Contacts", (error, success) => {

});

.IsAuthorized

Checks if a service is already authorized or not.

VTAP.OAuth.IsAuthorized("3PService", "Contacts", (response) => {
    if(response.authorized) {
    //user has authorized
    }
});

.Revoke

Removes oauth tokens which has earlier obtained using Authorize api.

VTAP.OAuth.Revoke("3PService", "Contacts", (response) => {
});

.ShowAuthClientDetailsPopup

Show oauth client app details which was earlier saved by admins. This should generally be used when admins wants to change client secret or scopes.

VTAP.OAuth.ShowAuthClientDetailsPopup("3PService", "Contacts");

VTAP.OAuth.DeleteAuthClientDetails

Revokes a oauth client app details which was earlier saved by admins.

VTAP.OAuth.DeleteAuthClientDetails("3PService", "Contacts").then((success){
    //success   
}, (error) => {
    //failure
});

VTAP.Field

This object exposes api's that will help you add custom behaviour on the Vtiger Fields. Fields are pieces of information which make a CRM record. For example Contact first name, last name, Company Name are considered as field in Vtiger.

VTAP.Field.RegisterValidator

This API lets you register custom field validation. You may want to avoid your agents making mistakes of filling incorrect values in the CRM. For example, VAT number should be strictly 16 character length, or tracking shipping delivery code should

fieldnameStringname of the field where custom validation should be applied
moduleStringname of the module
handlerFunctionfunctionthe function will have the logic to decide the validation rules, and returns true/false
errorHandlerfunctionreturns the error message that should be shown when validation fails.
//Adding validation for Contact's First name to be not empty. 
VTAP.Field.RegisterValidator('firstname','Contacts', (value) => { 
    if(value == '') {
        return false;
    }
}, (error) => { 
    return "First name cannot be empty"; 
});

//Adding validation for Contact's Mobile number cannot be less than 10 digit 
VTAP.Field.RegisterValidator('mobile','Contacts', (value) => { 
    if(value.length < 10) {
        return false;
    }
}, (error) => { 
    return "Mobile should be atleast 10 digits!!"; 
});

VTAP.Field.RegisterValidatorForType

This API will enable you to add validation for field type. For instance if you want to add same validation to all the email fields, or phone fields or url fields then you need to use this field. Another example is you want to avoid adding any email address in any of the email field with gmail.com/outlook.com in Contacts module. The definition of the API is same as RegisterValidator, except the first argument is field type instead of field name.

fieldtypeStringfield type like 'email', 'phone', 'url', 'multicurrency', 'picklist', 'text', 'boolean', 'percentage', 'richtext', 'image', 'file', 'metricpicklist', 'grid', 'datetime', 'radio', 'anniversary', 'owner'
moduleStringname of the module
handlerFunctionfunctionthe function will have the logic to decide the validation rules, and returns true/false
errorHandlerfunctionreturns the error message that should be shown when validation fails.
//Adding validation for Contact's First name to be not empty. 
VTAP.Field.RegisterValidatorForType('email','Contacts', (value) => { 
    if(value != '' && value.indexOf('gmail.com') !== -1) {
        return false;
    }
}, (error) => { 
    return "We do not accept gmail addresses"; 
});

//Adding validation for Contact's Mobile number cannot be less than 10 digit 
VTAP.Field.RegisterValidatorForType('phone','Contacts', (value) => { 
    if(value.length < 10) {
        return false;
    }
}, (fieldLabel) => { 
    return fieldLabel+" should be atleast 10 digits!!"; 
});

Component Types

TypeDescriptionExample
LIST_ADD_VIEWTYPEAdd custom views like kanban, calendar view in list view.VTAP.Component.Register('LIST_ADD_VIEWTYPE', {name : 'ChartView', icon : 'fa-barchart', 'label' : Chart View'}); Note : Once added it will search for a component named “ChartView”, you need to register component Vtiger_Component_ChartView = VTAP.Component.Core.extend({ }); To understand the typical structure of a vtiger component click here
LIST_ADVANCED_SETTINGIn the List page we show settings icons next to navigation for admins, your custom option will be available here. Generally used to store extension settings. VTAP.Component.Register('LIST_ADVANCED_SETTING', {name : 'Workflows', clickHandler : () => { } });
LIST_BASIC_BUTTONAdd a custom button in the list page next to the Add Record button.VTAP.Component.Register('LIST_BASIC_BUTTON', {label:'Custom', icon:'fa fa-pencil', varient:'btn btn-primary', clickHandler: () => { } }, '', {module:'Contacts'}); For icon you can use any font awesome icon class, and for varient you can use any bootstrap button class. clickHandler is a function.
LIST_ROW_BASIC_ACTIONEvery list row has actions on the right side, your component can add any element but recommended is an icon.VTAP.Component.Register('LIST_ROW_BASIC_ACTION', {icon:'fa fa-plus',label:'Send email',clickHandler: () => {}}, '', {module:'Contacts'});
LIST_ROW_SECONDARY_ACTIONThis will add a component to the left side of every row in the list page.VTAP.Component.Register('LIST_ROW_SECONDARY_ACTION', {icon:'fa fa-plus',label:'Send email',clickHandler: () => {}}, '', {module:'Contacts'});
LIST_MASS_ACTIONIt will add an icon in the list view mass actions.VTAP.Component.Register('LIST_MASS_ACTION', {icon:'fa-pencil',name:'Edit',clickHandler:()=>{},showHandler:()=>{}}, false, {module:'Contacts'});
GLOBAL_ACTIONIt will add a component at the top of the page where search and other actions are available. These actions will be available in all the pages.VTAP.Component.Register('GLOBAL_ACTION', {icon:'fa fa-plus',label:'Send email',clickHandler: () => {}}, '', FILTER);
DETAIL_ONEVIEW_WIDGETIt will let you add widget in One view related tab of the detail pageVTAP.Component.Register('DETAIL_ONEVIEW_WIDGET', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
DETAIL_MORE_ACTION_ITEMAdd custom actions from 3 dots on the top right side of the detail page.VTAP.Component.Register('DETAIL_MORE_ACTION_ITEM', {icon:'fa fa-plus',label:'Send email',clickHandler: () => {}}, '', FILTER);
DETAIL_BASIC_BUTTONAdd a button in detail view header where other actions are available.VTAP.Component.Register('DETAIL_BASIC_BUTTON', {label:'Custom', icon:'fa fa-pencil', varient:'btn btn-primary', clickHandler: () => { } }, '', FILTER);
DETAIL_ACTION_ICONAdd an actionable icon in more actions(3 dots) in the detail page.VTAP.Component.Register('DETAIL_ACTION_ICON', {name:'',icon:'',showHandler:() => {},clickHandler: () => {}}, '', FILTER);
DETAIL_HEADER_WIDGETAdd component in the detail page header.VTAP.Component.Register('DETAIL_HEADER_WIDGET', {}, VTAP.Component.Load("COMPONENT_NAME","MODULENAME"), FILTER);
DETAIL_RELATED_RECORD_ACTIONAdd a custom action for records appearing in the related list.VTAP.Component.Register('DETAIL_RELATED_RECORD_ACTION', {icon:'fa fa-plus',label:'Send email',clickHandler: () => {}}, '', FILTER);
DETAIL_MORE_ACTION_ACTIVITY_ITEMAdd custom action under the detail page with more actions, inside “Reach out now” section.VTAP.Component.Register('DETAIL_MORE_ACTION_ACTIVITY_ITEM', {icon:'fa fa-plus',label:'Send email',clickHandler: () => {}}, '', FILTER);
DETAIL_SUMMARY_WIDGETAdd custom widget in detail page summary view.VTAP.Component.Register('DETAIL_SUMMARY_WIDGET', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);

Event Types

List of UI Events triggered from core / custom components on different pages.

TypeDescriptionExample
DETAIL_PREVIEW_SHOWNWhen record detail preview popup is shown.VTAP.Event.Register('DETAIL_PREVIEW_SHOWN', (data) => { });
DETAIL_PREVIEW_HIDDENWhen record detail preview popup is hidden.VTAP.Event.Register('DETAIL_PREVIEW_HIDDEN', (data) => { });
DETAIL_ALLFIELDS_SHOWNWhen record detail page all field popup is shown. See here.VTAP.Event.Register('DETAIL_ALLFIELDS_SHOWN', (data) => { });
DETAIL_ALLFIELDS_HIDDENWhen record detail page all fields popup is hidden.VTAP.Event.Register('DETAIL_ALLFIELDS_HIDDEN', (data) => { });
EDIT_MODAL_SHOWNWhen record edit page is shown.VTAP.Event.Register('EDIT_MODAL_SHOWN', (data) => { });
EDIT_MODAL_HIDDENWhen record edit page is hidden.VTAP.Event.Register('EDIT_MODAL_HIDDEN', (data) => { });
CREATE_MODAL_SHOWNWhen record create page is shown.VTAP.Event.Register('CREATE_MODAL_SHOWN', (data) => { });
RECORD_CREATEDWhen record is created from any where inside the crm.VTAP.Event.Register('RECORD_CREATED', (module, record) => { });
RECORD_UPDATEDWhen record is updated from any where inside the crm.VTAP.Event.Register('RECORD_UPDATED', (module, record) => { });
RECORD_SAVEDWhen you want to listen to both record created/updated from any where inside the crm.VTAP.Event.Register('RECORD_SAVED', (module, record) => { });
RECORD_DELETEDThis event is triggered after record is deleted. This is triggered from detail page.VTAP.Event.Register('RECORD_DELETED', (module, id) => { });
MASS_RECORD_DELETEDThis event is triggered after multiple records are deleted from list page.VTAP.Event.Register('MASS_RECORD_DELETED', (module, ids) => { });
ONE_VIEW_RELOADYou can refresh one view related lists by triggering this event. This should be done after you add/update record from one view section.VTAP.Event.Trigger('ONE_VIEW_RELOAD');
EVENT_SHOW_INVITEESTriggers the display of the Invitees block.VTAP.Event.Trigger('EVENT_SHOW_INVITEES');
EVENT_HIDE_INVITEESHides the Invitees block.VTAP.Event.Trigger('EVENT_HIDE_INVITEES');

In-App API's

records

GET
VTAP.Api.Get(uri, parameters, callback) fetches all the records for the specified module.

uristringrecords
parametersobject{"module": "moduleName"}
callbackfunction(error, success)handler function gets response from server

Parameters

NameTypeDescription
module (mandatory)Stringname of the module
idIntegerid of the record
filteridIntegerid of the filter, if filterid and id is not provided then default user filter is taken and filter records will be returned
pageIntegerpage number when filterid is used
pagelimitIntegernumber of records in the filter to be returned
sortfieldStringname of the field
sortorderString"ASC" for Ascending or "DESC" for Descending
fieldsStringfield names separated by commas

Example : To fetch all the records of the Tasks Module

VTAP.Api.Get("records", { 
    "module": "Tasks" // module Name 
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

Example : To fetch the most recently updated records

VTAP.Api.Get("records", {
     "module": "Quotes",
     "pagelimit":"5",
     "sortfield":"modifiedtime",
     "sortorder":"DESC"
    }, (error, response) => {
      console.log(response)
});

POST
VTAP.Api.Post(uri, parameters, callback) helps create records.

uristringrecords
parametersobject{"module": "moduleName", "fieldname": "value"}
callbackfunction(error, success)handler function gets response from server

NOTE: Values for the mandatory fields of the record has to be provided

Example : To create a record for the Conatcts Module

VTAP.Api.Post("records", { 
    "module": "Contacts",
    "lastname": "xxx", // mandatory field
    "firstname": "yyy",
    "email": "test@gmail.com",
    "phone": "",
    "contacttype": "Lead" // mandatory field
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

PUT
VTAP.Api.Put(uri, parameters, callback) helps update an existing record.

uristringrecords
parametersobject{"id": "", "module": "moduleName", "fieldname": "value"}
callbackfunction(error, success)handler function gets response from server

Example:

VTAP.Api.Put("records", { 
    "id": "", // recordID you want to update
    "module": "Contacts", // module Name
    "firstname": "www", // add the fields with their values that you want to update
    "mobile": ""
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

DELETE
VTAP.Api.Delete(ur, parameters, callback) helps delete the specfied record.

uristringrecords
parametersobject{"id": "", "module": "moduleName"}
callbackfunction(error, success)handler function gets response from server

Example:

VTAP.Api.Delete("records", { 
    "id": "964",
    "module": "Contacts"
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

Line Items Create, Update and Delete

To manage line items in VTAP API for updating records, you must follow a specific format when adding or deleting items. Here's how you can handle adding and deleting line items for a Quote record in VTAP API.

Creating Line Items for a new Quotes Record

  • Construct the payload: Include all the mandatory fields required for Quotes, and new line items in the payload.
  • Pass totalProductCount: The payload should include the totalProductCount parameter to indicate the number of line items.
let newRecord = {
    module: 'Quotes',
    subject: 'New Quote with Multiple Items',  
    quotestage: 'New',  
    bill_street: 'Banglore',
    ship_street: 'Banglore',
    // First line item
    hdnProductId1: '<product_record_id>',
    productName1: '<product_name>',
    comment1: '', 
    qty1: 2,  
    listPrice1: 400,   
    // Second line item 
    hdnProductId2: '<product_record_id>',
    productName2: '<product_name>',
    comment2: '', 
    qty2: 2,  
    listPrice2: 400, 
    totalProductCount: 2
}

Send Request Using VTAP Api

VTAP.Api.Post('records', newRecord, (error, response) => {
    if (error) {
        console.error("Error creating record with line items:", error);
    } else {
        console.log("Record created with line items successfully:", response);
    }
});

Updating Line Items

  • Fetch existing line items: First, retrieve all existing line items for the Quote record.
  • Construct the payload: Include all existing line items in the payload, appending the new line item details sequentially.
  • Pass totalProductCount: The payload should include the totalProductCount parameter to indicate the number of line items.

Assume you already have the existing line item details

let existingLineItems = {
    hdnProductId1:’<product_record_id>’,
    productName1: '<product_name>',
    comment1: '',
    qty1: 1,
    listPrice1: 700.00
};

Add a new line item to the existing Quote record

let newLineItem = {
    hdnProductId2: ‘<product_record_id>’,
    productName2: '<product_name>',
    comment2: '',
    qty2: 5,
    listPrice2: 500.00
};

Combine existing and new line items

let params = {
    module: 'Quotes',
    id: quoteId, // replace with the actual Quote ID
    // add existingLineItems,
    // add newLineItem,
    totalProductCount: 2 // Update this count as per the total number of line items
};

Send the request using VTAP API

VTAP.Api.Put('records', params, (error, response) => {
    if (error) {
        console.error("Error adding line item:", error);
    } else {
        console.log("Line item added successfully:", response);
    }
});

Update Line Items With Taxes, Charges and TaxRegions

Taxes
To update Taxes you can follow these steps :

  • Use decribe core api to fetch the specific inventory module describe details.
  • In the API response, you can locate all taxes-related information under the "taxes" key.

There are two Tax Modes that can be applied while adding line items : Group and Individual

  • For Group Tax Mode

Construct the payload

let updateRecord = {
    module: 'Quotes',
    id: '', // record ID 

    // Update line item 
    hdnProductId1: '<product_id>',
    productName1: '<product_name>',
    qty1: 1,
    listPrice1: 500,

    // additional item details 
    region_id: '1', // tax_region Id 
    taxtype: 'group', // tax-mode 
    currency_id: '1', // currency 

    // group-tax-mode values 
    tax4_group_percentage: 6, // the number 4 refers to that particular Taxes Id
    tax4_group_amount: 30,  
    tax5_group_percentage: 7, 
    tax5_group_amount: 40,
    tax6_group_percentage: 6,
    tax6_group_amount: 30,

    // total line items that are present 
    totalProductCount: 2
}

Update the record

VTAP.Api.Put('records', updateRecord, (error, response) => {
    if (error) {
        console.error("Error creating record with line items:", error);
    } else {
        console.log("Record updated with line items successfully:", response);
    }
});
  • For Individual Tax Mode

Construct the payload

let updateRecord = {
    module: 'Quotes',
    id: '', // record ID

    // addtional item details
    region_id: '1', // tax_region Id
    taxtype: 'individual', // tax-mode 
    currency_id: '1', // currency


    // Existing line item
    hdnProductId1: '<product_id>',
    productName1: '<product_name>',
    qty1: 1,
    listPrice1: 500,
    // individual tax for product 1 
    tax4_percentage1: 6, // the number 4 refers to that particular Taxes Id

    // New line item 
    hdnProductId2: '616',
    productName2: 'Sugar BodyLotion',
    qty2: 1,
    listPrice2: 300,
    // individual tax for product 2
    tax4_percentage2: 6,  

    // total line items that are present 
    totalProductCount: 2
}

Update the record

VTAP.Api.Put('records', updateRecord, (error, response) => {
    if (error) {
        console.error("Error creating record with line items:", error);
    } else {
        console.log("Record updated with line items successfully:", response);
    }
});

Charges
To update Charges you can follow these steps :

  • Use decribe core api to fetch the specific inventory module describe details.
  • In the API response, you can locate all charges-related information under the "chargesAndItsTaxes" key.

Construct the payload

let updateRecord = {
    module: 'Quotes',
    id: '', // record Id
    region_id: '1',
    taxtype: 'individual',
    // update Existing line item
    hdnProductId1: '601',
    productName1: 'Percy Jackson and The Lightening Thief Book',
    qty1: 1,
    listPrice1: 400,
    // Update with Charges Values
    "charges[4][name]": "Shipping & Handling",
    "charges[4][format]": "Flat",
    "charges[4][taxes][5]": 6, // Taxes On Charges : charges[charge_id][taxes][tax_id]
    "charges[4][deleted]": 0,
    "charges[4][type]": "Fixed",
    "charges[4][chargesByRegion][default]": 10.0,
    "charges[4][calculation]": "Simple", 
    "charges[4][value]": 9.00,  // Charge : charges[charge_id][value]
    totalProductCount: 1
}

Upadate the record

VTAP.Api.Put('records', updateRecord, (error, response) => {
    if (error) {
        console.error("Error creating record with line items:", error);
    } else {
        console.log("Record updated with line items successfully:", response);
    }
});

TaxRegions
To update TaxRegions you can follow these steps :

  • Use decribe core api to fetch the specific inventory module describe details.
  • In the API response, you can locate all taxregions-related information under the "tax_regions" key.

Construct the payload

let newRecord = {
    module: 'Quotes',
    id: '', // record Id
    region_id: '13', // tax_region Id
    taxtype: 'individual',
    // update Existing line item
    hdnProductId1: '601',
    productName1: 'Percy Jackson and The Lightening Thief Book',
    qty1: 1,
    listPrice1: 400,
    totalProductCount: 1
}

Construct the payload

VTAP.Api.Put('records', newRecord, (error, response) => {
    if (error) {
        consolerecords/records/.error("Error creating record with line items:", error);
    } else {
        console.log("Record updated with line items successfully:", response);
    }
});

Deleting Line Items

  • Fetch existing line items: Get all current line items of the record.
  • Remove the line item you wish to delete: Modify the list by excluding the line item you want to delete.
  • Update totalProductCount: Adjust the count to reflect the new number of line items.

Fetch existing line items and filter out the items you want to remove

let lineItems = {
    hdnProductId1:’<product_record_id>’,
    productName1: '<product_name>',
    comment1: '',
    qty1: 1,
    listPrice1: 700.00,
    hdnProductId2: ’<product_record_id>’,
    productName2: '<product_name>',
    comment2: '',
    qty2: 5,
    listPrice2: 500.00
};

Suppose we want to delete the second line item

delete lineItems.hdnProductId2;
delete lineItems.productName2;
delete lineItems.comment2;
delete lineItems.qty2;
delete lineItems.listPrice2;

Updated payload with the remaining line items

let updatedPayload = {
    module: 'Quotes',
    id: quoteId, // replace with the actual Quote ID
    // add lineItems,
    totalProductCount: 1 // Update the count as needed
};

Send the updated request

VTAP.Api.Post('records', updatedPayload, (error, response) => {
    if (error) {
        console.error("Error deleting line item:", error);
    } else {
        console.log("Line item deleted successfully:", response);
    }
});

relations

GET
VTAP.Api.Get(uri, parameters, callback) helps retrieve the relation details of the specified module with other modules.

uristringrelations
parametersobject{"module": "moduleName"}
callbackfunction(error, success)handler function gets response from server

Example:

VTAP.Api.Get("relations", { 
    "module": "" // module Name
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

records/relationrecords

GET
VTAP.Api.Get(uri, parameters, callback) helps fetch all the records which are related to the specified module.

uristringrecords/relationrecords
parametersobject{"module": "moduleName", "id": "", "relationid": ""}
callbackfunction(error, success)handler function gets response from server

Example : To fetch all the related records of the Module specified(relationid) and Contacts

VTAP.Api.Get("records/relationrecords", { 
    "module": "Contacts", // module Name
    "id": "", // Contacts recordID
    "relationid": "" // Contacts - Module relationID 
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

POST
VTAP.Api.Post(uri, parameters, callback) helps link two existing records.

uristringrecords/relationrecords
parametersobject{"module": "moduleName", "id": "", "relation_id": "", "related_module": "", "related_record_id": ""}
callbackfunction(error, success)handler function gets response from server

Example : To link Contacts-Cases records

VTAP.Api.Post("records/relationrecords", { 
    "module": "Contacts",
    "id": "", // Contacts recordID
    "relation_id": "", // Contacts-Cases relationID
    "related_module": "Cases", 
    "related_record_id": "" // Cases recordId
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

DELETE
VTAP.Api.Delete(uri, parameters, callback) helps un-link the linked records between the specified modules.

uristringrecords/relationrecords
parametersobject{"module": "moduleName", "id": "", "relation_id": "", "related_module": "", "related_record_id": ""}
callbackfunction(error, success)handler function gets response from server

Example :

VTAP.Api.Delete("records/relationrecords", { 
    "module": "Contacts",
    "id": "", // Contacts recordID
    "relation_id": "", // Contacts-Cases relationID
    "related_module": "Cases", 
    "related_record_id": "" // Cases recordId
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

records/count

GET
VTAP.Api.Get(uri, parameters, callback) gives a count of the number of records present in that module.

uristringrecords/count
parametersobject{"module": "moduleName"}
callbackfunction(error, success)handler function gets response from server

Example :

VTAP.Api.Get("records/count", { 
    "module": "", // Module Name
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

records/findduplicates

GET
VTAP.Api.Get(uri, parameters, callback) fetches all the records that have same field's values for a particular module.

uristringrecords/findduplicates
parametersobject{"module": "moduleName", "fields": ["",""]}
callbackfunction(error, success)handler function gets response from server

Example : Fetches all records having the same firstname.

VTAP.Api.Get("records/findduplicates", { 
    "module": "Contacts", 
    "fields": ["firstname"]
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

records/globalsearch

GET
VTAP.Api.Get(uri, parameters, callback) helps you find anything from anywhere in Vtiger CRM.

uristringrecords/findduplicates
parametersobject{"module": "moduleName", "value": ""}
callbackfunction(error, success)handler function gets response from server

Example :

VTAP.Api.Get("records/globalsearch", { 
    "module": "", // module Name - mandatory
    "value": "", // search value - mandatory
    "page:" "",
    "pagelimit": "",
    "isDeepSearch": "0", // to enable deepsearch give 1
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

filters

GET
VTAP.Api.Get(uri, parameters, callback) helps retrieve filters for the specified module.

uristringfilters
parametersobject{"module": "moduleName"}
callbackfunction(error, success)handler function gets response from server

Example :

VTAP.Api.Get("filters", { 
    "module": "" // module Name
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

POST
VTAP.Api.Post(uri, parameters, callback) helps create a custom filter.

uristringfilters
parametersobject{"module": "moduleName", "viewname": "", "fields": ["","","","",""]}
callbackfunction(error, success)handler function gets response from server

Example :

VTAP.Api.Post("filters", { 
    "module": "", // module Name
    "viewname": "", // name of the filter
    "fields": ["","","","",""] // an array of selected fields for the filter (min - 5 fields)
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

PUT
VTAP.Api.Put(uri, parameters, callback) helps update the filter.

uristringfilters
parametersobject{"module": "moduleName", "id": "", "fields": ["","","","",""]}
callbackfunction(error, success)handler function gets response from server

Example :

VTAP.Api.Post("filters", { 
    "module": "", // module Name
    "id": "", // filter ID of the filter you want to update
    "fields": ["","","","",""] // an array of updates fields for the filter (min - 5 fields)
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});

describe

GET
VTAP.Api.Get(uri, parameters, callback) helps retrieve the describe information for a specified module.

uristringdescribe
parametersobject{"module": "moduleName"}
callbackfunction(error, success)handler function gets response from server

Example: To retrieve the describe information for Quotes module

VTAP.Api.Post("describe", { 
    "module": "Quotes", 
}, (error, response) => {
    if (error) {
        console.error("Error:", error);
    } 
});