Field Dependency in Salesfroce

Lightning Web Component

How to call Apex Methods in lightning web component:

 Lightning web component can import methods from apex classes into JavaScript classes using ES6 import.

Here is the syntax to import  apex classes:

you can use  default export syntax  to import an apex method using @salesforce/apex scoped module  into JavaScript controller class.

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

ApexMethod:  Name of apex method that we are going to use.
Namespace : The namespace of the Salesforce organisation. Specifies a namespace unless the organisation uses the default one, in which case don;t specify it.
ClassName: Name of the class name.


Create Apex Class:
In this example , we will be getting account details and will show it on UI using lightning web component.
Here is the Apex class.  To expose this method in lightning web component, method must be static and annotate the method with @AuraEnabled.
public with sharing class GetAccountData{

@AuraEnabled(cacheable=true)

public static List<Account> getAccountData(){

return[SELECT Id, Name, Type, Rating, Phone FROM Account];

}

}Now, we can this call using three property in lightning web component:

1. wire a property
2. wire a function
3.call a method imperatively

Wire an Apex Method to a Property:

IIf  an apex method is annotated with @AuraEnabled(Cacheable=true), you can invoke it through web component via wire property.

Here is the syntax:

create lightning component through SFDX syntax:

sfdx force:lightning:component:create --type lwc -n LWCWirePropertyToGetAccount -d force-app/main/default/lwc

Here is the LWCWirePropertyToGetAccountData.html  markup for lightning web component: 

<template>
 <lightning:card title="Apex class Example to get Account Data" icon-name="custom:custom63">
<div class="slds-m-around-medium">
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Close Date">Type</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Stage">Phone</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Confidence">Rating</div>
</th>
</tr>
</thead>
<tbody>
<template if:true={accounts.data} >
<template for:each={accounts.data} for:item="acc">
<tr class="slds-hint-parent" key={acc.Id}>
<td data-label="Account Name">
<p key={acc.Id}>{acc.Name}</p>
</td>
<td data-label="Type">
<div class="slds-truncate" title="4/14/2015">{acc.Type}</div>
</td>
<td data-label="Phone" title="Prospecting">
<div class="slds-truncate">{acc.Type}</div>
</td>
<td data-label="Rating" title="Rating">
<div class="slds-truncate" >{acc.Rating}</div>
</td>
</tr>
</template>
</template>
</tbody>
</table>
</div>
</lightning:card>
</template>

Here is the LWCWirePropertyToGetAccountData.js class

import { LightningElement, wire } from 'lwc';

import  getAccountData from '@salesforce/apex/GetAccountData.getAccountData';

export default class LWCWirePropertyToGetAccount extends LightningElement {

    @wire(getAccountData) accounts;

}

Here is the LWCWirePropertyToGetAccountData.js-meta.xml markup.

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>false</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

       </targets>

</LightningComponentBundle>

Here is the Result:

Wire an Apex Method to a Function:

Now, we will be updating same code to wire an apex method to a function.

Update the LWCWirePropertyToGetAccountData.js class as shown below

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 LWCWirePropertyToGetAccountData.html markup as shown below 

<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>

Now, we can see the result after pushing changes to our org.

Wire an Apex Method Imperatively:

Now, Let's see how to call apex method imperatively. Use below code for LWCWirePropertyToGetAccountData.html :

<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 below code for LWCWirePropertyToGetAccountData.js :

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;

            });

    }

}

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 .