Skip to content

Changes

Page history
rename page name authored by Vikas's avatar Vikas
Hide whitespace changes
Inline Side-by-side
VTAP-Javascript-APIs.md 0 → 100644
View page @ c7c35191
## VTAP Javascript APIs
VTAP global object provides several helper methods to make development of in-app customization of CRM or building applications easier.
[[_TOC_]]
### VTAP.Component
This namespace provides utility functions that enable working with Vtiger Components.
#### VTAP.Component.Core
This the base UI class that should be extended to create any new Component or Page.
Creating Basic Button Component
```
var MyModule_Component_BasicButton = VTAP.Component.Core.extend({ });
```
Creating Settings View
```
var MyModule_Component_SettingsView = VTAP.Component.Core.extend({ });
```
Core Components follow VueJS Component Lifecycle hooks and events ([read](https://vuejs.org/v2/api/#Options-Lifecycle-Hooks)).
```
var MyModule_Component_RegisterButton = 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>`
});
```
#### VTAP.Component.Load
VTAP.Component.Load (name, module)
Loads and returns Vtiger component object
Parameters
<table>
<tr>
<td>name
</td>
<td>String
</td>
<td>component name
</td>
</tr>
<tr>
<td>module
</td>
<td>String
</td>
<td>module name
</td>
</tr>
</table>
Returns
<table>
<tr>
<td>Object
</td>
<td>Vtiger Component object
</td>
</tr>
</table>
#### VTAP.Component.Find
VTAP.Component.Find(name)
returns a Vtiger component object if available.
Parameters
<table>
<tr>
<td>name
</td>
<td>String
</td>
<td>component name
</td>
</tr>
<tr>
<td>return
</td>
<td>String
</td>
<td>module name
</td>
</tr>
</table>
Returns
<table>
<tr>
<td>Object
</td>
<td>Vtiger Component object
</td>
</tr>
</table>
#### VTAP.Component.Register
VTAP.Component.Register(type, data, component, filter)
Add and Return custom component on a Page.
Parameters
<table>
<tr>
<td>type
</td>
<td>String
</td>
<td>type of component to be added, click <a href="#component-types">here</a> for complete list with examples.
</td>
</tr>
<tr>
<td>data
</td>
<td>Object
</td>
<td>Many components only depend on data to show in UI, these are generally key-value pair values. See <a href="#component-types">component types</a> for examples
</td>
</tr>
<tr>
<td>component
</td>
<td>Vtiger component
</td>
<td>Custom component that you want to render in the UI.
</td>
</tr>
<tr>
<td>filter
</td>
<td>object
</td>
<td>Use this when you want to restrict the component to be loaded for a particular module. For example {‘module’:’Contacts’)
</td>
</tr>
</table>
Returns
<table>
<tr>
<td>Object
</td>
<td>Vtiger Component object
</td>
</tr>
</table>
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 List Page UI Hooks exposed [here](https://lh3.googleusercontent.com/-B3cJDOLBtnM/YIcNBdu0CoI/AAAAAAAAIc0/DEbbEhl1AfAVDjuwB9TNJ1CFouytgkZLACK8BGAsYHg/s0/2021-04-26.png)
See Detail Page UI Hooks [here](https://lh3.googleusercontent.com/-xDx5fGN5rGg/YIcN_HQnI0I/AAAAAAAAIc8/OfDvoAtzo-8gDYXl9XWQdgeJ-k8tntp6gCK8BGAsYHg/s0/2021-04-26.png?authuser=0).
### VTAP.View
Get current page view name like list, detail etc.
### VTAP.User
Get logged in user details like first name, last name, email, profile image, isadmin etc.
### VTAP.Utility
Provides utility functions like showing modal, show success/error UI notification etc.
#### VTAP.Utility.ShowSuccessNotification
VTAP.Utility.ShowSuccessNotification(message)
Shows success UI notification - useful to inform success after the action.
<table>
<tr>
<td>message
</td>
<td>String
</td>
<td>The message that needs to be shown in notification. Default values to "Success".
</td>
</tr>
</table>
#### VTAP.Utility.ShowErrorNotification
VTAP.Utility.ShowErrorNotification(message)
Shows the error UI notification - useful to inform users about failed actions.
<table>
<tr>
<td>message
</td>
<td>String
<p>
Default = "Error"
</td>
<td>The message that needs to be shown in notification.
</td>
</tr>
</table>
#### VTAP.Utility.ShowModal
VTAP.Utility.ShowModal({component, componentData, modalOnModalMode})
Shows a popup modal
<table>
<tr>
<td>component
</td>
<td>Vtiger Component
</td>
<td>This is Vtiger Vue component, see here for more details.
</td>
</tr>
<tr>
<td>componentData
</td>
<td>Object
</td>
<td>It will hold parameters that need to be sent to the Vtiger component to be shown in popup.
</td>
</tr>
<tr>
<td>modalOnModalMode
</td>
<td>Boolean
<p>
Default = false
</td>
<td>If there is another popup then do you want to show the modal on top of it or not. Default
</td>
</tr>
</table>
```
VTAP.Utility.ShowModal({
component : VTAP.Component.Load('Relation', 'MYMODULE'),
componentData : {title : 'List of records'},
modalOnModalMode : true
});
var MYMODULE_Component_Relation = VTAP.Component.Core.extend({
template:
`<b-modal id="modal-1" title="Vtiger popup">
<p class="my-4">Add popup contents here</p>
</b-modal>`
});
```
### VTAP.List
Provides helper function to work on List View Page.
#### VTAP.List.Records
VTAP.List.Records() returns current record objects available in the list page.
Returns
<table>
<tr>
<td>void
</td>
<td>It does not have a return value
</td>
</tr>
</table>
#### VTAP.List.NextPageExist
VTAP.List.NextPageExist() - checks if there are records in the next page.
Returns
<table>
<tr>
<td>Boolean
</td>
<td>Returns true if records exists in next page, if not then returns false
</td>
</tr>
</table>
#### VTAP.List.PrevPageExist
VTAP.List.PrevPageExist() : checks if there are records in the previous page.
Returns
<table>
<tr>
<td>Boolean
</td>
<td>Returns true if records exists in previous page else returns false
</td>
</tr>
</table>
#### VTAP.List.NextPage
VTAP.List.NextPage() : moves the current page to the next page.
Returns
<table>
<tr>
<td>void
</td>
<td>It does not have a return value
</td>
</tr>
</table>
#### VTAP.List.PreviousPage
VTAP.List.PreviousPage() : moves the current page to the previous page if it exists.
Returns
<table>
<tr>
<td>void
</td>
<td>It does not have a return value
</td>
</tr>
</table>
#### VTAP.List.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
<table>
<tr>
<td>void
</td>
<td>It does not have a return value
</td>
</tr>
</table>
#### VTAP.List.Search
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
<table>
<tr>
<td>searchobject
</td>
<td>object
</td>
<td>javascript map of fieldname and search string.
</td>
</tr>
</table>
Example : VTAP.List.Search({'firstname':'John', 'lastname':'wick'})
#### VTAP.List.ClearSearch
VTAP.List.ClearSearch() : It will remove all the search values applied for all the fields.
Returns
<table>
<tr>
<td>void
</td>
<td>It does not have a return value
</td>
</tr>
</table>
#### VTAP.List.Sort
VTAP.List.Sort(fieldname, order) : It will sort the list page with the fieldname.
Parameters
<table>
<tr>
<td>fieldname
</td>
<td>String
</td>
<td>Name of the field on which sort has to be applied
</td>
</tr>
<tr>
<td>order
</td>
<td>String
<p>
Default = 'desc'
</td>
<td>'asc' for ascending order, 'desc' for descending order.
</td>
</tr>
</table>
#### VTAP.List.SelectedRecords
VTAP.List.SelectedRecords() : It gives a list of records selected in the list page.
Returns
<table>
<tr>
<td>Promise
</td>
<td>Returns Promise function, use a handler to get the list of records.
<p>
It returns an array of record id's.
</td>
</tr>
</table>
Example :
```
VTAP.List.SelectedRecords().then( (records) => {
console.log(records);
});
```
### VTAP.Detail
Provides helper functions to work with Detail View Page.
#### VTAP.Detail.Id
VTAP.Detail.Id() : If you are in the detail page, then it returns record id.
Returns
<table>
<tr>
<td>integer
</td>
<td>it returns record id
</td>
</tr>
</table>
#### VTAP.Detail.Module
VTAP.Detail.Module() : This function returns the name of the module.
Returns
<table>
<tr>
<td>string
</td>
<td>it returns module name
</td>
</tr>
</table>
#### VTAP.Detail.Record
VTAP.Detail.Record() : It returns a current record object.
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get record object
</td>
</tr>
</table>
```
VTAP.Detail.Record().then( (record) => {
//record is of type Vtiger_Record_Model
})
```
#### VTAP.Detail.Relations
VTAP.Detail.Relations() : This function returns all the relationship meta with the current record(module).
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get relation objects
</td>
</tr>
</table>
```
VTAP.Detail.Relations().then( (relations) => { });
```
#### VTAP.Detail.Relation
VTAP.Detail.Relation(module) : Use this function to get relation meta for a particular module.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>module name of the relation
</td>
</tr>
</table>
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get relation object
</td>
</tr>
</table>
```
VTAP.Detail.Relation('Contacts').then( (relations) => { });
```
#### VTAP.Detail.RelatedRecords
VTAP.Detail.RelatedRecords(module, filterobject) : It returns related records of the current record.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>module name of the relation
</td>
</tr>
<tr>
<td>filterobject
</td>
<td>object
</td>
<td>filterobject lets you set a page, filter conditions etc.
</td>
</tr>
</table>
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get filtered records
</td>
</tr>
</table>
```
VTAP.Detail.RelatedRecords('Contacts', {page : 2, filter : [] }).then(
(records) => {
console.log(records);
});
```
#### VTAP.Detail.RelatedRecordsCount
VTAP.Detail.RelatedRecordsCount(module, filterobject) : It gives you total records available in the relation.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>module name of the relation
</td>
</tr>
<tr>
<td>filterobject
</td>
<td>object
</td>
<td>filterobject lets you set filter conditions etc.
</td>
</tr>
</table>
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get filtered records
</td>
</tr>
</table>
```
VTAP.Detail.RelatedRecordsCount('Contacts', {filter : [ ] }).then( (count) => { });
```
### 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
<table>
<tr>
<td>String
</td>
<td>name of the module
</td>
</tr>
</table>
#### VTAP.Modules.CurrentModuleModel
VTAP.Modules.CurrentModuleModel() : It returns current module meta information.
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get module object
</td>
</tr>
</table>
```
VTAP.Modules.CurrentModuleModel().then( (moduleObject) => { });
```
#### VTAP.Modules.GetModule
VTAP.Modules.GetModule(modulename) : It returns module meta information for passed modulename.
<table>
<tr>
<td>modulename
</td>
<td>String
</td>
<td>name of the module
</td>
</tr>
</table>
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get module object
</td>
</tr>
</table>
```
VTAP.Modules.GetModule('Contacts').then( (moduleObject) => { })
```
#### VTAP.Modules.GetAll
VTAP.Modules.GetAll() : It returns list of accessible modules
Returns
<table>
<tr>
<td>Promise
</td>
<td>It returns Promise function, use handler to get module list
</td>
</tr>
</table>
```
VTAP.Modules.GetAll().then( (moduleList) => { });
```
### VTAP.Api
Provides helper functions to interact with core product APIs. For more details on see [here](Core-server-resources)
#### VTAP.Api.Get
VTAP.Api.Get(uri, parameters, callback) : Performs get request on the uri and returns the response to the callback handler.
<table>
<tr>
<td>uri
</td>
<td>String
</td>
<td>unique server resources, see here for the [list](Core-server-resources)
</td>
</tr>
<tr>
<td>parameters
</td>
<td>Object
</td>
<td>parameters required for the uri, it is to be given in key-value format
</td>
</tr>
<tr>
<td>callback
</td>
<td>function(error, success)
</td>
<td>handler function gets response from server
</td>
</tr>
</table>
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.
<table>
<tr>
<td>uri
</td>
<td>String
</td>
<td>unique server resources, see here for the [list](Core-server-resources)
</td>
</tr>
<tr>
<td>parameters
</td>
<td>Object
</td>
<td>parameters required for the uri, it is to be given in key-value format
</td>
</tr>
<tr>
<td>callback
</td>
<td>function(error, success)
</td>
<td>handler function gets response from server
</td>
</tr>
</table>
Example : To add a Contact record
```
VTAP.Api.Post('records', {module : 'Contacts', firstname : 'John', 'lastname' : 'Wick', 'email' : '[email protected]'}, (error, response) => {
//response will have record data
});
```
#### VTAP.Api.Put
VTAP.Api.Put(uri, parameters, callback) : It updates an existing resource on the server.
<table>
<tr>
<td>uri
</td>
<td>String
</td>
<td>unique server resources, see here for the list [list](Core-server-resources)
</td>
</tr>
<tr>
<td>parameters
</td>
<td>Object
</td>
<td>parameters required for the uri, it is to be given in key-value format
</td>
</tr>
<tr>
<td>callback
</td>
<td>function(error, success)
</td>
<td>handler function gets response from server
</td>
</tr>
</table>
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' : '[email protected]'}, (error, response) => {
//response will have record data
});
```
#### VTAP.Api.delete
VTAP.Api.delete(uri, parameters, callback) : This function deletes a resource on the server.
<table>
<tr>
<td>uri
</td>
<td>String
</td>
<td>unique server resources, see here for the [list](Core-server-resources)
</td>
</tr>
<tr>
<td>parameters
</td>
<td>Object
</td>
<td>parameters required for the uri, it is to be given in key-value format
</td>
</tr>
<tr>
<td>callback
</td>
<td>function(error, success)
</td>
<td>handler function gets response from server
</td>
</tr>
</table>
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.
<table>
<tr>
<td>uri
</td>
<td>String
</td>
<td>unique server resources created from API Designer
</td>
</tr>
<tr>
<td>parameters
</td>
<td>Object
</td>
<td>parameters required for the uri, it is to be given in key-value format
</td>
</tr>
<tr>
<td>callback
</td>
<td>function(error, success)
</td>
<td>handler function gets response from server
</td>
</tr>
</table>
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.
<table>
<tr>
<td>eventname
</td>
<td>String
</td>
<td>name of the event, list of supported events are <a href="#event-types">here</a>
</td>
</tr>
<tr>
<td>handlerName
</td>
<td>function
</td>
<td>handler function
</td>
</tr>
</table>
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.
<table>
<tr>
<td>eventname
</td>
<td>String
</td>
<td>name of the event, list of supported events are <a href="#event-types">here</a>
</td>
</tr>
<tr>
<td>data
</td>
<td>Object
</td>
<td>key value pair of data that you want to send to the listening handler.
</td>
</tr>
</table>
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.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>name of the module
</td>
</tr>
<tr>
<td>data
</td>
<td>Object
</td>
<td>key value pair of data that you want to send to the listening handler.
</td>
</tr>
</table>
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.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>name of the module
</td>
</tr>
<tr>
<td>callback
</td>
<td>function
</td>
<td>user handler function
</td>
</tr>
</table>
Example: To listen to notification triggers.
```
VTAP.Notification,Listen('Contacts', (data) => {
//data has the custom info send from Notification.Trigger api
});
```
### VTAP.AppData
Provides helper functions to work with custom data shared across target modules or applications.
#### VTAP.AppData.Save
VTAP.AppData.Save(module, data, callback) : It saves the data for the module.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>name of the module
</td>
</tr>
<tr>
<td>data
</td>
<td>object
</td>
<td>data_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})
</td>
</tr>
<tr>
<td>callback
</td>
<td>function
</td>
<td>user handler function
</td>
</tr>
</table>
Example:
```
VTAP.AppData.Save("my_extension_name", {"data_key" : "username", "data_value" : "[email protected]"}, (error, success) => {
});
```
#### VTAP.AppData.Get
VTAP.AppData.Get(module, data, callback) : This is used to fetch the app data that is stored using VTAP.AppData.Save api.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>name of the module
</td>
</tr>
<tr>
<td>data
</td>
<td>object
</td>
<td>data_key is used to retrieve the key. Ex : ({"data_key":"secret"})
</td>
</tr>
<tr>
<td>callback
</td>
<td>function
</td>
<td>user handler function
</td>
</tr>
</table>
Example :
```
VTAP.AppData.Get("my_extension_name", {"data_key":"username"},
(error, success) => {
});
```
#### VTAP.AppData.Delete
VTAP.AppData.Delete(module, data, callback) : It will delete the data which was saved using Save api. You need to pass data_key to identify the data to be deleted.
<table>
<tr>
<td>module
</td>
<td>String
</td>
<td>name of the module
</td>
</tr>
<tr>
<td>data
</td>
<td>object
</td>
<td>data_key is used to retrieve the key. Ex : ({"data_key":"secret"})
</td>
</tr>
<tr>
<td>callback
</td>
<td>function
</td>
<td>user handler function
</td>
</tr>
</table>
```
VTAP.AppData.Delete("my_extension_name", {"data_key" : "username"},
(error, success) => {
});
```
### VTAP.PrefsData
Similar to VTAP.AppData this namespace provides helper functions for the module or application to persist preference information of each User.
NOTE: There can only be one data_key for (module or application) and user.
### VTAP.UserData
Similar to VTAP.AppData this namespace provides helper functions for the module or application to persist user specific records in the data store.
NOTE: There can be one or more data_key for (module or application) and user. Each record would have its ID auto generated on first save.
#### VTAP.UserData.Save
VTAP.UserData.Save(module, data, callback) : It is used to save user data.
Example:
```
VTAP.UserData.Save("extension_name", {"data_key" : "conversation", "data_value" : "Hello"},
(error, success) => {
//success returns "id" index which can be used to perform Get and //Delete operation for the "data_key"
});
```
If you want to share the data with any particular users then pass sharedusers, sharedusers will be able to access the same data with data_key.
```
VTAP.UserData.Save("extension_name", {"data_key" : "Task", "data_value" : {name : 'Review Home Page'}, "sharedusers" : [2,3]},
(error, result) => {
});
```
#### VTAP.UserData.Get
VTAP.UserData.Get(module, data, callback : It will fetch the data saved by UserData.Save api. If you pass "id" in data then it will fetch that particular data set, else it will fetch all the data stored with "data_key".
Example:
```
VTAP.UserData.Get("extension_name", {"data_key" : "conversation", "id" : "23"}, (error, success) => {
});
```
#### VTAP.UserData.Delete
VTAP.UserData.Delete(module, data, callback : It will delete the data saved by UserData.Save api.
Example:
```
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.
#### VTAP.Resource.Require
VTAP.Resource.Require(path, type) : This will let you add external resources to use them in your components.
<table>
<tr>
<td>path
</td>
<td>String
</td>
<td>Path to external script
</td>
</tr>
<tr>
<td>type
</td>
<td>String
</td>
<td>Default value is “script”, if you are including style sheets then set type as “style”
</td>
</tr>
</table>
Example :
```
VTAP.Resource.Require('https://unpkg.com/[email protected]/dist/leaflet.js');
```
**Note** : Before using any resource you need to white 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).
#### VTAP.OAuth.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](http://sc.vtiger.net/screenshots/Screenshot-at-vikas-11052021-19-45-18.png), 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.
<table>
<tr>
<td>service
</td>
<td>String
</td>
<td>name of the service
</td>
</tr>
<tr>
<td>module
</td>
<td>String
</td>
<td>name of the module
</td>
</tr>
<tr>
<td>callback
</td>
<td>function
</td>
<td>user handler function
</td>
</tr>
</table>
Example :
```
VTAP.OAuth.Authorize("3PService", "Contacts", (error, success) => {
});
```
#### VTAP.OAuth.IsAuthorized
Checks if a service is already authorized or not.
Example :
```
VTAP.OAuth.IsAuthorized("3PService", "Contacts", (response) => {
if(response.authorized) {
//user has authorized
}
});
```
#### VTAP.OAuth.Revoke
Removes oauth tokens which has earlier obtained using Authorize api.
Example :
```
VTAP.OAuth.Revoke("3PService", "Contacts", (response) => {
});
```
#### VTAP.OAuth.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.
Example :
```
VTAP.OAuth.ShowAuthClientDetailsPopup("3PService", "Contacts");
```
#### VTAP.OAuth.DeleteAuthClientDetails
Revokes a oauth client app details which was earlier saved by admins.
Example :
```
VTAP.OAuth.DeleteAuthClientDetails("3PService", "Contacts").then((success){
//success
}, (error) => {
//failure
});
```
### Component types
<table>
<tr>
<td>Type
</td>
<td>Description
</td>
<td>Example
</td>
</tr>
<tr>
<td>LIST_ADD_VIEWTYPE
</td>
<td>Add custom views like kanban, calendar view in list view.
</td>
<td>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](https://extend.vtiger.com/vtap/documentation/wikis/VTAP-Runtime#vtapcomponentcore)
</td>
</tr>
<tr>
<td>LIST_ADVANCED_SETTING
</td>
<td>In 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.
</td>
<td>VTAP.Component.Register('LIST_ADVANCED_SETTING', {name : 'Workflows', clickHandler : () => {} });
</td>
</tr>
<tr>
<td>LIST_BASIC_BUTTON
</td>
<td>Add a custom button in the list page next to the Add Record button.
</td>
<td>VTAP.Component.Register('LIST_BASIC_BUTTON', {}, VTAP.Component.Load("COMPONENT_NAME","MODULENAME"), {module:'Contacts'});
</td>
</tr>
<tr>
<td>LIST_ROW_BASIC_ACTION
</td>
<td>Every list row has actions on the right side, your component can add any element but recommended is an icon.
</td>
<td>VTAP.Component.Register('LIST_ROW_BASIC_ACTION', {}, VTAP.Component.Load("COMPONENT_NAME","MODULE"), {module:'Contacts'});
</td>
</tr>
<tr>
<td>LIST_ROW_SECONDARY_ACTION
</td>
<td>This will add a component to the left side of every row in the list page.
</td>
<td>VTAP.Component.Register('LIST_ROW_SECONDARY_ACTION', {}, VTAP.Component.Load("COMPONENT_NAME","Module"), {module:'Contacts'}); \
\
Adds
</td>
</tr>
<tr>
<td>LIST_MASS_ACTION
</td>
<td>It will add an icon in the list view mass actions.
</td>
<td>VTAP.Component.Register('LIST_MASS_ACTION', {icon:'fa-pencil',name:'Edit',clickHandler:()=>{},showHandler:()=>{}}, false, {module:'Contacts'});
</td>
</tr>
<tr>
<td>GLOBAL_ACTION
</td>
<td>It 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.
</td>
<td>VTAP.Component.Register('GLOBAL_ACTION', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_ONEVIEW_WIDGET
</td>
<td>It will let you add widget in One view related tab of the detail page
</td>
<td>VTAP.Component.Register('DETAIL_ONEVIEW_WIDGET', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_MORE_ACTION_ITEM
</td>
<td>Add custom actions from 3 dots on the top right side of the detail page.
</td>
<td>VTAP.Component.Register('DETAIL_MORE_ACTION_ITEM', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_BASIC_BUTTON
</td>
<td>Add a button in detail view header where other actions are available.
</td>
<td>VTAP.Component.Register('DETAIL_BASIC_BUTTON', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_ACTION_ICON
</td>
<td>Add an actionable icon in more actions(3 dots) in the detail page.
</td>
<td>VTAP.Component.Register('DETAIL_ACTION_ICON', {name:'',icon:'',showHandler:'',clickHandler:''}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_HEADER_WIDGET
</td>
<td>Add component in the detail page header.
</td>
<td>VTAP.Component.Register('DETAIL_HEADER_WIDGET', {}, VTAP.Component.Load("COMPONENT_NAME","MODULENAME"), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_RELATED_RECORD_ACTION
</td>
<td>Add a custom action for records appearing in the related list.
</td>
<td>VTAP.Component.Register('DETAIL_RELATED_RECORD_ACTION', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_MORE_ACTION_ACTIVITY_ITEM
</td>
<td>Add custom action under the detail page with more actions, inside “Reach out now” section.
</td>
<td>VTAP.Component.Register('DETAIL_MORE_ACTION_ACTIVITY_ITEM', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
<tr>
<td>DETAIL_SUMMARY_WIDGET
</td>
<td>Add custom widget in detail page summary view.
</td>
<td>VTAP.Component.Register('DETAIL_SUMMARY_WIDGET', {}, VTAP.Component.Load('NAME','MODULE'), FILTER);
</td>
</tr>
</table>
### Event Types
List of UI Events triggered from core / custom components on different pages.
<table>
<tr>
<td>Type
</td>
<td>Description
</td>
<td>Example
</td>
</tr>
<tr>
<td>DETAIL_PREVIEW_SHOWN
</td>
<td>When record detail preview popup is shown.
</td>
<td>VTAP.Event.Register('DETAIL_PREVIEW_SHOWN', (data) => { });
</td>
</tr>
<tr>
<td>DETAIL_PREVIEW_HIDDEN
</td>
<td>When record detail preview popup is hidden.
</td>
<td>VTAP.Event.Register('DETAIL_PREVIEW_HIDDEN', (data) => { });
</td>
</tr>
<tr>
<td>DETAIL_ALLFIELDS_SHOWN
</td>
<td>When record detail page all field popup is shown. See <a href="http://sc.vtiger.net/screenshots/Screenshot-at-vikas-27042021-13-36-50.png">here</a>.
</td>
<td>VTAP.Event.Register('DETAIL_ALLFIELDS_SHOWN', (data) => { });
</td>
</tr>
<tr>
<td>DETAIL_ALLFIELDS_HIDDEN
</td>
<td>When record detail page all fields popup is hidden.
</td>
<td>VTAP.Event.Register('DETAIL_ALLFIELDS_HIDDEN', (data) => { });
</td>
</tr>
<tr>
<td>EDIT_MODAL_SHOWN
</td>
<td>When record edit page is shown.
</td>
<td>VTAP.Event.Register('EDIT_MODAL_SHOWN', (data) => { });
</td>
</tr>
<tr>
<td>EDIT_MODAL_HIDDEN
</td>
<td>When record edit page is hidden.
</td>
<td>VTAP.Event.Register('EDIT_MODAL_HIDDEN', (data) => { });
</td>
</tr>
<tr>
<td>CREATE_MODAL_SHOWN
</td>
<td>When record create page is shown.
</td>
<td>VTAP.Event.Register('CREATE_MODAL_SHOWN', (data) => { });
</td>
</tr>
<tr>
<td>RECORD_CREATED
</td>
<td>When record is created from any where inside the crm.
</td>
<td>VTAP.Event.Register('RECORD_CREATED', (module, record) => { });
</td>
</tr>
<tr>
<td>RECORD_UPDATED
</td>
<td>When record is updated from any where inside the crm.
</td>
<td>VTAP.Event.Register('RECORD_UPDATED', (module, record) => { });
</td>
</tr>
<tr>
<td>RECORD_SAVED
</td>
<td>When you want to listen to both record created/updated from any where inside the crm.
</td>
<td>VTAP.Event.Register('RECORD_SAVED', (module, record) => { });
</td>
</tr>
</table>