Call Apex Methods In Lightning web components
Let’s discuss here how to call the apex class from the Lightning web components. Lightning web components can import methods from Apex classes into the JavaScript classes using ES6 import. Once after importing the apex class method you can able call the apex methods as functions into the component by calling either via the wire service or imperatively. Before you use an Apex method, make sure that there isn’t an easier way to get the data. See whether a base Lightning component, like lightning-record-form, lightning-record-view-form, or lightning-record-edit-form works for your use case. If they don’t give you enough flexibility, use a wire adapter like getListUi or getRecordUi.
Refer this link for how to configure the Salesforce dx for web components
Import Syntax
You can able use default export syntax to import an Apex method via the @salesforce/apex scoped module into JavaScript controller class. The Syntax looks like below.
|
1 |
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod'; |
apexMethod—The imported symbol that identifies the Apex method.
Namespace—The namespace of the Salesforce organization. Specify a namespace unless the organization uses the default namespace (c), in which case don’t specify it.
Classname—The name of the Apex class.
Create Apex Class
In this example, we will be getting account data and show it into the UI. Create an apex class using SFDX create apex class command.
|
1 |
sfdx force:apex:class:create -n GetAccountData -d force-app/main/default/apex |
Here is the apex class. To expose an Apex method to a Lightning web component, the method must be static and either global or public. Annotate the method with @AuraEnabled
|
1 2 3 4 5 6 |
public with sharing class GetAccountData { @AuraEnabled(cacheable=true) public static List<Account> getAccountList() { return [SELECT Id, Name,Type,Rating,Phone FROM Account]; } } |
Now you can able to call the apex class in Lightning web component using these different ways.
- Wire a property
- Wire a function
- Call a method imperatively
Wire an Apex Method to a Property
If an Apex method is annotated with @AuraEnabled(Cacheable=true), you can invoke it from a component via the wire service. You can @wire a property or a function. Here is the syntax
|
1 2 3 |
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod'; @wire(apexMethod, { apexMethodParams }) propertyOrFunction; |
Create a Lightning web component using below SFDX commands
|
1 |
sfdx force:lightning:component:create --type lwc -n LWCWireEx -d force-app/main/default/lwc |
Here is the LWCWireEx.html markup for the lightning web components.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <lightning-card title="Apex Class Example" icon-name="custom:custom63"> <div class="slds-m-around_medium"> <template if:true={accounts.data}> <template for:each={accounts.data} for:item="acc"> <p key={acc.Id}>{acc.Name}</p> </template> </template> </div> </lightning-card> </template> |
Here is the LWCWireEx.js class
|
1 2 3 4 5 6 |
import { LightningElement, wire } from 'lwc'; import getAccountList from '@salesforce/apex/GetAccountData.getAccountList'; export default class LWCWireEx extends LightningElement { @wire(getAccountList) accounts; } |
Here is the LWCWireEx.js-meta.xml markup.
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>false</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.
Wire an Apex Method to a Function
Now let’s look at how to wire an apex method to function.we will be updating the same code here to operate the apex method as function.
Update the LWCWireEx.js class as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { LightningElement, wire,track } from 'lwc'; import getAccountList from '@salesforce/apex/GetAccountData.getAccountList'; export default class LWCWireEx extends LightningElement { @track accounts; @track error; @wire(getAccountList) wiredAccounts({ error, data }) { if (data) { this.accounts = data; } else if (error) { console.log(error); this.error = error; } } } |
update the LWCWireEx.html markup as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <lightning-card title="Apex Wire To Function Example" icon-name="custom:custom63"> <div class="slds-m-around_medium"> <template if:true={accounts}> <ul> <template for:each={accounts} for:item="account"> <li key={account.Id}> {account.Name} </li> </template> </ul> </template> <template if:true={error}> {error} </template> </div> </lightning-card> </template> |
Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.
Call an Apex Method Imperatively
Now let’s see here how to call apex method imperatively. Create a new Lightning web component using the below SFDX command
|
1 |
sfdx force:lightning:component:create --type lwc -n ImperativEx -d force-app/main/default/lwc |
Use the below ImperativEx.html code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <lightning-card title="Apex Imperative Method Example"> <div class="slds-m-around_medium"> <p class="slds-m-bottom_small"> <lightning-button label="Load Accounts" onclick={handleLoad}></lightning-button> </p> <template if:true={accounts}> <template for:each={accounts} for:item="account"> <p key={account.Id}>{account.Name}</p> </template> </template> <template if:true={error}> {error} </template> </div> </lightning-card> </template> |
Use the below ImperativEx.js class code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { LightningElement, wire,track } from 'lwc'; import getAccountList from '@salesforce/apex/GetAccountData.getAccountList'; export default class ImperativEx extends LightningElement { @track accounts; @track error; handleLoad() { getAccountList() .then(result => { this.accounts = result; }) .catch(error => { this.error = error; }); } } |
Use the below ImperativEx.js-meta.xml class 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="hello"> <apiVersion>45.0</apiVersion> <isExposed>false</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
push the changes to scratch org and add the lightning web component to the record page and you can able to see the below result when you click on the button .
