Call apex method in lightning web component

 Call  apex method  in lightning web component:-
    
  Lightning web components can import methods from Apex classes into the JavaScript classes. 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. The Apex Method should be marked with @AuraEnabled. 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. And if you can’t use a wire adapter, write an Apex method.

Import  syntax :-

            import apexMethod  from  '@salesforce/apex/Namespace.Classname.apexMethod';
         
  •  apexMethod ---  This identifies the Apex Method name .
  •  Classname   ---    apex class name .
  • Namespace ---    namespace of salesforce organization   

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. We have three way to call Apex method
                       1.  Wire a property,
                       2. Wire a function,
                       3.  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 a property in lightning Web Component:-

  We can invoke apex method from a component via the wire service. We can @wire a property or a     function. Here is the syntax

Syntax :

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


Lets see example of Wire an Apex Method to a Property

Apex  class  AccountList

public with sharing class AccountList {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name, Type,  Phone 
            FROM Account];
    }
}

accountList.js

import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountList.getAccountList';
  
export default class AccountList  extends LightningElement {
    @wire(getAccountList) accounts;
}

Now accounts is the property of wiring, that means we can get the data of account using {accounts.data} & error using {accounts.error} in html file.

accountList.html 

<template>
    <lightning-card title="Account List From Apex" 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>
                <template if:true={accounts.error}>
                    {accounts.error}
                </template>
            </div>
        </lightning-card>
</template>

accountList.js-meta.xml


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this lwc component on account detail page.


Wire a function in lightning Web Component:-

accountList.js


import { LightningElement, wire,track } from 'lwc';
import getAccountList from '@salesforce/apex/AccountList.getAccountList';
  
export default class AccountList 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;
        }
    }
}


accountList.html

<template>
    <lightning-card title="Account List using Apex Wire To Function" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={accounts}>
                <template for:each={accounts} for:item="acc">
                    <p key={acc.Id}>{acc.Name}</p>
                </template>
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>




Comments

Popular posts from this blog

Security model

Lightning web Components.

EVENTS IN Lightning Web Components