Eftersom data är en väsentlig del av vårt dagliga liv, syftar Vtiger till att göra data lättillgänglig, även utanför CRM.
En av de viktigaste funktionerna i Vtiger Application Platform (VTAP) är dess förmåga att överföra nödvändig data från CRM till var som helst och vice versa. Och kombinerar VTAP: er Modul Designer verktyg, vilket möjliggör anpassning av UI, med en API Designer som kan ansluta till externa applikationer har öppnat en värld av möjligheter.
För att komma ihåg talade vi om VTAP -plattformen i våra tidigare bloggar.
- Module Designer -verktyget hjälper dig att anpassa ditt användargränssnitt
- API Designer -verktyget hjälper dig att bygga anpassade REST -API: er
I den här bloggen kommer vi att diskutera hur vi kan ansluta till andra applikationer som stöder REST API: er och visa data inuti Vtiger UI. För detta kommer vi att använda:
- API Designer för att ansluta och hämta data från externa appar
- Modul Designer -verktyget för att lägga till widget -gränssnitt
Fallstudie: Få väderinformation för en kontakts plats och visa detaljerna i kontaktens post.
Låt oss ta en titt på hur vi kan få väderinformation för en kontakt och visa den inuti en widget i kontaktens detaljsida. openweathermap.org ger ett gratis väder -API. Du kan registrera dig och få API -nyckeln för att komma åt detaljer över 200,000 XNUMX städer.
Så här skulle det se ut i kontaktposten i Vtiger CRM när du har anslutit till OpenWeatherMap.
Låt oss börja med API Designer.
Steg 1: Använd API Designer för att ansluta och hämta data från openweathermap.org.
I detta steg kommer vi att:
- Skapa ett API med API Designer
- Definiera HTTP -baserade slutpunkter
- Hur skapar jag ett API med API Designer?
Låt oss först skapa ett API för att hämta väderinformation från openweathermap.org i API Designer. Följ dessa steg:- Gå till Meny> Plattform> API Designer.
- Klicka på Lägg till API.
- Lägg till ett namn, till exempel 'get_weather'. Här är namngivningskonventionen avgörande eftersom vi kommer att använda den för att ansluta från våra javascript -API: er.
- Välj modulen Kontakter eftersom det är där vi bygger väderwidgeten.
- Definiera HTTP -baserade slutpunkter
Alla våra API: er är beroende av VADL(Vtiger Application Definition Language), som är löst baserat på XML och låter dig åberopa alla HTTP-baserade slutpunkter.
Vi måste definiera strukturen för en HTTP -slutpunkt, som vanligtvis innefattar en typ av förfrågan som GET, POST, PUT, DELETE, URL -slutpunkt, begäranhuvud och autentisering som grundläggande autentisering etc. För att komma åt en stad väderdetaljer från openweathermap.org har de definierat en GET -begäran med nedanstående slutpunkt.
FÅ api.openweathermap.org/datum/2.5/weather?q= {stad namn} & appid = {API nyckel}
Vi måste kartlägga detta till VADL, och det skulle vilja ha något liknande exemplet nedan:
Låt mig förklara denna process steg för steg:
- Vilken HTTP som helst API läggs under a vila nod med ett obligatoriskt metodattribut som definierar typen av begäran HTTP (GET, POST, etc.).
- Inuti det använder vi URL att nå slutpunkten för API: et.
- Lägg märke till att det finns attribut med a URL nod. Dessa attribut är en dynamisk del av slutpunkten och används för att ersätta dem med värden vid körning.
- Alla attribut med ett dynamiskt värde (förbered med @) accepteras när de skickas i begäran. vi har använt @city här.
- För API -nyckeln kan du klistra in värdet från openweathermap. För alla attribut, se till att du förbereder dig $ med attributnamn för att ersätta dem vid körning.
- Ocuco-landskapet CDATA avsnitt inne i webbadressen används. Sådana specialtecken som & behålls.
När du väl har sparat och publicerat kan du komma åt API: et från externa applikationer precis som våra andra REST API: er med slutpunkter. Titta på webbadressen nedan. Vi kallar API: et med namnet på API: t få_väder. Du kan komma åt sista xml från här. också.
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
En viktig anmärkning är att du bör vitlista varje API -domän under API -inställningar.
Du kan också komma åt detta API från Vtiger Javascript API: er, så berättar vi hur du kan göra det. Innan dess vill vi skapa en widget på detaljsidan för att visa väderinformation.
För detta går vi till Module Designer och väljer Kontakter och lägger till ett TAP -skript.
Steg 2: Lägga till en ny väderwidget med hjälp av Module Designer
I detta steg kommer vi,
- Lägg till widgeten i detaljsida
- Lägg till en visuell komponent för widgeten - Karta
- Lägg till en popup -modell och admininställningar
Låt oss börja.
Lägger till widgeten
För att lägga till en widget i detaljsida har vi avslöjat javascript -API: er VTAP.Component.Register.
Detta hjälper dig att definiera vilken typ av knapp, widget eller ikon som du kan lägga till på en viss sida.
Till exempel:
- För att lägga till en knapp på listans sida, använd “LIST_BASIC_BUTTON"
- Om du vill lägga till en widget i detaljsida använder du "DETAIL_SUMMARY_WIDGET"
För en fullständig lista över sådana krokar, klicka här..
För att definiera hur widgeten ska se ut måste vi lägga till en komponent som har nödvändig HTML. I det här fallet går vi till komponenten WeatherWidgetContents.
I Vtiger är en komponent basen för alla UI -gränssnitt som widgets, knappar, etc. En komponents grundläggande skelett definieras här..
WeatherWidgetContents -komponenten kommer att göra följande:
- Ring openweathermap API get_weather, som vi skapade i API Designer.
- Ladda några grundläggande detaljer som aktuell tid, soluppgång och solnedgång, temperatur och allmän prognos.
- Ladda Open Street och visa staden på kartan.
För att förstå strukturen för en Vtiger -komponent behöver du lite kunskap om Vue -komponent som vår VTAP -plattform är byggd på den.
Tänk på exemplet nedan. Här kallar vi för få_väder API, som vi lade till i API Designer (inuti den skapade funktionen). VTAP.Detail.Record () Javascript API ger postinformation. Vi kommer att få åtkomst till fältinformationen för utskick av kontakter för att få tillgång till väderinformation.
När data väl har tagits emot använder vi väderdata i mallen för att återge dem med hjälp av komponentspecifika funktioner som definieras inuti metoder.
Vi använder VTAP.CustomApi.Get API för att hämta data från openweathermap.org genom att ringa få_väder API skrivet i API Designer. Tilldela svaret till en datavariabel så att den kan nås av:
- En komponentmetod för bearbetning
- Mall för visning.
Många hjälpfunktioner är skrivna i metoder för att visa tid och temperatur i ett läsbart format.
Du kan se koden här..
Så här skulle det se ut när du sparar och publicerar manuset och öppnar en kontakt som har en postadress. Men tycker du inte att det här verkar lite tråkigt? Varför inte lägga till en karta?
- Lägga till den visuella komponenten - karta
I det här exemplet, låt oss lägga till en OpenStreet -karta och visa postadressen på kartan.
För att lägga till Open Street -kartan måste vi först inkludera dess biblioteksfil. Javascript -biblioteket i VTAP möjliggör inkludering av alla bibliotek i körtiden med VTAP.Resource.Require API.
Du kan inkludera dessa bibliotek när du registrerar själva detaljwidgeten.
Nu måste vi visa kartan i WeatherWidgetContent. Börja med att lägga till en platshållare i mallen och ladda den efter att ha fått data från get_weather API med koordinaterna. Du kan få det fullständiga manuset från våra exempel här. och se den i aktion.
Låt oss nu säga att du vill släppa detta som en tilläggsmodul, och varje kund vill installera detta och använda sin egen openweathermap.org API -nyckel. För detta kan vi lagra kunddata med hjälp av våra javascript store API: er, som kan nås i API Designer med platshållarvariabler.
- Lägger till en popup -modell och admininställningar
Låt oss skapa en liten modal popup som bara administratörer kan komma åt och lagra API -nyckeln i vårt datalager. Registrera först en komponent för att visa inställningarna på listans sida.
Så här skulle det se ut på listan.
- Datalagring i Vtiger
Vi kommer använda VTAP.AppData API: er för att lagra och hämta sin API -nyckel. Lägg märke till att vi använder weather_apikey som en nyckel för att lagra, och detta kan nås i API Designer med $ apps. $ App.Contacts.weather_apikey.
Du kan komma åt hela WeatherSettings -koden från här..
Efter att ha använt VTAP store data API för att lagra API -nyckeln kan vi ändra API Designer get_weather -definitionen enligt nedan. Vi ersätter det direkta nyckelvärdet med $ appar. $ app.Contacts.weather_apikey.
Nu är du i det tillstånd där du kan publicera ditt tillägg till vår marknadsplats eftersom du har gjort API -nyckeln konfigurerbar för varje kund.
För andra frågor, skicka ett mail till [e-postskyddad].
Registrera dig för utvecklarutgåvan här..
