How to Integrate DOTS Global Address Complete into Lightning Component (server side 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.

DOTSGlobalAddressCompleteController.js

({
    
    //This function will return an array of predicted addresses based on the user input
    getAddressSuggestions : function(component, event, helper){
     
        var input = component.get('v.address1');
        
        //Only search for predictions if the input isn't null or empty
        if(Boolean(input)){           
        
        var params = {
          "input" : input
        } 
        
        //Call the getSuggestions function in the GAC controller. If there are predictions, we'll set the array of addresses returned to the v.predictions list in the component
        helper.callServer(component,"c.getSuggestions",function(response){
            var resp = JSON.parse(response);
            component.set('v.predictions',resp.Addresses);
        },params);
        }
        //If no predictions are returned, v.predictions will be set to an empty list
        else{
            component.set('v.predictions', []);
        }
     
    },
    
    //This function will get additional details about an address that a user clicks.
    getSelectedDetails : function(component, event, helper){ 
 
        var selectedItem = event.currentTarget;
        
        //Get the Index of the selected address so we know which one the user pixed.
        var index = selectedItem.getAttribute("data-row-index");
        
        //Pull back the user's selected address
        var selection = component.get('v.predictions')[index];
        
        
        var addressType = selection.AddressType;
        var placeid = selection.Id;
  
        var params = {
               "placeId" : placeid  
            } 
        
        //If the address type is BuildingNumber, then we'll call the getUnits method to return all the available units for an address
        if(addressType == "BuildingNumber"){
            
            helper.callServer(component,"c.getUnits",function(response){
            var buildingDetails = JSON.parse(response);            
            component.set('v.predictions', buildingDetails.Addresses);         
        }, params);
        }
     else
        {
            //If the user selected a regular address, then we'll call the getDetails function of the GAC controller which will get additional details about the users selected address
            helper.callServer(component,"c.getDetails",function(response){
                var placeDetails = JSON.parse(response);
                
                //This where we do the "autofill" and set the input form values to the values the service found on the use selected address
                component.set('v.address1',placeDetails.AddressInfos[0].Address1);
                component.set('v.city',placeDetails.AddressInfos[0].Locality);
                component.set('v.state',placeDetails.AddressInfos[0].AdminArea);
                component.set('v.zip',placeDetails.AddressInfos[0].PostalCode);
                component.set('v.country',placeDetails.AddressInfos[0].Country);
                
                //Set the predictions List to an Empty Array
                component.set('v.predictions',[]); 
            },params);
        }
    }
})

DOTSAddressCompleteHelper.js

({
    //This will call our GAC class that will make the actual call to the address complete web service. 
    callServer : function(component,method,callback,params) {
        var action = component.get(method);
        if (params) {        
            action.setParams(params);
        }

        action.setCallback(this,function(response) {            
            var state = response.getState();
            if (state === "SUCCESS") { 
                // pass returned value to callback function
                callback.call(this,response.getReturnValue());   
            } else if (state === "ERROR") {
                // generic error handler
                var errors = response.getError();
                if (errors) {
                    console.log("Errors", errors);
                    if (errors[0] && errors[0].message) {
                        throw new Error("Error" + errors[0].message);
                    }
                } else {
                    throw new Error("Unknown Error");
                }
            }
        });
        
        $A.enqueueAction(action);
    }
})

DOTSGlobalAddressComplete.css

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

.address-inputs.THIS{
    z-index:-50!important;
    
}

A couple things to note about the code above:

• In the getAddressSuggestions function, we check the “v.address1” value to ensure we only call the service when the v.address1 value has any input to lookup. If there is input, the function will call the endpoint to get predicted addresses and then set the v.predictions value to the array of addresses that was returned
• getSelectedDetails will either return all the units associated with an address if the building type is equal to “BuildingNumber” or it will call the operation to get the fully parsed out details of the user selected address from the DOTS Address Complete service. If the later occurs, the code will set the component values to be the parsed out and validated returns from the service.
• The callServer function in the helper.js file will call the GAC class that makes the actual call to the DOTS Global Address Complete service. We’ll create the GAC class momentarily.