How to Call SOAP Callouts In Lightning Components

Let’s discuss here how to use the soap API callouts form the Aura lightning components. Apex can also make callouts to SOAP web services using XML. Here we will be using the simple calculator WSDL from the trailhead. please refer to this link for WSDL 

 

Use WSDL2Apex to Generate Apex Code

Use WSDL2Apex to Generate the apex code from the WSDL.

  1. From Setup, enter Apex Classes in the Quick Find box, then click Apex Classes.
  2. Click Generate from WSDL.
  3. Click Choose File and select the downloaded calculator.xml file.
  4. Click Parse WSDL.

It will generate the apex class as shown below.C lick Generate Apex code. The final page of the wizard shows the generated classes, along with any errors.

 

 

Remote Site Settings 

You need to configure authorize endpoint in the remote site settings. Authorize endpoint URL of the web service callout is https://th-apex-soap-service.herokuapp.com 

 

 

Create An Apex Class

Create an apex class with the below code. This class is calling SOAP callouts.

 

public with sharing class soapcallouts {

@AuraEnabled(cacheable=true)
public static Double getSum(Double val1 ,Double val2 ) {
        calculatorServices.CalculatorImplPort calculator =new calculatorServices.CalculatorImplPort();
        return   calculator.doAdd(val1,val2);
}
@AuraEnabled(cacheable=true)
public static Double getSub(Double val1 ,Double val2 ) {
        calculatorServices.CalculatorImplPort calculator =new calculatorServices.CalculatorImplPort();
        return   calculator.doSubtract(val1,val2);
}
@AuraEnabled(cacheable=true)
public static Double getMul(Double val1 ,Double val2 ) {
        calculatorServices.CalculatorImplPort calculator =new calculatorServices.CalculatorImplPort();
        return   calculator.doMultiply(val1,val2);
}


}

 

Create an Aura Component 

 

create an Aura component with the below code. Here is the .cmp markup

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="soapcallouts">
    <aura:attribute name="inp1" type="Double" default="0" />
    <aura:attribute name="inp2" type="Double" default="0"/>
    <aura:attribute name="res" type="Double" default="0"/>
    
    <lightning:input type="number" name="inp1" label="Enter Input 1" value="{! v.inp1 }"/>
    <lightning:input type="number" name="inp2" label="Enter Input 2" value="{! v.inp2 }"/>
    <lightning:button variant="brand" label="+" title="Sum" onclick="{! c.handleSum }" />
    <lightning:button variant="brand" label="-" title="Sub" onclick="{! c.handleSub }" />
    <lightning:button variant="brand" label="*" title="Mul" onclick="{! c.handleMul }" />
    
    Result - {!v.res}
    
    
</aura:component>

Here is the controller.js code

 

({
    handleSum : function(component, event, helper) {
        var action = component.get("c.getSum");
        action.setParams({ val1 : component.get("v.inp1") ,val2 : component.get("v.inp2")   });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.res" , response.getReturnValue()) ; 
            }
        });
        $A.enqueueAction(action);
        
    },
    handleSub : function(component, event, helper) {
        var action = component.get("c.getSub");
        action.setParams({ val1 : component.get("v.inp1") ,val2 : component.get("v.inp2")   });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.res" , response.getReturnValue()) ; 
            }
        });
        $A.enqueueAction(action);
        
    },
    handleMul : function(component, event, helper) {
        var action = component.get("c.getMul");
        action.setParams({ val1 : component.get("v.inp1") ,val2 : component.get("v.inp2")   });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.res" , response.getReturnValue()) ; 
            }
        });
        $A.enqueueAction(action);
        
        
    }
})

 

Add this component to the page layout and you can able to see the output as shown below