Get a Quote

Hey, do you want to share your amazing ideas with us, drop your requirements, we are keen to work with you on your fantastic project. We will try to reach you shortly, SEE YOU !

Tell us about you

Tell us about your Project

How To Call Apex Method In Lightning Web Components In Salesforce

One of the most important parts of development is fetching data from the server, so as in Lighting Web Component development in order to fetch data from the server we need to call our Apex classes sometimes. In this blog, we will learn how to call Apex in LWC.

We can do this in multiple ways.

  • 1. Using wire service to receive data stream
  • 2. Call a method imperatively

First of all in order to expose any apex method in the lightning web component we have to follow the below steps.

  • 1. Annotate the method with @AuraEnabled . Use it on method level
  • 2. The Method should be static
  • 3. Should be public or global

Also Read: How to Implement Salesforce SSO Using OAuth

After creating this apex class import it in the javascript file of your component using the below line
import your Method from ‘@salesforce/apex/Namespace.Classname.yourMethod’;
Now let’s understand one by one with example.
Ex :
@AuraEnabled(cacheable=true)
public static List getRecord() {
//return records;
}

Using Wire service

Syntax is:
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;

Let’s understand this with an example where we want to fetch contact list in LWC

In Component js file we can have
import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactHelper.getContactList ';

export default class ContactListLWC extends LightningElement {
@wire(getContactList) contacts;
}

Learn More: How To Connect Pipedrive and Salesforce Integration?

Here –
ContactHelper- Apex class name
getContactList – Method Name
In the Component HTML file
<template>
<lightning-card title="Contacts From Apex" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={contacts.data}>
<template for:each={contacts.data} for:item="con">
<p key={con.Id}>{con.Name}</p>
</template>
</template>
<template if:true={contacts.error}>
{contacts.error}
</template>
</div>
</lightning-card>
</template>

Here in line <template if:true={contacts.data}> contacts is a variable that you have declared in your js file and bind with the data stream. It can have 2 index. One is data in case of success from apex call and second is an error in case of an error in Apex call.

Similarly, you can wire a function too and your function can return data and error as well.

hire salesforce developers

Call a Method Imperatively

In your component js file:
import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactHelper.getContactList';
export default class ContactListLWC extends LightningElement {
@track contacts;
@track error;
handleLoad() {
getContactList()
.then(result => {
this.contacts = result;
})
.catch(error => {
this.error = error;
});
}
}

Here getContactList is a method written in apex class.

In your HTML file use, this contacts variable.
<template>
<lightning-card title="Contact List ImperativeCall" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<p class="slds-m-bottom_small">
<lightning-button label="Load Contacts" onchange={handleLoad}></lightning-button>
</p>
<template if:true={contacts}>
<template for:each={contacts} for:item="con">
<p key={con.Id}>{con.Name}</p>
</template>
</template>
<template if:true={error}>
{error}
</template>
</div>
</lightning-card>
</template>

This is all about calling Apex in Lightning Web Components.

Also Read: How to Create a Salesforce Lightning Map Component?

author profile
About Author
Author Name:
Virendra Sharma

Certified Magento 2 Consultant

Author Bio:

Virendra Sharma is an ecommerce tech-enthusiast and certified Magento Developer. With a decade of experience in Magento ecommerce development, he has been assisting ecommerce businesses across the globe to harness Magento capabilities by developing, maintaining, and improving clients’ eCommerce websites. A leader in his own rights his teammates see him as an avid researcher and a Magento evangelist.

About Emizentech:

An acclaimed IT solution provider and a leading Magento 2 development company with its expertise lies in delivering top of the line ecommerce solutions, Salesforce commerce cloud services, mobile app development and many more verticals.

Relate Contact to Multiple Contacts
27 May, 2020

How To Relate a Contact To Multiple Accounts In Salesforce

With the Salesforce Summer ’16 release, you can relate a single contact to multiple accounts, without duplication! This is a […]
Read more
Salesforce Development
Chatbots in eCommerce Industry
27 May, 2020

How AI Chatbots Are Benefiting The eCommerce Industry?

Whether you call it a revolution or an intrusion, chatbots have gained a significant place in the ecommerce practices. From […]
Read more
Ecommerce Development
Odoo ERP Integration In eCommerce Platform
26 May, 2020

Odoo ERP Integration In eCommerce Platform: Complete Guide

Who knew that shopping online within just a few clicks would be easier than preparing a cup of tea. Ecommerce […]
Read more
Ecommerce Development

Let’s Talk Business

Reach out to us by following below given details, or simply drop us a text to start a conversation, we are here to provide best in class business solutions.

SAY SOMETHING