{"id":12271,"date":"2021-09-27T00:04:03","date_gmt":"2021-09-27T07:04:03","guid":{"rendered":"https:\/\/www.vtiger.com\/blog\/?p=12271"},"modified":"2021-09-27T00:04:03","modified_gmt":"2021-09-27T07:04:03","slug":"a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps","status":"publish","type":"post","link":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/","title":{"rendered":"A world of possibilities &#8211; Use VTAP API Designer &#038; connect with external apps"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">With data being an essential element of our daily lives, Vtiger aims to make data easily accessible, even outside CRM.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One of the most significant features of the<\/span> <span style=\"font-weight: 400;\">Vtiger Application Platform (VTAP) is its ability to transfer the required data from CRM to anywhere and vice versa.\u00a0<\/span><span style=\"font-weight: 400;\">And combining VTAP\u2019s <\/span><a href=\"https:\/\/www.vtiger.com\/blog\/vtap-module-designer-our-low-code-platform-to-make-the-crm-your-own\/\"><span style=\"font-weight: 400;\">Module Designer tool<\/span><\/a><span style=\"font-weight: 400;\">, which allows for UI customization, with an API Designer that can connect with external applications has opened a world of possibilities.<\/span><\/p>\n<p>Just to recall, we spoke about the VTAP platform in our previous blogs.<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.vtiger.com\/blog\/vtap-module-designer-our-low-code-platform-to-make-the-crm-your-own\/\"><span style=\"font-weight: 400;\">Module Designer tool helps you customize your UI<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.vtiger.com\/blog\/getting-started-with-vtap-with-api-designer-part-2\/\"><span style=\"font-weight: 400;\">API Designer tool helps you build custom REST APIs<\/span><\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">In this blog, we will discuss how we can connect to other applications that support REST APIs and show the data inside the Vtiger UI. For this, we will use:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The API Designer to connect and fetch data from external apps<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The Module Designer tool to add widget UI<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><b>Case Study: <\/b><span style=\"font-weight: 400;\">Getting the weather details for a contact\u2019s location and displaying the details in the contact\u2019s record.<\/span><br \/>\n<\/br><br \/>\n<span style=\"font-weight: 400;\">Let&#8217;s take a look at how we can get the weather details of a Contact and show it inside a widget in the contact\u2019s<\/span> <span style=\"font-weight: 400;\">detail page. <\/span><a href=\"https:\/\/openweathermap.org\/api\"><span style=\"font-weight: 400;\">openweathermap.org<\/span><\/a><span style=\"font-weight: 400;\"> provides a free weather API. You can sign up and get the API key to access the <\/span><a href=\"https:\/\/openweathermap.org\/current\"><span style=\"font-weight: 400;\">details<\/span><\/a><span style=\"font-weight: 400;\"> of over 200,000 cities.<br \/>\n<\/br><br \/>\n<br \/>This is how it would look in the contact record in Vtiger CRM after you connect with OpenWeatherMap.<\/span><br \/>\n<\/br><br \/>\n&nbsp;<br \/>\n<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12272\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Sub-Image-1-1.png\" alt=\"Sub-Image-1\" width=\"700\" height=\"500\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-1-1.png 700w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-1-1-300x214.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Let now start with the API Designer.<br \/>\n<\/br><br \/>\n<br \/><b>Step 1: Using the API Designer to connect and fetch data from openweathermap.org<\/b><span style=\"font-weight: 400;\">.<\/span><br \/>\n<\/br><br \/>\n<span style=\"font-weight: 400;\">In this step, we will:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Create an API using API Designer<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Define HTTP based endpoints<\/span><\/span><\/li>\n<p> <\/br>\n<\/ul>\n<ul>\n<li><b>How to create an API using API Designer?<\/b><\/br><br \/>\nFirst, let us create an API to fetch weather information from openweathermap.org in the API Designer. Follow these steps:<\/p>\n<ul>\n<li style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Go to Menu &gt; Platform &gt; API Designer.<\/span><\/li>\n<li style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Click on Add API.<\/span><\/li>\n<li style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Add a name, for example, \u2018get_weather\u2019. Here the naming convention is crucial as we will be using it to connect from our javascript APIs.<\/span><\/li>\n<li style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Select the Contacts module as that is where we are building the weather widget.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12273\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Sub-Image-2-1.png\" alt=\"Sub-Image-2\" width=\"700\" height=\"300\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-2-1.png 700w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-2-1-300x129.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><b>Defining HTTP based endpoints<\/b><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">All our APIs depend upon <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/API-Designer#vadl-specification\"><span style=\"font-weight: 400;\">VADL<\/span><\/a><span style=\"font-weight: 400;\">(Vtiger Application Definition Language), which is loosely based on XML and allows you to invoke any HTTP-based endpoints.<br \/>\n<\/span><span style=\"font-weight: 400;\">We need to define the structure of an HTTP endpoint, which typically involves a type of request like GET, POST, PUT, DELETE, URL endpoint, request headers, and authentication like basic auth, etc.\u00a0<\/span><span style=\"font-weight: 400;\">To access a city\u2019s <\/span><a href=\"https:\/\/openweathermap.org\/current\"><span style=\"font-weight: 400;\">weather details<\/span><\/a><span style=\"font-weight: 400;\"> from openweathermap.org they have defined a GET request with the below endpoint.<\/span><\/p>\n<blockquote>\n<p style=\"padding-left: 30px;\"><span style=\"color: #000000;\"><span style=\"font-weight: 400;\">GET<\/span><span style=\"font-weight: 400;\"> api.openweathermap.org\/<\/span><span style=\"font-weight: 400;\">data<\/span><span style=\"font-weight: 400;\">\/2.5\/weather?q={<\/span><span style=\"font-weight: 400;\">city<\/span> <span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">}&amp;appid={<\/span><span style=\"font-weight: 400;\">API<\/span> <span style=\"font-weight: 400;\">key<\/span><span style=\"font-weight: 400;\">}<\/span><\/span><\/p>\n<\/blockquote>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">We need to map this to VADL, and it would like something like the example below:<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-12288\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-04-07-1-800x182.png\" alt=\"Screenshot at 00-04-07\" width=\"800\" height=\"182\" \/><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Let me explain this process step by step:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Any HTTP <\/span><b>API<\/b><span style=\"font-weight: 400;\"> is put under <\/span><span style=\"font-weight: 400;\">a <\/span><b>rest<\/b><span style=\"font-weight: 400;\"> node with a mandatory method attribute that defines the HTTP(GET, POST, etc.) type of request.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Inside that, we use the <\/span><b>URL <\/b><span style=\"font-weight: 400;\">to hit the endpoint of the API.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Notice there are attributes with a <\/span><b>URL<\/b><span style=\"font-weight: 400;\"> node. These attributes are a dynamic part of the endpoint and are used to replace them with values at the runtime.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Any attribute with a dynamic value(prepend with @) will be accepted when passed in the request; we have used @city here.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">For the API key, you can paste the value from openweathermap. For any attribute, ensure you prepend <\/span><i><span style=\"font-weight: 400;\">$<\/span><\/i><span style=\"font-weight: 400;\"> with attribute name to replace them at run time.<\/span><\/li>\n<li style=\"font-weight: 400;\">The<b> CDATA<\/b><span style=\"font-weight: 400;\"> section inside the URL is used. Such special characters like &amp; are retained.<\/span><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">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 call the API with the name of the API <\/span><b>get_weather<\/b><span style=\"font-weight: 400;\">. You can access final xml from <a href=\"https:\/\/extend.vtiger.com\/vtap\/app_examples\/blob\/master\/openweathermap.org\/get_weather.xml\">here<\/a> as well.<\/span><\/p>\n<blockquote><p>https:\/\/xxxx.odx.vtiger.com\/restapi\/vtap\/api\/get_weather?city=London<\/p><\/blockquote>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">One important note is you should whitelist every API domain under API Settings.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12279\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Sub-image-3-1.png\" alt=\"Sub-image-3\" width=\"700\" height=\"250\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-image-3-1.png 700w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-image-3-1-300x107.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">You can also access this API from Vtiger Javascript APIs, and we will tell you how you can do it. Before that, we want to create a widget on the detail page to show the weather information.<br \/>\n<\/span><span style=\"font-weight: 400;\">For this, we will go to Module Designer and select Contacts and add a TAP script.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><b>Step 2: Adding a new Weather widget using the Module Designer\u00a0<\/b><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">In this step, we will,\u00a0<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\">Add the widget in detail page<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Add a visual component for the widget &#8211; Map<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Add a popup model and admin settings<\/span><\/li>\n<\/ol>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Let us begin.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><b>Adding the widget<\/b><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12281\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Sub-Image-4-1.png\" alt=\"Sub-Image-4\" width=\"400\" height=\"340\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-4-1.png 400w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-4-1-300x255.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">To add a widget in detail page, we have exposed javascript APIs <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Javascript-APIs#vtapcomponentregister\"><span style=\"font-weight: 400;\">VTAP.Component.Register<\/span><\/a><span style=\"font-weight: 400;\">.<br \/>\n<\/span><span style=\"font-weight: 400;\">This will help you define the type of button, widget, or icon that you can add to a particular page.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">For example:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">To add a button on the List page, use \u201c<\/span><i><span style=\"font-weight: 400;\">LIST_BASIC_BUTTON<\/span><\/i><span style=\"font-weight: 400;\">\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">To add a widget in detail page, use \u201c<\/span><i><span style=\"font-weight: 400;\">DETAIL_SUMMARY_WIDGET<\/span><\/i><span style=\"font-weight: 400;\">\u201d<\/span><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">For a complete list of such hooks, click <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Javascript-APIs#component-types\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">To define how the widget should look like, we need to add a component that will have the required HTML. In this case, we are going to the WeatherWidgetContents component.<br \/>\n<\/span><span style=\"font-weight: 400;\">In Vtiger, a component is the base for any UI interface like widgets, buttons, etc. The basic skeleton of a component is defined <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Javascript-APIs#vtapcomponentcore\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12290\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-11-50-1.png\" alt=\"Screenshot at 00-11-50\" width=\"668\" height=\"207\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-11-50-1.png 668w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-11-50-1-300x93.png 300w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">The WeatherWidgetContents component will do the following things:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Call the openweathermap API get_weather, which we created in API Designer.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Load some basic details like current time, sunrise and sunset time, temperature, and general forecast.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Load Open Street and show the city on the map.<\/span><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">To understand the structure of a Vtiger component, you need a little knowledge of the <\/span><a href=\"https:\/\/vuejs.org\/v2\/guide\/components.html\"><span style=\"font-weight: 400;\">Vue component<\/span><\/a><span style=\"font-weight: 400;\"> as our VTAP platform is built on it.<br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider the below example. Here we call the <\/span><b>get_weather <\/b><span style=\"font-weight: 400;\">API, which we added in API Designer (inside the created function). <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Javascript-APIs#vtapdetail\"><span style=\"font-weight: 400;\">VTAP.Detail.Record()<\/span><\/a><span style=\"font-weight: 400;\"> Javascript API gives the record details. We will access the Contacts mailing city field information to access weather details.<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-12291\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-12-43-1-716x300.png\" alt=\"Screenshot at 00-12-43\" width=\"716\" height=\"300\" \/><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Once the data is received, we use the weather data in the template to render them with the help of component-specific functions defined inside methods.\u00a0<\/span><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">We use <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Javascript-APIs#vtapcustomapiget\"><span style=\"font-weight: 400;\">VTAP.CustomApi.Get<\/span><\/a><span style=\"font-weight: 400;\"> API to fetch data from openweathermap.org by calling <\/span><b><i>get_weather<\/i><\/b><span style=\"font-weight: 400;\"> API written in API Designer. Assign the response to a data variable so it can be accessed by:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A component method for processing<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Template for displaying.\u00a0<\/span><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Many helper functions are written in methods to help display time and temperature in a readable format.<br \/>\n<\/span>You can see the code <a href=\"https:\/\/extend.vtiger.com\/vtap\/app_examples\/blob\/master\/openweathermap.org\/WeatherWidgetContents.js\">here<\/a>.<\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">This is how it would look once you save and publish the script and open a Contact that has a mailing city. But don\u2019t you think this seems a little boring? Why not add a map?<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12280\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Sub-Image-5-1.png\" alt=\"Sub-Image-5\" width=\"700\" height=\"500\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-5-1.png 700w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-Image-5-1-300x214.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><b>Adding the Visual Component &#8211; Map<\/b><\/li>\n<\/ul>\n<p>In this example, let&#8217;s add an OpenStreet map and show the mailing city on the map.<\/p>\n<p><span style=\"font-weight: 400;\">To add the Open Street map we first need to include its library file. The Javascript library in VTAP allows for the inclusion of any library on the runtime using <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Javascript-APIs#vtapresourcerequire\"><span style=\"font-weight: 400;\">VTAP.Resource.Require<\/span><\/a><span style=\"font-weight: 400;\"> API.<br \/>\n<\/span>You can include these libraries when registering the detail widget itself.<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12292\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-24-23-1.png\" alt=\"Screenshot at 00-24-23\" width=\"769\" height=\"267\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-24-23-1.png 769w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-24-23-1-300x104.png 300w\" sizes=\"auto, (max-width: 769px) 100vw, 769px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now we need to show the map in WeatherWidgetContent. Begin by adding a placeholder in the template and loading it after getting data from get_weather API with the coordinates. You can get the complete script from our examples <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/app_examples\/blob\/master\/openweathermap.org\/RegisterWeatherWidget.js\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\"> and watch\u00a0it in action.<\/span> <\/br><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-12283\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Sub-image-6-1-700x300.png\" alt=\"Sub-image-6\" width=\"700\" height=\"300\" \/><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Now let&#8217;s say you want to release this as an extension module, and each customer wants to install this and use their own openweathermap.org API key. For this, we can store customer data using our javascript store APIs, which can be accessed in API Designer using <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Javascript-APIs#vtapresourcerequire\"><span style=\"font-weight: 400;\">placeholder variables<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><b>Adding a popup model and admin settings<\/b><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Let&#8217;s create a small modal popup that only admins can access and store the API key in our data store. First, register a component to show the settings on the list page.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-12294\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Screenshot-at-00-30-37-1-800x209.png\" alt=\"Screenshot at 00-30-37\" width=\"800\" height=\"209\" \/><\/p>\n<p style=\"padding-left: 30px;\">This is how it would look in the list page.<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12282\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Sub-image-7-1.png\" alt=\"Sub-image-7\" width=\"530\" height=\"200\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-image-7-1.png 530w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Sub-image-7-1-300x113.png 300w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Data storage in Vtiger<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">We will use <\/span><a href=\"https:\/\/extend.vtiger.com\/vtap\/documentation\/wikis\/VTAP-Runtime#vtapappdata\"><span style=\"font-weight: 400;\">VTAP.AppData<\/span><\/a><span style=\"font-weight: 400;\"> API\u2019s to store and retrieve their API key. Notice that we are using weather_apikey as a key to store, and this can be accessed in API Designer using $apps.$app.Contacts.weather_apikey.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12284\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Screenshot-at-23-57-00-1.png\" alt=\"Screenshot at 23-57-00\" width=\"602\" height=\"196\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-23-57-00-1.png 602w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-23-57-00-1-300x98.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/p>\n<p style=\"padding-left: 30px;\">You can access entire WeatherSettings code from <a href=\"https:\/\/extend.vtiger.com\/vtap\/app_examples\/blob\/master\/openweathermap.org\/WeatherSettings.js\">here<\/a>.<\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">After using VTAP store data API for storing the API key, we can modify the API Designer get_weather definition as shown below. We are replacing the direct key value with <\/span><i><span style=\"font-weight: 400;\">$apps.$app.Contacts.weather_apikey<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12310\" src=\"https:\/\/voeyenew.vtiger.com\/s\/wp-content\/uploads\/2021\/09\/Screenshot-at-23-43-36-1.png\" alt=\"Screenshot at 23-43-36\" width=\"717\" height=\"168\" srcset=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-23-43-36-1.png 717w, https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Screenshot-at-23-43-36-1-300x70.png 300w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/p>\n<p style=\"padding-left: 30px;\">\n<p><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">Now you are in the state where you can publish your extension to our marketplace as you have made the API key configurable for each customer.<\/span><\/p>\n<p style=\"padding-left: 30px;\"><span style=\"font-weight: 400;\">For any other queries, please send an email to <\/span><a href=\"mailto:platform@vtiger.com\"><span style=\"font-weight: 400;\">platform@vtiger.com<\/span><\/a><span style=\"font-weight: 400;\">.<br \/>\n<\/span><span style=\"font-weight: 400;\">Sign up for the developer edition <\/span><a href=\"https:\/\/www.vtiger.com\/vtap\/\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With data being an essential element of our daily lives, Vtiger aims to make data easily accessible, even outside CRM.\u00a0 One of the most significant features of the Vtiger Application Platform (VTAP) is its ability to transfer the required data from CRM to anywhere and vice versa.\u00a0And combining VTAP\u2019s Module Designer tool, which allows for&hellip;&nbsp;<a href=\"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/\" class=\"\" rel=\"bookmark\">.<span class=\"screen-reader-text\">A world of possibilities &#8211; Use VTAP API Designer &#038; connect with external apps<\/span><\/a><\/p>\n","protected":false},"author":45,"featured_media":12304,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false,"_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","footnotes":""},"categories":[3,25,32],"tags":[],"class_list":["post-12271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-low-code","category-vtap"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>A world of possibilities - Use VTAP API Designer &amp; connect with external apps - Vtiger CRM Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A world of possibilities - Use VTAP API Designer &amp; connect with external apps - Vtiger CRM Blog\" \/>\n<meta property=\"og:description\" content=\"With data being an essential element of our daily lives, Vtiger aims to make data easily accessible, even outside CRM.\u00a0 One of the most significant features of the Vtiger Application Platform (VTAP) is its ability to transfer the required data from CRM to anywhere and vice versa.\u00a0And combining VTAP\u2019s Module Designer tool, which allows for&hellip;&nbsp;.A world of possibilities &#8211; Use VTAP API Designer &#038; connect with external apps\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Vtiger CRM Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vtiger\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Blog-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3334\" \/>\n\t<meta property=\"og:image:height\" content=\"1250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikas Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vtigercrm\" \/>\n<meta name=\"twitter:site\" content=\"@vtigercrm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikas Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A world of possibilities - Use VTAP API Designer & connect with external apps - Vtiger CRM Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/","og_locale":"en_US","og_type":"article","og_title":"A world of possibilities - Use VTAP API Designer & connect with external apps - Vtiger CRM Blog","og_description":"With data being an essential element of our daily lives, Vtiger aims to make data easily accessible, even outside CRM.\u00a0 One of the most significant features of the Vtiger Application Platform (VTAP) is its ability to transfer the required data from CRM to anywhere and vice versa.\u00a0And combining VTAP\u2019s Module Designer tool, which allows for&hellip;&nbsp;.A world of possibilities &#8211; Use VTAP API Designer &#038; connect with external apps","og_url":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/","og_site_name":"Vtiger CRM Blog","article_publisher":"https:\/\/www.facebook.com\/vtiger","og_image":[{"width":3334,"height":1250,"url":"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2021\/09\/Blog-1.png","type":"image\/png"}],"author":"Vikas Jain","twitter_card":"summary_large_image","twitter_creator":"@vtigercrm","twitter_site":"@vtigercrm","twitter_misc":{"Written by":"Vikas Jain","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/#article","isPartOf":{"@id":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/"},"author":{"name":"Vikas Jain","@id":"https:\/\/www.vtiger.com\/blog\/#\/schema\/person\/a3b53a76105d26e3f2a7b1f9443bc10e"},"headline":"A world of possibilities &#8211; Use VTAP API Designer &#038; connect with external apps","dateModified":"2021-09-27T07:04:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/"},"wordCount":1498,"commentCount":0,"publisher":{"@id":"https:\/\/www.vtiger.com\/blog\/#organization"},"articleSection":["All","Low Code","VTAP"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/","url":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/","name":"A world of possibilities - Use VTAP API Designer & connect with external apps - Vtiger CRM Blog","isPartOf":{"@id":"https:\/\/www.vtiger.com\/blog\/#website"},"dateModified":"2021-09-27T07:04:03+00:00","breadcrumb":{"@id":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vtiger.com\/blog\/a-world-of-possibilities-use-vtap-api-designer-connect-with-external-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vtiger.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A world of possibilities &#8211; Use VTAP API Designer &#038; connect with external apps"}]},{"@type":"WebSite","@id":"https:\/\/www.vtiger.com\/blog\/#website","url":"https:\/\/www.vtiger.com\/blog\/","name":"Vtiger CRM Blog","description":"Latest CRM Topics, Tips, Insights and Updates","publisher":{"@id":"https:\/\/www.vtiger.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vtiger.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vtiger.com\/blog\/#organization","name":"Vtiger","url":"https:\/\/www.vtiger.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vtiger.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2023\/02\/vtiger-logo-only.png","contentUrl":"https:\/\/www.vtiger.com\/blog\/wp-content\/uploads\/2023\/02\/vtiger-logo-only.png","width":490,"height":399,"caption":"Vtiger"},"image":{"@id":"https:\/\/www.vtiger.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vtiger","https:\/\/twitter.com\/vtigercrm"]},{"@type":"Person","@id":"https:\/\/www.vtiger.com\/blog\/#\/schema\/person\/a3b53a76105d26e3f2a7b1f9443bc10e","name":"Vikas Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vtiger.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/20400ac943c1331501f3d9b23119e9b9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/20400ac943c1331501f3d9b23119e9b9?s=96&d=mm&r=g","caption":"Vikas Jain"},"url":"https:\/\/www.vtiger.com\/blog\/author\/vikas\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/posts\/12271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/comments?post=12271"}],"version-history":[{"count":0,"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/posts\/12271\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/media\/12304"}],"wp:attachment":[{"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/media?parent=12271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/categories?post=12271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vtiger.com\/blog\/wp-json\/wp\/v2\/tags?post=12271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}