Integrate DOTS Global Address Complete into Lightning Component (frontend call)

Now that the visual part of our lightning component is in place, we’ll add the javascript that will handle the functions we defined in the previous step. Below is the component controller code and the helper code that we’ll use.

DOTSGlobalAddressCompleteControllerJS.js

({
    //NOTE: The below URLs are biased towards the USA with the query parameter '&bl=USA' other country codes can be added here or this query parameter can be removed to have 
    //the service suggest addresses from all available countries
    
    //This will return an array of suggested addresses for the user
    getSuggestions : function(component, event, helper) {
        var url = 'https://trial.serviceobjects.com/AC/Predict?id=YourLicenseKeyHere&q='+component.get('v.AddressOneIN')+'&bl=USA&al=&l=7&pl=en';
        helper.makeAjaxRequest(component, url, 'getSuggestions');
    },
    
    //Returns an array of all the available units at an address
    getUnits : function(component, event, helper) {
        var selectedItem = event.currentTarget;
        var placeid = selectedItem.dataset.placeid;
        var url = 'https://trial.serviceobjects.com/AC/Units?id=YourLicenseKeyHere&q=' + placeid + '&bs=USA&al=&l=7&pl=en';
        helper.makeAjaxRequest(component, url, 'getUnits');
    },
    
    //Returns the parsed out details of a users selected address
    getDetails : function(component, event, helper) {
        var selectedItem = event.currentTarget;
        var placeid = selectedItem.dataset.placeid;
        var url = 'https://trial.serviceobjects.com/AC/Select?id=YourLicenseKeyHere&q=' + placeid;
       helper.makeAjaxRequest(component, url, 'getDetails');
    }
})

DOTSAddressCompleteJSHelper.js

({
    //Makes the call to the JS Controller based on the method
    makeAjaxRequest : function(component, url, method) {
        var utils = component.find('utils');
        utils.callAjax("GET", url, true,
                        function(xmlhttp){
                            console.log('xmlhttp:', xmlhttp);
                            if (xmlhttp.status == 200) {
                                //This will return a list of suggestions based on a user input
                                if(method == 'getSuggestions')
                                {
                                    var resp = JSON.parse(xmlhttp.responseText);
                                    component.set('v.Suggestions',resp.Addresses); 
                                }
                                //This will return the list of unit numbers associated with an address.
                                if(method == 'getUnits')
                                {
                                    var resp = JSON.parse(xmlhttp.responseText);
                                    component.set('v.Suggestions',resp.Addresses); 
                                }
                                
                                //This will get all the parsed out pieces of information from a users selected address.
                                if(method == 'getDetails')
                                {
                                    var resp = JSON.parse(xmlhttp.responseText);
                                    component.set('v.AddressOneIN',resp.AddressInfos[0].Address1); 
                                    component.set('v.AddressTwoIN',resp.AddressInfos[0].Address2); 
                                    component.set('v.AddressThreeIN',resp.AddressInfos[0].Address3); 
                                    component.set('v.UnitIN',resp.AddressInfos[0].SubPremise); 
                                    component.set('v.LocalityIN',resp.AddressInfos[0].Locality); 
                                    component.set('v.AdministrativeAreaIN',resp.AddressInfos[0].AdminArea); 
                                    component.set('v.PostalCodeIN',resp.AddressInfos[0].PostalCode); 
                                    component.set('v.CountryIN',resp.AddressInfos[0].Country); 
                                    component.set('v.LabelIN',resp.AddressInfos[0].FormattedAddress); 
                                    component.set('v.Suggestions', []); 
                                }
                            }
                            else if (xmlhttp.status == 400) {
                                alert('There was an error 400');
                                alert(xmlhttp.responseText);
                            }else {
                                alert('There was an error not 400');
                                alert(xmlhttp.responseText);
                            }
                        }
                      );
    }
})

DOTSGlobalAddressCompleteJS.css

.suggestions.THIS {
    z-index:1 !important;
    font-size: 15px;
    background-color: white;
    margin-top: 0px !important;
    border-radius: 5px;
    position: absolute;
    border-width: thin;
    border-color: #a9a0a0;
    border-style: solid;
    padding-left: 12px;
    padding-right: 12px;
}

A couple things to note about the code above:

• The three functions in the controller method will call the three different endpoints in the DOTS Global Address Complete service.
  • getSuggestions calls the “Predict” endpoint which will return an array of predictions based on the input sent to it. This endpoint can be biased towards a specific country with the query parameter “&bl=”. Right now, this is biased towards the US but please change it as you see fit.
  • getUnits returns all the available units at a specific address based on placeid which is returned for every address in the ‘Predict” endpoint.
  • getDetails will return the full parsed out information for the user selected address after calling the “Select” endpoint. Like the “Units” endpoint, this will take in the PlaceId that was returned in the list of addresses provided by the “Predict” endpoint.
  • The query parameter “&id=” will hold your API key. Fill this in with your API key!
• The DOTSGlobalAddressCompleteJSHelper.js file will make the HTTP GET call to the service by making an Ajax request. Based on the method used, the helper will perform different actions:
  • If the getSuggestions method is called, it will set the “v.Suggestions” list to the list of addresses that were returned from the Predict endpoint.
  • If the getUnits method is called, it will also set the “v.Suggestions” component to the list of addresses that were returned from the “Units” endpoint.
  • Finally, if the method was getDetails, then the component will fill in all the parsed out values from the Predict endpoint into the respective input elements.

All our code is in place! Let’s add the lightning component to a page so we can see it in action.