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.

 

 

Create an LWC

 

Create an LWC using the below SFDX command

 

Use the below soapapiex.html code 

 

 

Use the below soapapiex.js code 

 

 

Use the below soapapiex.js-meta.xml code

 

 

 

Push the changes to scratch org using the below command

 

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

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.

 

 

Create an Aura Component 

 

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

Here is the controller.js code

 

 

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

 

Get Current User Details in Lightning Web Components

Let’s discuss here how to get the current user details in lightning web components. To access the current user Id, import @salesforce/user/Id in a component’s JavaScript class. Note that @salesforce/user/ cannot be imported by itself; you must indicate the property that you want to import. For the User standard object, only the Id field is available.

 

Option 1: Using Wire Service

You can able to get the current user details using getRecord wire adapter and you can able to pass the user id from the imported modules. Create a new lightning web component using the below SFDX command

Use the below userinfoexample.html code

Use the below userinfoexample.js code

 

Use the below userinfoexample.js-meta.xml

 

Push changes and you can able to see the user details

Option 2: – Using apex class

you can able to get the user detail even using the apex class .create an Apex class that returns the user details as shown below

 

update the userinfoexample.html with below code

 

 

update userinfoexample.js code as shown below

Push changes and you can able to see the current logged in user details

 

Using Custom Labels In Lightning Web Components

Let’s discuss here how to use the Custom labels in the lightning web components. Custom labels are text values stored in Salesforce that can be translated into any language that Salesforce supports. Use custom labels to create multilingual applications that present information (for example, help text or error messages) in a user’s native language. To create custom labels, from Setup, enter Custom Labels in the Quick Find box, then select Custom Labels. To import a label in a Lightning Web Component JavaScript file, use @salesforce/label in an import statement.

1.Create custom labels

To create custom labels, from Setup, enter Custom Labels in the Quick Find box, then select Custom Labels. Here are the custom labels created. we will see how to use the lightning web components

 

 

2. Use Custom Labels in LWC 

To import a label in a Lightning Web Component JavaScript file, use @salesforce/label in an import statement.

The label-reference is the label name and must include a namespace in the format namespace.labelName.create a lightning web component using the following SFDX command

 

Use the below labelexamples.html.To use the labels in the template, use the same {property} syntax that you use to reference any JavaScript property.

 

Use the below labelexamples.js code.

 

 

Use the below labelexamples.js-meta.xml

 

 

 

Push changes and add this component to the page layout and you can able to see labels are coming from the custom label as shown below

 

Share JavaScript Code Between LWC and Aura

Let’s discuss here how to share the code between the lightning web component and Aura web components. To share JavaScript code between Lightning web components and Aura components, put the code in an ES6 module.

1. Create the ES6 module in your Lightning Web Components development environment.
2. Reference the module in a Lightning web component’s JavaScript file.
3. Reference the module in an Aura component.

Example – Create a Shared Code 

To share code between components, create an ES6 module and use the standard export statement to export the functionality that your module exposes. Your module can use the standard import statement to use other shared modules. Let’s create an ES6 module and see how it’s used in a Lightning web component. Create a folder for the utils module in the LWC folder in the lightning web component project directory. we will be using this utils code in between LWC and Aura Components.

The folder looks like below.

 

Create a utils.js file in the utils folder. This file is an ES6 module  that is export the isFunction

The utils module exports an isFunction() function that returns whether the provided parameter is a function.

Create a utils.js-meta.xml configuration file for the utils module.

 

 

Use Shared Code in LWC

Now you need to import the above create ES6 module utils .create a lightning web component using this command

 

Use this libcaller.html code.

Use this libcaller.js code

The c-libcaller component imports the utils module and calls the isFunction function exported by the module. The argument passed into isFunction is a function so the result is set to true. The below code shows how to import the utils code

The above below code shows how to call the imported function

 

Use this libcaller.js-meta.xml code

 

 

Push the changes to scratch org and add to layout for testing. When you click the Check Type button it will call then imported isFucntion module and set the value to the result property.

 

Use Shared Code in Aura 

Using the shared code in Aura is straight and you can able to call the module code like component and pass the aura:id

Create a libcallerAura.cmp .

The libcallerAura Aura component includes a reference to the c:utils ES6 module. We added an aura:id so that we can get a reference to the module in JavaScript code.

 

Create a libcallerAuraController.js file.

 

 

The component’s controller uses cmp.find(‘utils’) to match the aura:id in markup and get a reference to the module. The utils ES6 module exports isFunction(), which the Aura component calls. The argument passed into isFunction is a function so result is set to true. Click the button and confirm that the Aura component calls the function exported by the ES6 module and set the attribute to true as shown below.