Omdat gegevens een essentieel onderdeel zijn van ons dagelijks leven, streeft Vtiger ernaar om gegevens gemakkelijk toegankelijk te maken, zelfs buiten CRM.
Een van de belangrijkste kenmerken van de Vtiger Application Platform (VTAP) is de mogelijkheid om de vereiste gegevens van CRM naar overal over te dragen en vice versa. En het combineren van VTAP's Module Designer-tool, die UI-aanpassing mogelijk maakt, met een API Designer die verbinding kan maken met externe applicaties, heeft een wereld van mogelijkheden geopend.
Ter herinnering, we hadden het in onze vorige blogs over het VTAP-platform.
- Module Designer-tool helpt u bij het aanpassen van uw gebruikersinterface
- API Designer-tool helpt u bij het bouwen van aangepaste REST-API's
In deze blog bespreken we hoe we verbinding kunnen maken met andere applicaties die REST-API's ondersteunen en de gegevens in de Vtiger-gebruikersinterface weergeven. Hiervoor gebruiken we:
- De API Designer om verbinding te maken en gegevens op te halen uit externe apps
- De tool Module Designer om de gebruikersinterface voor widgets toe te voegen
Casestudy: De weersdetails ophalen voor de locatie van een contactpersoon en de details weergeven in de record van de contactpersoon.
Laten we eens kijken hoe we de weersdetails van een contactpersoon kunnen krijgen en deze in een widget in het contact kunnen weergeven detailpagina. openweerkaart.org biedt een gratis weer-API. U kunt zich aanmelden en de API-sleutel krijgen om toegang te krijgen tot de gegevens van meer dan 200,000 steden.
Dit is hoe het eruit zou zien in het contactrecord in Vtiger CRM nadat u verbinding hebt gemaakt met OpenWeatherMap.
Laten we nu beginnen met de API Designer.
Stap 1: De API Designer gebruiken om verbinding te maken en gegevens op te halen van openweathermap.org.
In deze stap zullen we:
- Maak een API met behulp van API Designer
- Definieer op HTTP gebaseerde eindpunten
- Hoe maak je een API met behulp van API Designer?
Laten we eerst een API maken om weersinformatie op te halen van openweathermap.org in de API Designer. Volg deze stappen:- Ga naar Menu > Platform > API Designer.
- Klik op API toevoegen.
- Voeg een naam toe, bijvoorbeeld 'get_weather'. Hier is de naamgevingsconventie cruciaal omdat we deze zullen gebruiken om verbinding te maken vanuit onze javascript-API's.
- Selecteer de module Contacten, want daar bouwen we de weerwidget.
- Op HTTP gebaseerde eindpunten definiëren
Al onze API's zijn afhankelijk van: VADL(Vtiger Application Definition Language), die losjes is gebaseerd op XML en waarmee u alle HTTP-gebaseerde eindpunten kunt aanroepen.
We moeten de structuur van een HTTP-eindpunt definiëren, wat meestal een type verzoek omvat zoals GET, POST, PUT, DELETE, URL-eindpunt, verzoekheaders en authenticatie zoals basisverificatie, enz. Om toegang te krijgen tot een stad weersdetails van openweathermap.org hebben ze een GET-verzoek gedefinieerd met het onderstaande eindpunt.
GET api.openweathermap.org/gegevens/2.5/weer?q={stadsappartementen naam}&app={API sleutel}
We moeten dit toewijzen aan VADL, en het zou zoiets als het onderstaande voorbeeld willen:
Laat me dit proces stap voor stap uitleggen:
- Elke HTTP API wordt onder gezet a rest node met een verplicht methodekenmerk dat het HTTP(GET, POST, etc.) type verzoek definieert.
- Daarbinnen gebruiken we de URL om het eindpunt van de API te bereiken.
- Merk op dat er attributen zijn met a URL knooppunt. Deze kenmerken vormen een dynamisch onderdeel van het eindpunt en worden gebruikt om ze tijdens runtime te vervangen door waarden.
- Elk attribuut met een dynamische waarde (prepend met @) wordt geaccepteerd wanneer het wordt doorgegeven in het verzoek; we hebben hier @city gebruikt.
- Voor de API-sleutel kun je de waarde uit openweathermap plakken. Zorg ervoor dat u voor elk attribuut voorafgaat $ met attribuutnaam om ze tijdens runtime te vervangen.
- De CDATA sectie binnen de URL wordt gebruikt. Dergelijke speciale tekens zoals & blijven behouden.
Eenmaal opgeslagen en gepubliceerd, hebt u toegang tot de API vanuit externe applicaties, net als onze andere REST API's met eindpunten. Kijk naar de URL hieronder. We noemen de API met de naam van de API krijg_weer. Je hebt toegang tot de uiteindelijke XML via: hier .
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Een belangrijke opmerking is dat u elk API-domein op de witte lijst moet zetten onder API-instellingen.
Je hebt ook toegang tot deze API via Vtiger Javascript API's, en we zullen je vertellen hoe je dit kunt doen. Daarvoor willen we op de detailpagina een widget maken om de weersinformatie te tonen.
Hiervoor gaan we naar Module Designer en selecteren Contacten en voegen een TAP-script toe.
Stap 2: Een nieuwe Weer-widget toevoegen met behulp van de Module Designer
In deze stap zullen we,
- Voeg de widget toe op de detailpagina
- Voeg een visuele component toe voor de widget – Kaart
- Voeg een pop-upmodel en beheerdersinstellingen toe
Laten we beginnen.
De widget toevoegen
Om een widget in detailpagina toe te voegen, hebben we javascript-API's beschikbaar gemaakt VTAP.Component.Registreren.
Dit helpt u bij het definiëren van het type knop, widget of pictogram dat u aan een bepaalde pagina kunt toevoegen.
Bijvoorbeeld:
- Om een knop op de lijstpagina toe te voegen, gebruikt u "LIST_BASIC_BUTTON"
- Om een widget in detailpagina toe te voegen, gebruik "DETAIL_SUMMARY_WIDGET"
Voor een volledige lijst van dergelijke haken, klik op hier.
Om te bepalen hoe de widget eruit moet zien, moeten we een component toevoegen met de vereiste HTML. In dit geval gaan we naar de component WeatherWidgetContents.
In Vtiger is een component de basis voor elke UI-interface zoals widgets, knoppen, enz. Het basisskelet van een component is gedefinieerd hier.
De component WeatherWidgetContents doet de volgende dingen:
- Roep de openweathermap API get_weather aan, die we hebben gemaakt in API Designer.
- Laad enkele basisgegevens zoals de huidige tijd, zonsopgang en zonsondergang, temperatuur en algemene voorspelling.
- Laad Open Street en toon de stad op de kaart.
Om de structuur van een Vtiger-component te begrijpen, hebt u een beetje kennis nodig van de Vue-component omdat ons VTAP-platform erop is gebouwd.
Beschouw het onderstaande voorbeeld. Hier noemen we de krijg_weer API, die we hebben toegevoegd in API Designer (binnen de gemaakte functie). VTAP.Detail.Record() Javascript API geeft de recorddetails. We zullen toegang krijgen tot de gegevens van het veld Contacten mailing stad om toegang te krijgen tot weersdetails.
Zodra de gegevens zijn ontvangen, gebruiken we de weergegevens in de sjabloon om ze weer te geven met behulp van componentspecifieke functies die in methoden zijn gedefinieerd.
Wij gebruiken VTAP.CustomApi.Get API om gegevens van openweathermap.org op te halen door te bellen krijg_weer API geschreven in API Designer. Wijs het antwoord toe aan een gegevensvariabele zodat het toegankelijk is door:
- Een componentmethode voor verwerking
- Sjabloon voor weergave.
Veel hulpfuncties zijn geschreven in methoden om tijd en temperatuur in een leesbaar formaat weer te geven.
U kunt de code zien hier.
Dit is hoe het eruit zou zien als u het script eenmaal opslaat en publiceert en een contactpersoon opent die een poststad heeft. Maar vind je dit niet een beetje saai? Waarom voeg je geen kaart toe?
- De visuele component toevoegen - Kaart
Laten we in dit voorbeeld een OpenStreet-kaart toevoegen en de poststad op de kaart weergeven.
Om de Open Street-kaart toe te voegen, moeten we eerst het bibliotheekbestand opnemen. De Javascript-bibliotheek in VTAP maakt het mogelijk om elke bibliotheek in de runtime op te nemen met behulp van VTAP.Resource.Vereist API.
U kunt deze bibliotheken opnemen bij het registreren van de detailwidget zelf.
Nu moeten we de kaart weergeven in WeatherWidgetContent. Begin met het toevoegen van een tijdelijke aanduiding in de sjabloon en laad deze na het ophalen van gegevens van de get_weather API met de coördinaten. U kunt het volledige script uit onze voorbeelden halen hier en bekijk het in actie.
Stel nu dat u dit als een uitbreidingsmodule wilt vrijgeven en dat elke klant dit wil installeren en zijn eigen openweathermap.org API-sleutel wil gebruiken. Hiervoor kunnen we klantgegevens opslaan met behulp van onze javascript store-API's, die toegankelijk zijn in API Designer met behulp van placeholder variabelen.
- Een pop-upmodel en beheerdersinstellingen toevoegen
Laten we een kleine modale pop-up maken die alleen beheerders kunnen openen en de API-sleutel kunnen opslaan in onze gegevensopslag. Registreer eerst een component om de instellingen op de lijstpagina weer te geven.
Dit is hoe het eruit zou zien op de lijstpagina.
- Gegevensopslag in Vtiger
We zullen gebruiken VTAP.AppData API's om hun API-sleutel op te slaan en op te halen. Merk op dat we weather_apikey gebruiken als een sleutel om op te slaan, en dit is toegankelijk in API Designer met $apps.$app.Contacts.weather_apikey.
U hebt toegang tot de volledige WeatherSettings-code via: hier.
Na het gebruik van de VTAP-opslaggegevens-API voor het opslaan van de API-sleutel, kunnen we de API Designer get_weather-definitie wijzigen, zoals hieronder wordt weergegeven. We vervangen de directe sleutelwaarde door: $apps.$app.Contacten.weather_apikey.
U bevindt zich nu in de staat waarin u uw extensie op onze marktplaats kunt publiceren, aangezien u de API-sleutel voor elke klant configureerbaar hebt gemaakt.
Voor overige vragen kunt u een e-mail sturen naar: [e-mail beveiligd].
Meld u aan voor de ontwikkelaarseditie hier.
