Vtiger CRM Developer Newsletter

Over the past 12 months, as noted in Vtiger’s Journey through 2022, our progress on VTAP tools has been one of the most satisfying for us in engineering along with the launch of the open-source edition.

We also released the Add-on Publisher this month. This new tool will help you package and publish your VTAP work to the Vtiger Marketplace. Please try and share your feedback with us at [email protected].

- Prasad A, CTO, Vtiger CRM

What’s New in VTAP

Add-on Publisher

Want to publish an app to the Vtiger Marketplace? It can be done easily by using the Publisher to package all the work you did for the app. Here are the steps.

Step 1 - Sign Up for Developer Edition account from here.

Step 2 - Customize the following:

Configure workflows, processes, custom fields, ..etc.
Extend by writing custom code with API Designer and Module Designer.

Step 3 - Package the following with the Add-on Publisher.

Workflows
Processes
APIs
Modules
Fields
Templates and more

Step 4 - Test by installing on another Developed Edition account.

Step 5 - Sign up for Vtiger Marketplace and publish for approval.

Step 6 - Your extension will be published after approval.

Note: You need to sign up for Vtiger Marketplace to publish extensions. This account is different from the Developer edition signup. You can use this account to build and publish from any Vtiger Developer Account.

Add-on Publisher

Want to publish an app to the Vtiger Marketplace? It can be done easily by using the Publisher to package all the work you did for the app. Here are the steps.

Step 1 - Sign Up for Developer Edition account from here.

Step 2 - Customize the following:

Configure workflows, processes, custom fields, ..etc.
Extend by writing custom code with API Designer and Module Designer.

Step 3 - Package the following with the Add-on Publisher.

Workflows
Processes
APIs
Modules
Fields
Templates and more

Step 4 - Test by installing on another Developed Edition account.

Step 5 - Sign up for Vtiger Marketplace and publish for approval.

Step 6 - Your extension will be published after approval.

VTAP Customer use case

A doctor’s clinic uses Vtiger CRM to create, track appointments, and send patient reminders. He is using the Vtiger Events module for this and wants to display these appointments on a monitor in his clinic. So when the patient walks in, they can see the appointment queue.

The clinic has an in-house app that stores appointment details and is connected to the monitor to display them. The CRM agent feeds appointments into the Event module when the patient calls for an appointment or schedules them. This information needs to be propagated to the in-house app as well.

Fortunately, the app has REST APIs that are exposed to store appointments.

Using our low code platform, we have many ways to solve this. Let us see how we can use VTAP Javascript Events to solve this.

Create an API in Vtiger to send appointments to the in-house app.
Subscribe and listen to VTAP Events when a CRM Event record is created inside Vtiger.
Call the API when a CRM user saves an Event record.

Step 1: To connect to any external app from Vtiger, we need to create an API interface from the API Designer module. This can be done using Menu > Platform > Api Designer > Create Rest API.

Give a name create_appointment. And select the Events module.

API XML structure is as follows:

This is a post-request call to the URL.
Header has a secret to communicate with the in-house app.
Parameters have data required in their format.

Fortunately, the app has REST APIs that are exposed to store appointments.

Using our low code platform, we have many ways to solve this. Let us see how we can use VTAP Javascript Events to solve this.

Create an API in Vtiger to send appointments to the in-house app.
Subscribe and listen to VTAP Events when a CRM Event record is created inside Vtiger.
Call the API when a CRM user saves an Event record.

Step 1: To connect to any external app from Vtiger, we need to create an API interface from the API Designer module. This can be done using Menu > Platform > Api Designer > Create Rest API.

Give a name create_appointment. And select the Events module.

API XML structure is as follows:

This is a post-request call to the URL.
Header has a secret to communicate with the in-house app.
Parameters have data required in their format.


  <?xml version="1.0"?>
<api>
    <rest type="post">
        <url>https://IN-HOUSE-APP-ENDPOINT-FOR-APPOINTMENT-CREATION</url>
        <headers>
            <header name="secret" value="xxxxx"></header>
        </headers>
        <parameters>
            <parameter name='CONTACT_NAME' value="@contact_name"></parameter>
            <parameter name='APPOINTMENT_DATE' value="@app_date"></parameter>
            <parameter name='APPOINTMENT_TIME' value="@app_time"></parameter>
            <parameter name='LOCATION' value="@location"></parameter>
        </parameters>
    </rest>
</api>


  <?xml version="1.0"?>
<api>
    <rest type="post">
        <url>https://IN-HOUSE-APP-ENDPOINT-FOR-APPOINTMENT-CREATION</url>
        <headers>
            <header name="secret" value="xxxxx"></header>
        </headers>
        <parameters>
            <parameter name='CONTACT_NAME' value="@contact_name"></parameter>
            <parameter name='APPOINTMENT_DATE' value="@app_date"></parameter>
            <parameter name='APPOINTMENT_TIME' value="@app_time"></parameter>
            <parameter name='LOCATION' value="@location"></parameter>
        </parameters>
    </rest>
