How to display the Contacts based on Account Name in Lightning WebComponent
Video link
=========
https://www.youtube.com/watch?v=IkKFPHy29FU&t=16s
Apex Class
==========
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts()
{
List<Account> acclist=[select Id,Name from Account LIMIT 5];
return acclist;
}
@AuraEnabled(cacheable=true)
public static List<Contact> getAllContacts(String searchKey)
{
System.debug('Entered into contact method');
List<Contact> returnconlist=new List<Contact>();
for(Contact con:[select LastName,Account.Name from Contact where Account.Name=:searchKey])
{
returnconlist.add(con);
System.debug('Contact list size'+returnconlist);
}
if(returnconlist.isEmpty())
{
System.debug('No Records found'+returnconlist.size());
}
return returnconlist;
}
}
contactsSearch.html
===================
<template>
<b>Accounts</b>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
<tr>
<th>Select</th>
<th>AccountName</th>
</tr>
<template for:each={accounts.data} for:item="acc">
<tr key={acc.Id}>
<td>
<lightning-input type="radio" name="radioButton" value={acc.Name} onchange={handleClick}>
</lightning-input>
</td>
<td>
{acc.Name}
</td>
</tr>
</template>
</table>
<template if:true={records}>
<b>Contacts</b>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
<tr>
<th>LastName</th>
</tr>
<template for:each={records} for:item="con">
<tr key={con.Id}>
<td>
{con.LastName}
</td>
</tr>
</template>
</table>
</template>
</template>
contactsSearch.js
=================
import { LightningElement, wire,api } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import getAllContacts from '@salesforce/apex/AccountController.getAllContacts';
export default class ContactsSearch extends LightningElement {
@wire(getAccounts) accounts;
@api currentAccName;
@api records;
@api error;
@wire(getAllContacts, {searchKey:'$currentAccName'})
wiredContact({ error, data }) {
if (data) {
this.records = data;
this.error=undefined;
} else {
this.error=error;
this.records = undefined;
}
}
handleClick(event)
{
const acntname=event.target.value;
console.log(acntname);
this.currentAccName=acntname;
}
}
Comments
Post a Comment