Added code comments for better readability.

abstractapi/EnrichWidget.js

 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 : 
         `<b-modal size="lg" @ok="save()" title="AbstractAPI settings">
             <div class="row">
@@ -65,6 +79,8 @@ var Accounts_Component_AbstractSettings = VTAP.Component.Core.extend({
         </b-modal>`
 })
 
+
+//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);