A world of possibilities - use the VTAP API builder and connect to external applications
Posted: Sat Dec 21, 2024 3:58 am
Since data is an important element of our daily lives, Vtiger aims to make data easily accessible even outside of CRM.
One of the most important features of the Vtiger Application Platform (VTAP) is the ability to transfer the necessary data from the CRM to any location and vice versa. And by combining the VTAP Module Designer Tool , which allows you to customize the user interface, with the API Designer, which can connect to external applications, a world of possibilities has opened up.
As a reminder, we talked about the VTAP platform in our previous blogs.
The Module Designer tool helps you customize the user interface.
The API Designer tool helps you create your own REST APIs.
In this blog, we will discuss how we can connect whatsapp number list to other applications that support REST API and show data inside Vtiger UI. For this, we will use:
API builder for connecting and receiving data from external applications
Module Designer tool for adding widget UI
Case Study: Getting Weather Details for a Contact Location and Displaying Details in a Contact Record
Let's see how we can get the weather details for a contact and display it inside a widget in a contact. Detail Page openweathermap.org provides a free weather API. You can sign up and get an API key to access details from over 200,000 cities.
This is how it will look like in a contact record in Vtiger CRM after connecting to OpenWeatherMap.
Additional image-1
Let's start with the API Designer.
Step 1: Using the API Designer to connect and retrieve data from openweathermap.org .
In this step, we:
Create an API with API Designer
Define HTTP based endpoints
How to create an API using API Designer?
First, let's create an API to get weather information from openweathermap.org in API Designer. Follow these steps:
Go to Menu > Platform > API Builder.
Click Add API.
Add a name, for example get_weather. The naming convention is crucial here, as we will use this to connect from our javascript APIs.
Select the Contacts module as this is where we will create the weather widget.
Additional image-2
Defining HTTP-based endpoints
All our APIs depend on VADL (Vtiger Application Definition Language) which is XML based and allows calling any HTTP based endpoints.
We need to define the structure of the HTTP endpoint which usually includes the request type like GET, POST, PUT, DELETE, URL endpoint, request headers and authentication like basic authentication etc. To access city weather details from openweathermap.org they have defined a GET request with the endpoint below.
GET api.openweathermap.org/data/2.5/weather?q= { city name } & appid = { API key }
We need to map this to VADL, and it needs something like the example below:
Screenshot taken at 00-04-07
Let me explain this process step by step:
Any HTTP API is under a rest node with a mandatory method attribute that specifies the type of HTTP request (GET, POST, etc.).
Inside this we use the URL to get to the API endpoint.
Note that there are attributes with the URL node. These attributes are a dynamic part of the endpoint and are used to replace their values at runtime.
Any attribute with a dynamic value (add @ at the beginning) will be accepted when passed in the request; here we used @city.
For API key you can paste the value from openweathermap. For any attribute make sure you add $ with the attribute name to replace them at runtime.
CDATA command section within URL. Special characters such as & are preserved.
Once saved and published, you can access the API from external applications just like our other REST APIs with endpoints. Look at the URL below. We are calling the API with the API name get_weather . You can access the final xml from here as well.
https://xxxx.odx.vtiger.com/restapi/vta ... ity=London
One important note: you must whitelist each API domain in the API settings.
Additional image-3
You can also access this API from the Vtiger Javascript API, and we will show you how to do that. Before that, we want to create a widget on the details page to display weather information.
To do this, we will go to the Module Builder, select Contacts, and add a TAP script.
Step 2: Adding a New Weather Widget Using the Module Builder
At this stage we will
Add widget to details page
Add a visual component to the widget - Map
Add popup model and admin settings
Let's begin.
Adding a widget
Additional image-4
To add a widget to the detail page, we have provided the javascript APIs VTAP.Component.Register .
This will help you define the type of button, widget or icon that you can add to a particular page.
For example:
To add a button to a list page, use " LIST_BASIC_BUTTON
To add a widget to the details page, use DETAIL_SUMMARY_WIDGET
To see a full list of such hooks, click here .
To define how the widget should look like, we need to add a component that will have the required HTML. In this case, we go to the WeatherWidgetContents component.
In Vtiger, a component is the basis of any UI interface such as widgets, buttons, etc. The basic skeleton of the component is defined here .
One of the most important features of the Vtiger Application Platform (VTAP) is the ability to transfer the necessary data from the CRM to any location and vice versa. And by combining the VTAP Module Designer Tool , which allows you to customize the user interface, with the API Designer, which can connect to external applications, a world of possibilities has opened up.
As a reminder, we talked about the VTAP platform in our previous blogs.
The Module Designer tool helps you customize the user interface.
The API Designer tool helps you create your own REST APIs.
In this blog, we will discuss how we can connect whatsapp number list to other applications that support REST API and show data inside Vtiger UI. For this, we will use:
API builder for connecting and receiving data from external applications
Module Designer tool for adding widget UI
Case Study: Getting Weather Details for a Contact Location and Displaying Details in a Contact Record
Let's see how we can get the weather details for a contact and display it inside a widget in a contact. Detail Page openweathermap.org provides a free weather API. You can sign up and get an API key to access details from over 200,000 cities.
This is how it will look like in a contact record in Vtiger CRM after connecting to OpenWeatherMap.
Additional image-1
Let's start with the API Designer.
Step 1: Using the API Designer to connect and retrieve data from openweathermap.org .
In this step, we:
Create an API with API Designer
Define HTTP based endpoints
How to create an API using API Designer?
First, let's create an API to get weather information from openweathermap.org in API Designer. Follow these steps:
Go to Menu > Platform > API Builder.
Click Add API.
Add a name, for example get_weather. The naming convention is crucial here, as we will use this to connect from our javascript APIs.
Select the Contacts module as this is where we will create the weather widget.
Additional image-2
Defining HTTP-based endpoints
All our APIs depend on VADL (Vtiger Application Definition Language) which is XML based and allows calling any HTTP based endpoints.
We need to define the structure of the HTTP endpoint which usually includes the request type like GET, POST, PUT, DELETE, URL endpoint, request headers and authentication like basic authentication etc. To access city weather details from openweathermap.org they have defined a GET request with the endpoint below.
GET api.openweathermap.org/data/2.5/weather?q= { city name } & appid = { API key }
We need to map this to VADL, and it needs something like the example below:
Screenshot taken at 00-04-07
Let me explain this process step by step:
Any HTTP API is under a rest node with a mandatory method attribute that specifies the type of HTTP request (GET, POST, etc.).
Inside this we use the URL to get to the API endpoint.
Note that there are attributes with the URL node. These attributes are a dynamic part of the endpoint and are used to replace their values at runtime.
Any attribute with a dynamic value (add @ at the beginning) will be accepted when passed in the request; here we used @city.
For API key you can paste the value from openweathermap. For any attribute make sure you add $ with the attribute name to replace them at runtime.
CDATA command section within URL. Special characters such as & are preserved.
Once saved and published, you can access the API from external applications just like our other REST APIs with endpoints. Look at the URL below. We are calling the API with the API name get_weather . You can access the final xml from here as well.
https://xxxx.odx.vtiger.com/restapi/vta ... ity=London
One important note: you must whitelist each API domain in the API settings.
Additional image-3
You can also access this API from the Vtiger Javascript API, and we will show you how to do that. Before that, we want to create a widget on the details page to display weather information.
To do this, we will go to the Module Builder, select Contacts, and add a TAP script.
Step 2: Adding a New Weather Widget Using the Module Builder
At this stage we will
Add widget to details page
Add a visual component to the widget - Map
Add popup model and admin settings
Let's begin.
Adding a widget
Additional image-4
To add a widget to the detail page, we have provided the javascript APIs VTAP.Component.Register .
This will help you define the type of button, widget or icon that you can add to a particular page.
For example:
To add a button to a list page, use " LIST_BASIC_BUTTON
To add a widget to the details page, use DETAIL_SUMMARY_WIDGET
To see a full list of such hooks, click here .
To define how the widget should look like, we need to add a component that will have the required HTML. In this case, we go to the WeatherWidgetContents component.
In Vtiger, a component is the basis of any UI interface such as widgets, buttons, etc. The basic skeleton of the component is defined here .