How to Call SOAP Callouts In Lightning Web Components

Let’s discuss here how to use the soap API callouts form the lightning web components(lwc). 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 LWC

 

Create an LWC using the below SFDX command

sfdx force:lightning:component:create --type lwc --componentname soapapiex --outputdir force-app\main\default\lwc

 

Use the below soapapiex.html code 

 

<template>
    <lightning-input type="number" label="Input 1" name="Input 1" onchange={handleChange}></lightning-input>
    <lightning-input type="number" label="Input 2" name="Input 2" onchange={handleChange}></lightning-input>

    <lightning-button variant="brand" label="+" title="Sum" onclick={handleSum} class="slds-m-left_x-small"></lightning-button>
    <lightning-button variant="brand" label="-" title="Sub" onclick={handleSub} class="slds-m-left_x-small"></lightning-button>
    <lightning-button variant="brand" label="*" title="Mul" onclick={handleMul} class="slds-m-left_x-small"></lightning-button>

    Result :- {result}

</template>

 

Use the below soapapiex.js code 

 

import {
    LightningElement,
    wire,
    api,
    track
} from 'lwc';
import getSum from '@salesforce/apex/soapcallouts.getSum';
import getSub from '@salesforce/apex/soapcallouts.getSub';
import getMul from '@salesforce/apex/soapcallouts.getMul';


export default class Soapapiex extends LightningElement {
    @track inp1 = 0;
    @track inp2 = 0;
    @track result = 0;
    @track error;

    handleChange(event) {
        console.log('label values --->>' + event.target.label);

        if (event.target.label === 'Input 1') {
            this.inp1 = event.target.value;
        }
        if (event.target.label === 'Input 2') {
            this.inp2 = event.target.value;
        }
    }

    handleSum(event) {
        getSum({
                val1: this.inp1,
                val2: this.inp2
            })
            .then(result => {
                this.result = result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.result = undefined;
            });

    }
    handleSub(event) {
        getSub({
                val1: this.inp1,
                val2: this.inp2
            })
            .then(result => {
                this.result = result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.result = undefined;
            });
    }

    handleMul(event) {
        getMul({
                val1: this.inp1,
                val2: this.inp2
            })
            .then(result => {
                this.result = result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.result = undefined;
            });
    }

}

 

Use the below soapapiex.js-meta.xml code

 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

 

 

Push the changes to scratch org using the below command

sfdx force:source:push --forceoverwrite

 

You can able to see the calculator result as shown below.