First of all in order to expose any apex method in the lightning web component we have to follow the below steps.<\/p>\n
- \n
- 1. Annotate the method with @AuraEnabled . Use it on method level<\/li>\n
- 2. The Method should be static<\/li>\n
- 3. Should be public or global<\/li>\n<\/ul>\n
Also Read: How to Implement Salesforce SSO Using OAuth<\/a><\/h4>\n
After creating this apex class import it in the javascript file of your component using the below line
\nimport your Method from \u2018@salesforce\/apex\/Namespace.Classname.yourMethod\u2019;
\nNow let\u2019s understand one by one with example.
\nEx :
\n@AuraEnabled(cacheable=true)
\npublic static List getRecord() {
\n\/\/return records;
\n}
\n<\/code><\/p>\nUsing Wire service<\/h2>\n
Syntax is:
\nimport apexMethod from '@salesforce\/apex\/Namespace.Classname.apexMethod';
\n@wire(apexMethod, { apexMethodParams })
\npropertyOrFunction;
\n<\/code><\/p>\nLet\u2019s understand this with an example where we want to fetch contact list in LWC<\/p>\n
In Component js file we can have
\nimport { LightningElement, wire } from 'lwc';
\nimport getContactList from '@salesforce\/apex\/ContactHelper.getContactList ';
\n
\nexport default class ContactListLWC extends LightningElement {
\n@wire(getContactList) contacts;
\n}
\n<\/code>
\nLearn More: How To Connect Pipedrive and Salesforce Integration?<\/a><\/h4>\nHere –
\nContactHelper- Apex class name
\ngetContactList \u2013 Method Name
\nIn the Component HTML file
\n<template>
\n<lightning-card title=\"Contacts From Apex\" icon-name=\"custom:custom63\">
\n<div class=\"slds-m-around_medium\">
\n<template if:true={contacts.data}>
\n<template for:each={contacts.data} for:item=\"con\">
\n<p key={con.Id}>{con.Name}<\/p>
\n<\/template>
\n<\/template>
\n<template if:true={contacts.error}>
\n{contacts.error}
\n<\/template>
\n<\/div>
\n<\/lightning-card>
\n<\/template><\/code>
\nHere 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.<\/p>\nSimilarly, you can wire a function too and your function can return data and error as well.<\/p>\n
![\"hire](\"\/blog\/wp-content\/uploads\/sites\/2\/2020\/05\/hire-salesforce-developers-1.png\")
<\/a><\/div>\nCall a Method Imperatively<\/h2>\n
In your component js file:
\nimport { LightningElement, track } from 'lwc';
\nimport getContactList from '@salesforce\/apex\/ContactHelper.getContactList';
\nexport default class ContactListLWC extends LightningElement {
\n@track contacts;
\n@track error;
\nhandleLoad() {
\ngetContactList()
\n.then(result => {
\nthis.contacts = result;
\n})
\n.catch(error => {
\nthis.error = error;
\n});
\n}
\n}
\n<\/code>
\nHere getContactList is a method written in apex class.<\/p>\nIn your HTML file use, this contacts variable.
\n<template>
\n<lightning-card title=\"Contact List ImperativeCall\" icon-name=\"custom:custom63\">
\n<div class=\"slds-m-around_medium\">
\n<p class=\"slds-m-bottom_small\">
\n<lightning-button label=\"Load Contacts\" onchange={handleLoad}><\/lightning-button>
\n<\/p>
\n<template if:true={contacts}>
\n<template for:each={contacts} for:item=\"con\">
\n<p key={con.Id}>{con.Name}<\/p>
\n<\/template>
\n<\/template>
\n<template if:true={error}>
\n{error}
\n<\/template>
\n<\/div>
\n<\/lightning-card>
\n<\/template>
\n<\/code>
\nThis is all about calling Apex in Lightning Web Components.<\/p>\nEmizentech is a reliable salesforce consulting company<\/a> and our experienced salesforce developers<\/a> can provide you professional assistance for your next salesforce project.<\/p>\n
Also Read: How to Create a Salesforce Lightning Map Component?<\/a><\/h4>\n
Author Bio:<\/b><\/p>\n