Call Apex method from Lightning Web Components : Amit Chaudhary

April 04, 2021 April 04, 2021

Call Apex method from Lightning Web Components
by: Amit Chaudhary
blow post content copied from Apex Hours
click here to view original post

In this post we will talk about how to Invoke Apex Controller From Lightning Web Component and how many way we have to call apex class from LWC. Lightning web components can import methods from Apex classes into the JavaScript classes using ES6 import.

import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';

apexMethod -This identifies the Apex method name.
Classname – The Apex class name.
Namespace –The namespace of the Salesforce organization

After importing the apex class method you can call the apex methods as functions into the component by calling either via the wire service or imperatively. To call an Apex method, a Lightning web component can:

Wire a property
Wire a function
Call a method imperatively

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

Wire Property with Apex

As per the wire method writing rules, first we have to import method (apexMethod) from the Apex Class.

import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';

Then, property is wired to apexMethod in below format :-

@wire(apexMethod, { apexMethodParams }) propertyOrFunction;

Now we can get the data using {property.data} & error using {property.error} in html file.

Use Case : Business want to create one page to search all account records base on account name.

Let’s see how we can create one Lightning web component to achieve this requirement

First we need to create one apex class with @AuraEnabled

public with sharing class AccountService {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts(String strAccountName) {
  String strKey = '%'+strAccountName+'%';
   List<Account> accList = [SELECT Id,Name,AccountNumber FROM Account WHERE name like :strKey ];
   return accList;
 }
}

Then create one Lightning Web component “searchAccount” and then modify the “searchAccount.js” file to import the apex method “getAccounts” from apex class.

import { LightningElement, wire, track } from 'lwc';
import getAccounts from'@salesforce/apex/AccountService.getAccounts';
export default class SearchAccount extends LightningElement {
  @track searchKey;
  @wire (getAccounts,{strAccountName: '$searchKey'}) accounts;
  handleKeyChange(event){
    this.searchKey = event.target.value;
  }
}

During passing of the parameters, we need to put ‘$’ sign before the property.

Now we can get the data using {accounts.data} & error using {accounts.error} in html file.

<template>
        <lightning-card title="Search Account" icon-name="custom:custom57">
                <div class="slds-m-around_medium">
                        <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search"></lightning-input>
                        
                        <template if:true={accounts.data}>
                                <template for:each={accounts.data} for:item="acc">
                                        <lightning-layout vertical-align="center" key={acc.id}>
                                                <li>
                                                        {acc.Name}
                                                        {acc.AccountNumber}
                                                </li>
                                        </lightning-layout>
                                </template>
                        </template>
                </div>
        </lightning-card>
</template>

to use same LWC component on Home page modify “searchAccount.js-meta.xml” file like below.

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

Wire Function with Apex

There is another way to use wire as function. Let’s see how we can modify the above LWC component to use as Wire Function.

No changes required in Apex class and searchAccount.js-meta.xml file. We need to modify our js file. We need to defined two private reactive properties such as accounts and error. Then we need to set these two properties into the wired function named wiredAccounts.

import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountService.getAccounts';
export default class SearchAccount extends LightningElement {
        @track searchKey;
        @track accounts;
        @track error;

        @wire (getAccounts,{strAccountName: '$searchKey'})
        wiredAccounts({data, error}){
                if(data) {
                        this.accounts =data;
                        this.error = undefined;
                }else {
                        this.accounts =undefined;
                        this.error = error;
                }
        }

        handleKeyChange(event){
                this.searchKey = event.target.value;
        }
}

Now, we will get the Account record details using only {accounts} instead of {accounts.data} applied for wire method to property mechanism in HTML file.

<template>
        <lightning-card title="Search Account Wired Function" iconname="custom:custom57">

                <div class="slds-m-around_medium">
                        <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search"></lightning-input>
                        <template if:true={accounts}>
                                <template for:each={accounts} for:item="acc">
                                        <lightning-layout vertical-align="center" key={acc.id}>
                                                <li>
                                                        {acc.Name}
                                                        {acc.AccountNumber}
                                                </li>
                                        </lightning-layout>
                                </template>
                        </template>
                </div>
        </lightning-card>
</template>

Imperative Method with Apex

Now we have a good understanding of using wire mechanism in Lightning Web Component. Let’s talk about how to get salesforce data with imperative service. Here is example of LWC call Apex method with parameters imperatively.

NOTE :- For Imperative method we dont need to mark the apex method as cacheabe=true.

Let’s modify the above example into the imperative mechanism. We need to modify our js file like below

import { LightningElement, track } from 'lwc';
importgetAccounts from '@salesforce/apex/AccountService.getAccounts';
export default class SearchAccount extends LightningElement {
        @track accounts;
        @track error;
        handleKeyChange(event){
                constsearchKey = event.target.value;
                getAccounts({ strAccountName: searchKey })
                .then(result => {
                        this.accounts = result;
                        this.error = undefined;
                })
                .catch(error => {
                        this.error = error;
                        this.accounts = undefined;
                })
        } 
}

Wire Vs Imperative

Always prefer to use @wire over imperative Apex method invocation. @wire fits nicely in the overall Lightning Web Component reactive architecture.

However, we have some use cases where we require to use imperative Apex. For example, when you need to invoke an Apex method without responsive parameters in response to a specific event, like a button click event to get record.

Now we know @wire is recommended way by Salesforce but we have two way to implements @wire an apex method

Wire an Apex method as property.
Wire an Apex Method as function.

Now, which one is recommended? Prefer way is us @wire as property.

Here is some consideration

First, import the Apex method into the JS
If it is wired, make sure cacheable=trued ecorator is set
Parameters are passed as an object
For simple results: wire to a property
For some processing: wire to a function
For controlling when to call: imperative

Salesforce Reader

Call Apex method from Lightning Web Components : Amit Chaudhary

Wire Property with Apex

Wire Function with Apex

Imperative Method with Apex

Wire Vs Imperative

Further Reading

Post a Comment