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.
- From Setup, enter Apex Classes in the Quick Find box, then click Apex Classes.
- Click Generate from WSDL.
- Click Choose File and select the downloaded calculator.xml file.
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
|
1 |
sfdx force:lightning:component:create --type lwc --componentname soapapiex --outputdir force-app\main\default\lwc |
Use the below soapapiex.html code
|
1 2 3 4 5 6 7 8 9 10 11 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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
|
1 2 3 4 5 6 7 8 |
<?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
|
1 |
sfdx force:source:push --forceoverwrite |
You can able to see the calculator result as shown below.
