|
|
|
[[_TOC_]]
|
|
|
|
|
|
|
|
# Vtiger Application Platform (VTAP)
|
|
|
|
|
|
|
|
|
| ... | ... | @@ -9,265 +11,2311 @@ VTAP enables developers / administrators to extend UI behaviour of the CRM to ac |
|
|
|
|
|
|
|
Basic knowledge of web development (HTML, CSS, Javascript) and XML is essential for getting started.
|
|
|
|
|
|
|
|
[Platform Tools](#platform-tools)
|
|
|
|
[Module Designer](#module-designer)
|
|
|
|
# Platform Tools {#platform-tools}
|
|
|
|
|
|
|
|
VTAP provides a variety of designer tools for developers to control the customization of CRM on Cloud.
|
|
|
|
|
|
|
|
|
|
|
|
## Module Designer {#module-designer}
|
|
|
|
|
|
|
|
Module Designer allows you to create or extend functionality of a module within CRM.
|
|
|
|
|
|
|
|
|
|
|
|
### Module Types {#module-types}
|
|
|
|
|
|
|
|
Modules can be classified into 3 types.
|
|
|
|
|
|
|
|
|
|
|
|
#### Entity Module {#entity-module}
|
|
|
|
|
|
|
|
Follows standard convention to store, retrieve, filter and establish relationships between other entity module records. Workflows, Reporting, sharing and profile access control is automatically enabled based on the assigned user of record.
|
|
|
|
|
|
|
|
Example: Contacts, Organizations, Deals, Cases etc…
|
|
|
|
|
|
|
|
|
|
|
|
#### Extension Module {#extension-module}
|
|
|
|
|
|
|
|
Modules that bring functionality without necessarily binding to standard record conventions are named as extension modules. Usually they provide in-app specific functionality that works with user accessible entity module records. Access to records is possible through VTAP Runtime.
|
|
|
|
|
|
|
|
Example: Reports, Dashboard etc…
|
|
|
|
|
|
|
|
|
|
|
|
#### Embed Module {#embed-module}
|
|
|
|
|
|
|
|
Allows embedding external applications or web-page inside CRM.
|
|
|
|
|
|
|
|
|
|
|
|
### Customizer {#customizer}
|
|
|
|
|
|
|
|
Module Designer offers IDE through which you can develop custom code for building functionality.
|
|
|
|
|
|
|
|
Through customizer IDE you will be able to create and customize the following
|
|
|
|
|
|
|
|
|
|
|
|
#### Component {#component}
|
|
|
|
|
|
|
|
Comprises of one or more UI elements together providing specific functionality on the page.
|
|
|
|
|
|
|
|
Example: Menu, Oneview Widgets
|
|
|
|
|
|
|
|
_Naming Convention_
|
|
|
|
|
|
|
|
Component names follow core product convention for runtime binding. The format of is as follows:
|
|
|
|
|
|
|
|
MODULENAME_Component_COMPNAME
|
|
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<td>MODULENAME
|
|
|
|
</td>
|
|
|
|
<td colspan="2" >Module where you are defining the component from.
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>COMPNAME
|
|
|
|
</td>
|
|
|
|
<td>Name of the component.
|
|
|
|
</td>
|
|
|
|
<td>Ex: BasicButton
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Page {#page}
|
|
|
|
|
|
|
|
Comprises of one or more Components having custom client-side runtime behaviour.
|
|
|
|
|
|
|
|
|
|
|
|
#### TAP Scripts {#tap-scripts}
|
|
|
|
|
|
|
|
Enables you to extend functionality of standard pages or components by subscribing to the event hooks and reacting to the triggers at runtime.
|
|
|
|
|
|
|
|
|
|
|
|
#### TAP Styles {#tap-styles}
|
|
|
|
|
|
|
|
Enables you to customize the look & feel of client components or pages in the CRM.
|
|
|
|
|
|
|
|
|
|
|
|
## API Designer {#api-designer}
|
|
|
|
|
|
|
|
API Designer provides a workbench for developers to develop HTTP based APIs which can be exposed to the VTAP runtime or the external application for integration easily.
|
|
|
|
|
|
|
|
APIs can be defined using VADL specification. APIs access needs user authorization and follows standard record access configuration made within CRM.
|
|
|
|
|
|
|
|
|
|
|
|
### VADL Specification {#vadl-specification}
|
|
|
|
|
|
|
|
Vtiger Application Definition Language (VADL) is based on XML syntax to enable administrators or developers to be able to define API without needing deep programming skills.
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
<api method="post">
|
|
|
|
<!-- definition goes here -->
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
VADL allows you to
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Define APIs
|
|
|
|
* CURD (Create, Retrieve, Update, Delete) on entity modules.
|
|
|
|
* Invoke HTTP based (REST / SOAP) endpoint through (GET/POST/PUT/DELETE) methods
|
|
|
|
* With Authentication (Basic / Bearer token based)
|
|
|
|
* Accept request parameters and bind as API inputs.
|
|
|
|
* Bind API inputs to VTAP runtime configuration store.
|
|
|
|
|
|
|
|
|
|
|
|
### API Endpoint {#api-endpoint}
|
|
|
|
|
|
|
|
API defined through API Designer can be access through the [restapi](https://help.vtiger.com/article/147111249-Rest-API-Manual) endpoint as follows:
|
|
|
|
|
|
|
|
[https://vtigercrm.instance.url/restapi/v1/apidesigner/api/APINAME](https://vtigercrm.instance.url/restapi/v1/apidesigner/api/APINAME)
|
|
|
|
|
|
|
|
HTTP Basic Authentication (username and accesskey) should be used and HTTP Method is controlled within API definition.
|
|
|
|
|
|
|
|
### API Samples {#api-samples}
|
|
|
|
|
|
|
|
|
|
|
|
#### Select Records {#select-records}
|
|
|
|
|
|
|
|
To select (firstname, lastname) record fields of Module for matching email (=[[email protected]](mailto:[email protected])) the API definition would be:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
<api method="get">
|
|
|
|
<select module="Contacts">
|
|
|
|
<record>
|
|
|
|
<field name="firstname"> </field>
|
|
|
|
<field name="lastname"> </field>
|
|
|
|
</record>
|
|
|
|
<where>
|
|
|
|
<field name="email" value="[email protected]"> </field>
|
|
|
|
</where>
|
|
|
|
</select>
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Select Records With Value Binding {#select-records-with-value-binding}
|
|
|
|
|
|
|
|
To select (firstname, lastname) of Contacts record where email field value matching incoming request parameter email_address
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
<api method="get">
|
|
|
|
<select module="Contacts">
|
|
|
|
<record>
|
|
|
|
<field name="firstname"> </field>
|
|
|
|
<field name="lastname"> </field>
|
|
|
|
</record>
|
|
|
|
<where>
|
|
|
|
<field name="email" value="@email_address"> </field>
|
|
|
|
</where>
|
|
|
|
</select>
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Create Record {#create-record}
|
|
|
|
|
|
|
|
If the intent is to create Contacts module record by accepting (firstname, lastname, email) from the request parameter and respond back with record id then API definition for the same would be as shown below.
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
|
|
|
|
<api method="post">
|
|
|
|
<create module="Contacts">
|
|
|
|
<record>
|
|
|
|
<field name="firstname" value="@firstname"></field>
|
|
|
|
<field name="lastname" value="@lastname"></field>
|
|
|
|
<field name="email" value="@email"></field>
|
|
|
|
</record>
|
|
|
|
<return>
|
|
|
|
<field name="id"></field>
|
|
|
|
</return>
|
|
|
|
</create>
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Create Record WIth Reference Field {#create-record-with-reference-field}
|
|
|
|
|
|
|
|
Reference field rules can have a combination of select and create rules which gives the ability to create reference records if select does not yield any match.
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
<api method="post">
|
|
|
|
<create module="Potentials">
|
|
|
|
<record>
|
|
|
|
<field name="potentialname" value="@name"></field>
|
|
|
|
<field name="amount" value="@amount"></field>
|
|
|
|
<field name="contact_id" module="Contacts">
|
|
|
|
<select>
|
|
|
|
<where>
|
|
|
|
<field name="email" value="@email"></field>
|
|
|
|
</where>
|
|
|
|
</select>
|
|
|
|
<create>
|
|
|
|
<record>
|
|
|
|
<field name="lastname" value="@lastname"></field>
|
|
|
|
<field name="firstname" value="@firstname"></field>
|
|
|
|
<field name="email" value="@email"></field>
|
|
|
|
<field name="contacttype" value="Lead"></field>
|
|
|
|
</record>
|
|
|
|
</create>
|
|
|
|
</field>
|
|
|
|
</record>
|
|
|
|
</create>
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Update Record {#update-record}
|
|
|
|
|
|
|
|
To replace email field value with incoming parameter (new_email) on all Contacts record matching incoming parameter (old_email) and respond back with record ID of changed records.
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
<api method="put">
|
|
|
|
<update module="Contacts">
|
|
|
|
<record>
|
|
|
|
<field name="email" value="@new_email"></field>
|
|
|
|
</record>
|
|
|
|
<return>
|
|
|
|
<field name="id"></field>
|
|
|
|
</return>
|
|
|
|
<where>
|
|
|
|
<field name="email" condition="eq" value="@old_email"></field>
|
|
|
|
</where>
|
|
|
|
</update>
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Upsert
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<api method="post" module="Contacts">
|
|
|
|
<upsert>
|
|
|
|
<where>
|
|
|
|
<field name="id" condition="eq" value="@CRMID"></field>
|
|
|
|
</where>
|
|
|
|
<update>
|
|
|
|
<record>
|
|
|
|
<field name="email" value="@email" presence="optional" ></field>
|
|
|
|
|
|
|
|
</record>
|
|
|
|
</update>
|
|
|
|
<create>
|
|
|
|
<record>
|
|
|
|
<field name="firstname" value="@firstname" presence="optional" ></field>
|
|
|
|
<field name="lastname" value="@lastname" presence="optional" ></field>
|
|
|
|
<field name="email" value="@email" presence="optional" ></field>
|
|
|
|
</record>
|
|
|
|
</create>
|
|
|
|
<return>
|
|
|
|
<field name="id"></field>
|
|
|
|
</return>
|
|
|
|
</upsert>
|
|
|
|
</api">
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Invoke HTTP Rest API {#invoke-http-rest-api}
|
|
|
|
|
|
|
|
Using bearer token invoke Google Sheet API
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
<api method="get">
|
|
|
|
<rest>
|
|
|
|
<url>https://sheets.googleapis.com/v4/spreadsheets/sheetID</url>
|
|
|
|
<auth>
|
|
|
|
<bearer token="@token" />
|
|
|
|
</auth>
|
|
|
|
</rest>
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### REST URL Builder {#rest-url-builder}
|
|
|
|
|
|
|
|
Rest API URL can be composed with dynamic value binding by passing arguments in the url node.
|
|
|
|
|
|
|
|
To construct URL of the form
|
|
|
|
|
|
|
|
[https://sheets.googleapis.com/v4/spreadsheets/${sheet_id}/values/Sheet1!A1:append?valueInputOption=RAW](https://sheets.googleapis.com/v4/spreadsheets/${sheet_id}/values/Sheet1!A1:append?valueInputOption=RAW)
|
|
|
|
|
|
|
|
Where ${sheet_id} needs dynamic binding from the request parameter followed by the static part.
|
|
|
|
|
|
|
|
You can achieve by following url rules.
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<url
|
|
|
|
SHEETID="@sheetid" OPTIONS="values/Sheet1!A1:append?valueInputOption=RAW">
|
|
|
|
https://sheets.googleapis.com/v4/spreadsheets/$SHEETID/$OPTIONS</url>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### OAuth Support {#oauth-support}
|
|
|
|
|
|
|
|
VTAP server end handles the OAuth2 flow and lets you focus on getting the user authentication for access data of the desired application.
|
|
|
|
|
|
|
|
To make API requests with such OAuth2 credentials you need to cite (type, service and module) on the oauth rule definition.
|
|
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<td>type
|
|
|
|
</td>
|
|
|
|
<td>vtap
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>service
|
|
|
|
</td>
|
|
|
|
<td>Target service to connect via OAuth2
|
|
|
|
</td>
|
|
|
|
<td>Google, Facebook etc..
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>module
|
|
|
|
</td>
|
|
|
|
<td>CRM Module which owns the OAuth2 grant
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
<?xml version="1.0" ?>
|
|
|
|
<api method="post">
|
|
|
|
<rest method="post">
|
|
|
|
<url SHEETID="@sheetid" OPTIONS="values/Sheet1!A1:append?valueInputOption=RAW">https://sheets.googleapis.com/v4/spreadsheets/$SHEETID/$OPTIONS</url>
|
|
|
|
<auth>
|
|
|
|
<oauth type="vtap" service="Google" module="CUSTOM_MODULE"> </oauth>
|
|
|
|
</auth>
|
|
|
|
<parameters raw-post-data="true">
|
|
|
|
<parameter name='values' value='@row_data' presence="optional"></parameter>
|
|
|
|
</parameters>
|
|
|
|
</rest>
|
|
|
|
</api>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Special Value Binding {#special-value-binding}
|
|
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<td>$login.{$user_field_name}
|
|
|
|
</td>
|
|
|
|
<td>Logged in user object field value
|
|
|
|
<p>
|
|
|
|
$user_field_name can be:
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
<li>user_name
|
|
|
|
|
|
|
|
<li>email1
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>$vtapoauth.{$SERVICE}{$EXT_MODULE_NAME}
|
|
|
|
</td>
|
|
|
|
<td>To bind bearer token VTAP has been acquired for the SERVICE and MODULE_NAME already.
|
|
|
|
<p>
|
|
|
|
Example: $vtapoauth.Google.vtcmsheetview
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>$apps.$user.{$key}
|
|
|
|
</td>
|
|
|
|
<td>data stored in vtap user data store
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>$apps.$app.{$key}
|
|
|
|
</td>
|
|
|
|
<td>data stored in vtap app store
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>$apps.$prefs.{$key}
|
|
|
|
</td>
|
|
|
|
<td>data stored in vtap preferences store
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
# VTAP Client Framework {#vtap-client-framework}
|
|
|
|
|
|
|
|
Vtiger Cloud (V9) client framework is based on [VueJS](https://vuejs.org/v2/guide/) and [Bootstrap](https://getbootstrap.com/docs/3.3/). VTAP Runtime provides helper APIs to align towards the same convention to make the UI and Data API access seamless.
|
|
|
|
|
|
|
|
|
|
|
|
## VTAP Runtime {#vtap-runtime}
|
|
|
|
|
|
|
|
VTAP global object provides several helper methods to make development of in-app customization of CRM or building applications easier.
|
|
|
|
|
|
|
|
|
|
|
|
### VTAP.Component {#vtap-component}
|
|
|
|
|
|
|
|
This namespace provides utility functions that enable working with Vtiger Components.
|
|
|
|
|
|
|
|
|
|
|
|
#### VTAP.Component.Core {#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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
List Page UI Hooks ([external](https://lh3.googleusercontent.com/-B3cJDOLBtnM/YIcNBdu0CoI/AAAAAAAAIc0/DEbbEhl1AfAVDjuwB9TNJ1CFouytgkZLACK8BGAsYHg/s0/2021-04-26.png))
|
|
|
|
|
|
|
|
|
|
|
|
####
|
|
|
|
|
|
|
|
<p id="gdcalert1" ><span style="color: red; font-weight: bold">>>>>> gd2md-html alert: inline image link here (to images/image1.png). Store image on your image server and adjust path/filename/extension if necessary. </span><br>(<a href="#">Back to top</a>)(<a href="#gdcalert2">Next alert</a>)<br><span style="color: red; font-weight: bold">>>>>> </span></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Detail Page UI Hooks [(external)](https://lh3.googleusercontent.com/-xDx5fGN5rGg/YIcN_HQnI0I/AAAAAAAAIc8/OfDvoAtzo-8gDYXl9XWQdgeJ-k8tntp6gCK8BGAsYHg/s0/2021-04-26.png?authuser=0).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p id="gdcalert2" ><span style="color: red; font-weight: bold">>>>>> gd2md-html alert: inline image link here (to images/image2.png). Store image on your image server and adjust path/filename/extension if necessary. </span><br>(<a href="#">Back to top</a>)(<a href="#gdcalert3">Next alert</a>)<br><span style="color: red; font-weight: bold">>>>>> </span></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### VTAP.View {#vtap-view}
|
|
|
|
|
|
|
|
Get current page view name like list, detail etc.
|
|
|
|
|
|
|
|
|
|
|
|
### VTAP.User {#vtap-user}
|
|
|
|
|
|
|
|
Get logged in user details like first name, last name, email, profile image, isadmin etc.
|
|
|
|
|
|
|
|
|
|
|
|
### VTAP.Utility {#vtap-utility}
|
|
|
|
|
|
|
|
Provides utility functions like showing modal, show success/error UI notification etc.
|
|
|
|
|
|
|
|
|
|
|
|
#### VTAP.Utility.ShowSuccessNotification {#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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### VTAP.List {#vtap-list}
|
|
|
|
|
|
|
|
Provides helper function to work on List View Page.
|
|
|
|
|
|
|
|
|
|
|
|
#### VTAP.List.Records {#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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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 {#vtap-detail}
|
|
|
|
|
|
|
|
Provides helper functions to work with Detail View Page.
|
|
|
|
|
|
|
|
|
|
|
|
#### VTAP.Detail.Id {#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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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 {#vtap-modules}
|
|
|
|
|
|
|
|
Provides helper function to get access to module meta information on any page.
|
|
|
|
|
|
|
|
|
|
|
|
#### VTAP.Modules.CurrentModuleName {#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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
|
|
|
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 {#vtap-api}
|
|
|
|
|
|
|
|
Provides helper functions to interact with core product APIs.
|
|
|
|
|
|
|
|
|
|
|
|
#### VTAP.Api.Get {#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 (TDB)
|
|
|
|
</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}
|
|
|
|
|
|
|
|
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 (TDB)
|
|
|
|
</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}
|
|
|
|
|
|
|
|
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 (TDB)
|
|
|
|
</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}
|
|
|
|
|
|
|
|
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 (TDB)
|
|
|
|
</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 {#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.
|
|
|
|
|
|
|
|
[Module Types](#module-types)
|
|
|
|
|
|
|
|
#### VTAP.CustomApi.Get
|
|
|
|
|
|
|
|
[Entity Module](#entity-module)
|
|
|
|
VTAP.CustomApi.Get(uri, parameters, callback) : Performs get request on the uri and returns the response to the callback handler.
|
|
|
|
|
|
|
|
|
|
|
|
[Extension Module](#extension-module)
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
[Embed Module](#embed-module)
|
|
|
|
Example: To retrieve weather of a Mailing City of a Contact (get_weather added from Api Designer)
|
|
|
|
|
|
|
|
|
|
|
|
[Customizer](#customizer)
|
|
|
|
```
|
|
|
|
VTAP.Detail.Record().then( (record) => {
|
|
|
|
VTAP.Api.Get('get_weather', {'city' : record.mailingcity},
|
|
|
|
(error, response) => {
|
|
|
|
//response has record data
|
|
|
|
});
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[Component](#component)
|
|
|
|
|
|
|
|
### VTAP.Event {#vtap-event}
|
|
|
|
|
|
|
|
[Page](#page)
|
|
|
|
Provides helper functions register, unregister and listen on Vtiger UI Events.
|
|
|
|
|
|
|
|
|
|
|
|
[TAP Scripts](#tap-scripts)
|
|
|
|
#### VTAP.Event.Register {#vtap-event-register}
|
|
|
|
|
|
|
|
VTAP.Event.Register(eventname, handlerName) : It allows you to register for vtiger events or custom events.
|
|
|
|
|
|
|
|
[TAP Styles](#tap-styles)
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
[API Designer](#api-designer)
|
|
|
|
|
|
|
|
Example: To listen for detail preview popup to show up.
|
|
|
|
|
|
|
|
[VADL Specification](#vadl-specification)
|
|
|
|
|
|
|
|
```
|
|
|
|
function handler() { }
|
|
|
|
VTAP.Event.Register('DETAIL_PREVIEW_SHOWN', handler);
|
|
|
|
```
|
|
|
|
|
|
|
|
[API Endpoint](#api-endpoint)
|
|
|
|
|
|
|
|
|
|
|
|
[API Samples](#api-samples)
|
|
|
|
#### 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.
|
|
|
|
|
|
|
|
[Select Records](#select-records)
|
|
|
|
Example :
|
|
|
|
|
|
|
|
|
|
|
|
[Select Records With Value Binding](#select-records-with-value-binding)
|
|
|
|
```
|
|
|
|
function handler() { }
|
|
|
|
|
|
|
|
VTAP.Event.DeRegister('DETAIL_PREVIEW_SHOWN', handler);
|
|
|
|
```
|
|
|
|
|
|
|
|
[Create Record](#create-record)
|
|
|
|
|
|
|
|
|
|
|
|
[Create Record WIth Reference Field](#create-record-with-reference-field)
|
|
|
|
#### VTAP.Event.Trigger {#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.
|
|
|
|
|
|
|
|
[Update Record](#update-record)
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
[Invoke HTTP Rest API](#invoke-http-rest-api)
|
|
|
|
|
|
|
|
Example: To trigger a custom event on a page..
|
|
|
|
|
|
|
|
[REST URL Builder](#rest-url-builder)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.Event,Trigger('MY_CUSTOM_EVENT', ({"id":VTAP.Detail.Id(), "module":VTAP.Detail.Module()});
|
|
|
|
```
|
|
|
|
|
|
|
|
[OAuth Support](#oauth-support)
|
|
|
|
|
|
|
|
|
|
|
|
[Special Value Binding](#special-value-binding)
|
|
|
|
### VTAP.Notification {#vtap-notification}
|
|
|
|
|
|
|
|
[VTAP Client Framework](#vtap-client-framework)
|
|
|
|
Provides helper functions to work with real-time notifications.
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP Runtime](#vtap-runtime)
|
|
|
|
#### VTAP.Notification.Trigger {#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.
|
|
|
|
|
|
|
|
[VTAP.Component](#vtap-component)
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
[VTAP.Component.Core](#vtap-component-core)
|
|
|
|
|
|
|
|
Example: To trigger notification on Contact Detail View for all connected users.
|
|
|
|
|
|
|
|
[VTAP.Component.Load](#vtap-component-load)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.Notification,Trigger('Contacts', ({"id":VTAP.Detail.Id(), "user_name":VTAP.User().user_name, "mode":"accessed"});
|
|
|
|
```
|
|
|
|
|
|
|
|
[VTAP.Component.Find](#vtap-component-find)
|
|
|
|
|
|
|
|
Example: To trigger notification on Contact Detail View for only specific connected users.
|
|
|
|
|
|
|
|
[VTAP.Component.Register](#vtap-component-register)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.Notification,Trigger('Contacts', ({"id":VTAP.Detail.Id(), "user_name":VTAP.User().user_name, "mode":"accessed","users": [1, 6]});
|
|
|
|
```
|
|
|
|
|
|
|
|
[VTAP.View](#vtap-view)
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.User](#vtap-user)
|
|
|
|
#### VTAP.Notification.Listen {#vtap-notification-listen}
|
|
|
|
|
|
|
|
VTAP.Notification.Listen(module, callback): This helps you listen on the event notification sent using VTAP.Notification.Trigger api.
|
|
|
|
|
|
|
|
[VTAP.Utility](#vtap-utility)
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
[VTAP.Utility.ShowSuccessNotification](#vtap-utility-showsuccessnotification)
|
|
|
|
|
|
|
|
Example: To listen to notification triggers.
|
|
|
|
|
|
|
|
[VTAP.Utility.ShowErrorNotification](#vtap-utility-showerrornotification)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.Notification,Listen('Contacts', (data) => {
|
|
|
|
//data has the custom info send from Notification.Trigger api
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
[VTAP.Utility.ShowModal](#vtap-utility-showmodal)
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.List](#vtap-list)
|
|
|
|
### VTAP.AppData {#vtap-appdata}
|
|
|
|
|
|
|
|
Provides helper functions to work with custom data shared across target modules or applications.
|
|
|
|
|
|
|
|
[VTAP.List.Records](#vtap-list-records)
|
|
|
|
|
|
|
|
#### VTAP.AppData.Save {#vtap-appdata-save}
|
|
|
|
|
|
|
|
[VTAP.List.NextPageExist](#vtap-list-nextpageexist)
|
|
|
|
VTAP.AppData.Save(module, data, callback) : It saves the data for the module.
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.List.PrevPageExist](#vtap-list-prevpageexist)
|
|
|
|
<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. Ex : ({"data_key":"secret", "data_value":"wrfs3fr"})
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>callback
|
|
|
|
</td>
|
|
|
|
<td>function
|
|
|
|
</td>
|
|
|
|
<td>user handler function
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.List.NextPage](#vtap-list-nextpage)
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.List.PreviousPage](#vtap-list-previouspage)
|
|
|
|
```
|
|
|
|
VTAP.AppData.Save("my_extension_name", {"data_key" : "username", "data_value" : "[email protected]"}, (error, success) => {
|
|
|
|
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
[VTAP.List.Reload](#vtap-list-reload)
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.List.Search](#vtap-list-search)
|
|
|
|
#### VTAP.AppData.Get {#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.
|
|
|
|
|
|
|
|
[VTAP.List.ClearSearch](#vtap-list-clearsearch)
|
|
|
|
|
|
|
|
<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.List.Sort](#vtap-list-sort)
|
|
|
|
|
|
|
|
Example :
|
|
|
|
|
|
|
|
[VTAP.List.SelectedRecords](#vtap-list-selectedrecords)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.AppData.Get("my_extension_name", {"data_key":"username"},
|
|
|
|
(error, success) => {
|
|
|
|
|
|
|
|
[VTAP.Detail](#vtap-detail)
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.Detail.Id](#vtap-detail-id)
|
|
|
|
|
|
|
|
#### VTAP.AppData.Delete {#vtap-appdata-delete}
|
|
|
|
|
|
|
|
[VTAP.Detail.Module](#vtap-detail-module)
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.Detail.Record](#vtap-detail-record)
|
|
|
|
<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.Detail.Relations](#vtap-detail-relations)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.AppData.Delete("my_extension_name", {"data_key" : "username"},
|
|
|
|
(error, success) => {
|
|
|
|
|
|
|
|
[VTAP.Detail.Relation](#vtap-detail-relation)
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.Detail.RelatedRecords](#vtap-detail-relatedrecords)
|
|
|
|
|
|
|
|
### VTAP.PrefsData {#vtap-prefsdata}
|
|
|
|
|
|
|
|
[VTAP.Detail.RelatedRecordsCount](#vtap-detail-relatedrecordscount)
|
|
|
|
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.Modules](#vtap-modules)
|
|
|
|
|
|
|
|
### VTAP.UserData {#vtap-userdata}
|
|
|
|
|
|
|
|
[VTAP.Modules.CurrentModuleName](#vtap-modules-currentmodulename)
|
|
|
|
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.Modules.CurrentModuleModel](#vtap-modules-currentmodulemodel)
|
|
|
|
|
|
|
|
#### VTAP.UserData.Save {#vtap-userdata-save}
|
|
|
|
|
|
|
|
[VTAP.Modules.GetModule](#vtap-modules-getmodule)
|
|
|
|
VTAP.UserData.Save(module, data, callback) : It is used to save user data.
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
[VTAP.Modules.GetAll](#vtap-modules-getall)
|
|
|
|
|
|
|
|
```
|
|
|
|
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"
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
[VTAP.Api](#vtap-api)
|
|
|
|
|
|
|
|
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.Api.Get](#vtap-api-get)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.UserData.Save("extension_name", {"data_key" : "Task", "data_value" : {name : 'Review Home Page'}, "sharedusers" : [2,3]},
|
|
|
|
(error, result) => {
|
|
|
|
|
|
|
|
[VTAP.Api.Post](#vtap-api-post)
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.Api.Put](#vtap-api-put)
|
|
|
|
|
|
|
|
#### VTAP.UserData.Get {#vtap-userdata-get}
|
|
|
|
|
|
|
|
[VTAP.Api.delete](#vtap-api-delete)
|
|
|
|
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.CustomApi](#vtap-customapi)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.UserData.Get("extension_name", {"data_key" : "conversation", "id" : "23"}, (error, success) => {
|
|
|
|
|
|
|
|
[VTAP.Event](#vtap-event)
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.Event.Register](#vtap-event-register)
|
|
|
|
|
|
|
|
#### VTAP.UserData.Delete {#vtap-userdata-delete}
|
|
|
|
|
|
|
|
[VTAP.Event.UnRegister](#vtap-event-unregister)
|
|
|
|
VTAP.UserData.Delete(module, data, callback : It will delete the data saved by UserData.Save api.
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
[VTAP.Event.Trigger](#vtap-event-trigger)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.UserData.Delete("extension_name", {"data_key" : "conversation", "id" : "23"}, (error, success) => {
|
|
|
|
|
|
|
|
[VTAP.Notification](#vtap-notification)
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.Notification.Trigger](#vtap-notification-trigger)
|
|
|
|
|
|
|
|
### VTAP.Resource
|
|
|
|
|
|
|
|
[VTAP.Notification.Listen](#vtap-notification-listen)
|
|
|
|
Provides helper functions to include external resources like Javascript libraries, style sheets.
|
|
|
|
|
|
|
|
|
|
|
|
[VTAP.AppData](#vtap-appdata)
|
|
|
|
#### VTAP.Resource.Require
|
|
|
|
|
|
|
|
VTAP.Resource.Require(path, type) : This will let you add external resources to use them in your components.
|
|
|
|
|
|
|
|
[VTAP.AppData.Save](#vtap-appdata-save)
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
[VTAP.AppData.Get](#vtap-appdata-get)
|
|
|
|
|
|
|
|
Example :
|
|
|
|
|
|
|
|
[VTAP.AppData.Delete](#vtap-appdata-delete)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.Resource.Require('https://unpkg.com/[email protected]/dist/leaflet.js');
|
|
|
|
```
|
|
|
|
|
|
|
|
[VTAP.PrefsData](#vtap-prefsdata)
|
|
|
|
|
|
|
|
\
|
|
|
|
**Note** : Before using any resource you need to white the domain in Module Designer > Settings > Add Domain.
|
|
|
|
|
|
|
|
[VTAP.UserData](#vtap-userdata)
|
|
|
|
|
|
|
|
### VTAP.Oauth {#vtap-oauth}
|
|
|
|
|
|
|
|
[VTAP.UserData.Save](#vtap-userdata-save)
|
|
|
|
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.UserData.Get](#vtap-userdata-get)
|
|
|
|
#### VTAP.Oauth.Authorize {#vtap-oauth-authorize}
|
|
|
|
|
|
|
|
VTAP.Oauth.Authorize(service, module, callback) : 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.
|
|
|
|
|
|
|
|
[VTAP.UserData.Delete](#vtap-userdata-delete)
|
|
|
|
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.
|
|
|
|
|
|
|
|
[VTAP.Oauth](#vtap-oauth)
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
[VTAP.Oauth.Authorize](#vtap-oauth-authorize)
|
|
|
|
|
|
|
|
Example :
|
|
|
|
|
|
|
|
[VTAP.Oauth.StoreAuthDetails](#vtap-oauth-storeauthdetails)
|
|
|
|
|
|
|
|
```
|
|
|
|
VTAP.Oauth.Authorize("3PService", "Contacts", (error, success) => {
|
|
|
|
|
|
|
|
[Component types](#component-types)
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
[Event Types](#event-types)
|
|
|
|
|
|
|
|
#### VTAP.Oauth.SaveAuthClientDetails
|
|
|
|
|
|
|
|
[Client Libraries](#client-libraries) |
|
|
\ No newline at end of file |
|
|
|
VTAP.Oauth.SaveAuthClientDetails(service, module, data) : This function is used to store oauth details with app details, scope, auth url and token url.
|
|
|
|
|
|
|
|
For OAuth support you have to create an app in their application and copy client credentials.
|
|
|
|
|
|
|
|
To store these credentials in vtiger, you can create a [new page](#customizer) using Customizer, where users will put in their client details. You can take input for client_id and client_secret from the user. With scope, auth_url and token_url you can save the details using this api, after which you can call [VTAP.Oauth.Authorize](#vtap-oauth-authorize) API.
|
|
|
|
|
|
|
|
If you want all users to use your app details then feed in your details into the API, when exporting/releasing we will save it in the manifest without exposing it to the customer. All their interactions will be going through your registered app.
|
|
|
|
|
|
|
|
|
|
|
|
<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>data
|
|
|
|
</td>
|
|
|
|
<td>Object
|
|
|
|
</td>
|
|
|
|
<td>Oauth client details, it needs client app details, scope and token urls. Check below example for a sample.
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
let data = {"client_id":"3P_CLIENT_ID",
|
|
|
|
"Client_secret":"3P_CLIENT_SECRET",
|
|
|
|
"auth_url":"https://3Pservice.url/oauth/v2/authorize",
|
|
|
|
"token_url":"https://3Pservice.url/api/oauth.v2.access",
|
|
|
|
"scope":"channels:read"};
|
|
|
|
VTAP.Oauth.SaveAuthClientDetails("3PService", "Contacts", data);
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
###
|
|
|
|
Component types {#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'}); \
|
|
|
|
|
|
|
|
<p>
|
|
|
|
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
|
|
|
|
|
|
|
|
<p id="gdcalert3" ><span style="color: red; font-weight: bold">>>>>> gd2md-html alert: undefined internal link (link text: "here"). Did you generate a TOC? </span><br>(<a href="#">Back to top</a>)(<a href="#gdcalert4">Next alert</a>)<br><span style="color: red; font-weight: bold">>>>>> </span></p>
|
|
|
|
|
|
|
|
<a href="#heading=h.tk2wdlh7a3hr">here</a>.
|
|
|
|
</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 {#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>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Client Libraries {#client-libraries}
|
|
|
|
|
|
|
|
Following client-side libraries are available out-of-box for usage.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Vuejs (version 2)
|
|
|
|
* Bootstrap (version 4.3.1)
|
|
|
|
* Bootstrap-Vue (version 2)
|
|
|
|
* Jquery (version 3.3.1)
|
|
|
|
* Momentjs
|
|
|
|
* Lodash
|
|
|
|
* Highcharts (version 7.0.3)
|
|
|
|
* Fontawesome |
|
|
\ No newline at end of file |