</api>

After adding the above XML, save and Publish it. These APIs can be called from outside (as REST APIs) into the CRM using VTAP Javascript APIs.

Note: For any external application to access APIs, the domain must first be whitelisted from API Designer > Settings > Add domain. Else the system will throw up an error for unauthorized domain access.

--------------------------------------------------------------------------------

Step 2: Now, we need to register so we can listen to VTAP events. For this, you need to use Module Designer. Go to menu > Platform > Module Designer > Events module and add a TAP Script > Script Name (SendEvent).

You need to use VTAP.Event.Register to listen to the Record Save event(when the user clicks the Save button). Here is the list to listen to other events.

TAP Script structure is as follows:

Add a created function inside the component.
Register for listening for new records using VTAP.Event.Register function.
Call the API Designer API using VTAP.CustomAPi.Postfunction.

After adding the above XML, save and Publish it. These APIs can be called from outside (as REST APIs) into the CRM using VTAP Javascript APIs.

--------------------------------------------------------------------------------

You need to use VTAP.Event.Register to listen to the Record Save event(when the user clicks the Save button). Here is the list to listen to other events.

TAP Script structure is as follows:

Add a created function inside the component.
Register for listening for new records using VTAP.Event.Register function.
Call the API Designer API using VTAP.CustomAPi.Postfunction.


  var Events_Component_SendEvent = VTAP.Component.Core.extend({
  // created funtion is the entry point for any TAP Script
  created(){
    // Register for new record
    VTAP.Event.Register('RECORD_CREATED',(module,record) => {
      if(module == 'Events'){
        let contactName = (record.contact_id && record.contact_id[0]) ? record.contact_id[0].label : 'No Name';
      }
      let params = {
        contactName : contactName,
        appointment_date : record.date_start,
        appointment_time : record.time_start,
        location : record.location
      }
      // Call the API created from API Desginer using VTAP.CustomApi.Post API
      VTAP.CustomApi.Post('create_appointment',params,(error,success) => {
        if(success){
          VTAP.Utility.ShowSuccessNotification():
        }
        else{
          let errorMsg = (error.message) ? error.message : error;
          VTAP.Utility.ShowErrorNotification(errorMsg)
        }
      })
    })
  }
})


  var Events_Component_SendEvent = VTAP.Component.Core.extend({
  // created funtion is the entry point for any TAP Script
  created(){
    // Register for new record
    VTAP.Event.Register('RECORD_CREATED',(module,record) => {
      if(module == 'Events'){
        let contactName = (record.contact_id && record.contact_id[0]) ? record.contact_id[0].label : 'No Name';
      }
      let params = {
        contactName : contactName,
        appointment_date : record.date_start,
        appointment_time : record.time_start,
        location : record.location
      }
      // Call the API created from API Desginer using VTAP.CustomApi.Post API
      VTAP.CustomApi.Post('create_appointment',params,(error,success) => {
        if(success){
          VTAP.Utility.ShowSuccessNotification():
        }
        else{
          let errorMsg = (error.message) ? error.message : error;
          VTAP.Utility.ShowErrorNotification(errorMsg)
        }
      })
    })
  }
})

Click here to see how you can use VTAP Javascript UI Events with REST APIs.

Webinars & Videos

VTAP Add-on Publisher Demo - 8th Feb 2023

We will give you a demo of the Add-on Publisher and discuss its uses in this webinar.

Join us for one of the sessions convenient for you -

11:30 AM IST | 10 AM CST

VTAP Add-on Publisher Demo - 8th Feb 2023

We will give you a demo of the Add-on Publisher and discuss its uses in this webinar.

Join us for one of the sessions convenient for you -

11:30 AM IST | 10 AM CST

Vtiger APPtitude

Tools we like

Apache Superset

Apache Superset allows you to visualize data (like PowerBI).

A similar visualization tool you may also want to check out is Grafana.

Apache Superset

Apache Superset allows you to visualize data (like PowerBI).

A similar visualization tool you may also want to check out is Grafana.

Vtiger Survey

2023 is the year where we want to enhance the CRM with your feedback.

Take this survey to share your experience and input.

The survey is valid till 31 Jan 2023.

2023 is the year where we want to enhance the CRM with your feedback.

Take this survey to share your experience and input.

The survey is valid till 31 Jan 2023.

Coming Soon

Insights Designer: A new tool that allows you to build advanced dashboards by writing Custom SQL. (February)
VTAP Tables: Create relational custom tables, and perform CRUD operations using VTAP APIs. (February)

Insights Designer: A new tool that allows you to build advanced dashboards by writing Custom SQL. (February)
VTAP Tables: Create relational custom tables, and perform CRUD operations using VTAP APIs. (February)

I provide consent to Vtiger to send updates of what's new and other interesting reads.

I have read the privacy policy of Vtiger.