README.md 2.26 KB
Newer Older
Vikas's avatar
Vikas committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Integrate with openweathermap.org to see Contact's location in Open Street maps and climate details.
Add a Summary view widget in Contacts module and show maps and other weather details after fetching details from openweathermap.org.
Save the API Key from openweathermap.org in vtiger so API's can use it to connect and fetch details.


Sign up on https://openweathermap.org/ to get free api access to weather data.
For more details on the API see https://openweathermap.org/current
Access API after you sign up from https://home.openweathermap.org/api_keys


For this integration we will make use of Api Designer and Module Designer.
Api Designer will be used to add api and connecting to openweathermap.
Module Designer will be used to register for Wdiget in Contacts module.


1. First we will add a new API from Api Designer with name "get_weather".
2. Go to Menu > Platform > Api Designer > Add Api, select module and provide a unique api name(get_weather).
3. For your reference the code is added in get_weather.xml file.
4. Now we need to add a widget and also store api key in Contacts module, for this we need to register a vtiger component using VTAP.Component.Register client api.
5. Create a TAP Script from Menu > Module Designer, select Contacts modules. On the right side you will have option to add under TAP Script.
6. Add New Resource popup will show, there give a name for your script(RegisterWeatherWidget for example). Select the module where your widget should appear. 
7. Default component name will be created in the VTAP script with name Contacts_Component_RegisterWeatherWidget (if Contacts module is selected).
8. In created function register for Summary widget and modal popup to save api key. (see RegisterWeatherWidget.js file for detailed explanation)
9. If you open a contact which has mailing city then it will show map and current weather details in the widget.
10. You can access get_weather api from javascript using VTAP.CustomApi object. Then you can generate a html using the data from the api.


Note : Adding any external api's or javascript resource needs to be registered. 
For Api's you can register in list page of Api Designer, under Settings > Allowed Domains.
For Javascript or style libraries, you can register from Module Designer > Settings > Allowed Domains.