Hey guys, today in this post we are going to learn about How to display account related contacts based on AccountId using the CustomEvent & dispatchEven in salesforce lightning web component – LWC.
Files we used in this post example:-
displayContactsOnAccountId.html | Lightning Web Component HTML | It is child HTML file and calling on parentCmpLwc.html. |
displayContactsOnAccountId.js | Lightning Web Component JavaScript | It is holding @wire property with handleChangeRadio functionality with CustomEvent and dispatchEvent events. |
displayContactsOnAccountId.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed. |
parentCmpLwc.html | Lightning Web Component HTML | It is Parent HTML file, that is used for write HTML element for user interface.. |
parentCmpLwc.js | Lightning Web Component JavaScript | It is holding child component’s event value.. |
parentCmpLwc.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed. |
eventAppLwc.app | Lightning Application File | It is used for call the parent component to preview on browser.. | lwcAppExampleApex.cls | Apex Controller | It is used for call apex @wire method to retrieve the data from server in LWC Javascript file.. |
Live Demo
Other related post that would you like to learn in LWC
Start LWC Child Component
Step 1:- Create Lightning Web Component : displayContactsOnAccountId.html
SFDX:Lightning Web Component >> New >> displayContactsOnAccountId.html
displayContactsOnAccountId.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template> <lightning-card title="Display the Contacts based on AccountId the help of event in LWC" custom-icon="custom:icon13"> <table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" bordercolor="#ccc" style="border-collapse:collapse;"> <thead> <tr> <th>Select</th> <th>Name</th> <th>Phone</th> <th>Industry</th> <th>Description</th> </tr> </thead> <template for:each={accData.data} for:item="accItem"> <tr key={accItem.Id}> <td><lightning-input type="radio" name="radioButtonSelect" value={accItem.Id} onchange={handleChangeRadio}></lightning-input></td> <td>{accItem.Name}</td> <td>{accItem.Phone}</td> <td>{accItem.Industry}</td> <td>{accItem.Description}</td> </tr> </template> </table> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : displayContactsOnAccountId.js
SFDX:Lightning Web Component >> New >> displayContactsOnAccountId.js
displayContactsOnAccountId.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { LightningElement, track, wire } from 'lwc'; import retrieveAccountRecords from '@salesforce/apex/lwcAppExampleApex.retrieveAccountRecords'; export default class DisplayContactsOnAccountId extends LightningElement { @wire (retrieveAccountRecords) accData; @track getAccId; handleChangeRadio(event){ this.getAccId = event.target.value; window.console.log('getAccId ' + this.getAccId); const myCustomEventItem = new CustomEvent('myeventdemo',{ detail: this.getAccId }); this.dispatchEvent(myCustomEventItem); } } |
Step 3:- Create Lightning Web Component : displayContactsOnAccountId.js-meta.xml
SFDX:Lightning Web Component >> New >> displayContactsOnAccountId.js-meta.xml
displayContactsOnAccountId.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Start LWC Parent Component
Step 4:- Create Lightning Web Component : parentCmpLwc.html
SFDX:Lightning Web Component >> New >> parentCmpLwc.html
parentCmpLwc.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<template> <lightning-card> <h3 slot="title"> <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon> Parent Component </h3> <div class="slds-m-bottom--medium"> <c-display-contacts-on-account-id onmyeventdemo={handleChangeAction}></c-display-contacts-on-account-id> </div> <br/><br/> <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon> <b>Child Component</b> <table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" bordercolor="#ccc" style="border-collapse:collapse;"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <template for:each={records} for:item='conItem'> <tr key={conItem.Id}> <td>{conItem.FirstName}</td> <td>{conItem.LastName}</td> <td>{conItem.Email}</td> <td>{conItem.Phone}</td> </tr> </template> </table> </lightning-card> </template> |
Step 5:- Create Lightning Web Component : parentCmpLwc.js
SFDX:Lightning Web Component >> New >> parentCmpLwc.js
parentCmpLwc.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { LightningElement, track, wire } from 'lwc'; import retrieveContactRecords from '@salesforce/apex/lwcAppExampleApex.retrieveContactRecords'; export default class ParentCmpLwc extends LightningElement { @track accountId; @track records; @track errorMsg; @wire (retrieveContactRecords, {accId:'$accountId'}) wireConRecord({error,data}){ if(data){ this.records = data; this.errorMsg = undefined; }else{ this.errorMsg = error; this.records = undefined; } } handleChangeAction(event){ this.accountId = event.detail; window.console.log('accountId ' + this.accountId); } } |
Step 6:- Create Lightning Web Component : parentCmpLwc.js-meta.xml
SFDX:Lightning Web Component >> New >> parentCmpLwc.js-meta.xml
parentCmpLwc.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Start Apex Controller
Step 7:- Create Apex Controller : lwcAppExampleApex.cls
SFDX:Create Apex Class >> New >> lwcAppExampleApex.cls
lwcAppExampleApex.cls [Apex Class]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public with sharing class lwcAppExampleApex { //Display the Contacts based on AccountId the help of event in LWc @AuraEnabled(cacheable=true) public static List<Account> retrieveAccountRecords(){ List<Account> accList = [Select Id, Name, Phone, Industry, Description From Account Where Phone != null limit 6]; return accList; } @AuraEnabled(cacheable=true) public static List<Contact> retrieveContactRecords(string accId){ List<Contact> conObj = new List<Contact>(); List<Contact> conList = [Select Id, FirstName, LastName, Email, Phone, AccountId From Contact Where AccountId=:accId]; for(Contact con:conList){ conObj.add(con); } return conObj; } } |
Start Lightning Application
Step 8:- Create Lightning Application : eventAppLwc.app
From Developer Console >> File >> New >> Lightning Application
eventAppLwc.app [Component Application File]
1 2 3 |
<aura:application extends="force:slds"> <c:parentCmpLwc/> </aura:application> |
Further post that would you like to learn in LWC
great idea
Great article. Thanks for sharing great information.
Thanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.
this is a very helpful post. Thanks for sharing with us.