diff --git a/abstractapi/EnrichWidget.js b/abstractapi/EnrichWidget.js index d26615c0ffe6cd7fd31267c8563aeebf0b1200c5..1e2a34dcefe277b1ac4bfe86f811912643462339 100644 --- a/abstractapi/EnrichWidget.js +++ b/abstractapi/EnrichWidget.js @@ -1,16 +1,22 @@ var Accounts_Component_EnrichWidget = VTAP.Component.Core.extend({ + //all component registrations are done in created function, they are the entry points for VTAP components created() { + //Register for detail page widget, and show load AbstractAPIWidget component for displaying the component contents. Last parameter forces the widget to load only for Accounts module. VTAP.Component.Register('DETAIL_SUMMARY_WIDGET', {}, VTAP.Component.Load('AbstractAPIWidget', 'Accounts'), {module:'Accounts'}); + //Register to save API key for abstractapi.com, we will show this settings link to only admins in list views. VTAP.Component.Register('LIST_ADVANCED_SETTING', {name:'Abstract API', 'clickHandler':this.abstractAPIPopup}, '', {module:'Accounts'}); }, - + //all functions are placed under methods property. methods : { + //function called when admin clicks on list view settings to store api key abstractAPIPopup() { + //show a popup modal and load AbstractSettings component. + //AbstractSettings component is defined below. VTAP.Utility.ShowPopup({ component : VTAP.Component.Load('AbstractSettings', 'Accounts'), componentData : {}, @@ -23,8 +29,10 @@ var Accounts_Component_EnrichWidget = VTAP.Component.Core.extend({ }); +//Component to show popup to store and display api key var Accounts_Component_AbstractSettings = VTAP.Component.Core.extend({ + //store api key in component data property data() { return { apikey : '' @@ -32,6 +40,8 @@ var Accounts_Component_AbstractSettings = VTAP.Component.Core.extend({ }, created() { + + //retrieve the store api key and use it to display in the popup. VTAP.AppData.Get('Accounts', {data_key:'abstract_apikey'}, (error, response) => { if(response) { @@ -42,9 +52,11 @@ var Accounts_Component_AbstractSettings = VTAP.Component.Core.extend({ methods : { + //save the api key save() { if(this.apikey != '') { + //store the user has entered in VTAP data store, this datakey can be used in API Designer to access api's VTAP.AppData.Save('Accounts', {data_key:'abstract_apikey', data_value:this.apikey}, (error, response) => { if(response) VTAP.Utilty.ShowSuccessNotification('updated key'); }) @@ -53,6 +65,8 @@ var Accounts_Component_AbstractSettings = VTAP.Component.Core.extend({ } }, + //html to display popup modal. + //we use bootstrap vue components. template : `
@@ -65,6 +79,8 @@ var Accounts_Component_AbstractSettings = VTAP.Component.Core.extend({ ` }) + +//Detail view summary widget component, displays the component and retrieve the data from Abstractapi.com var Accounts_Component_AbstractAPIWidget = VTAP.Component.Core.extend({ props : ['record'], @@ -76,6 +92,7 @@ var Accounts_Component_AbstractAPIWidget = VTAP.Component.Core.extend({ methods : { + //function called when user clicks on to get Enrich data getEnrichData() { if(this.record.email_domain == '') { @@ -83,6 +100,7 @@ var Accounts_Component_AbstractAPIWidget = VTAP.Component.Core.extend({ return; } + //Call APi Designer Api pubilshed and use the data to display in html. VTAP.CustomApi.Get('get_abstractapi_company_enrich', {domain: this.record.email_domain}, (error, response) => { if(response && response.content) { this.enrichData = JSON.parse(response.content);