How to display account related contacts based on AccountId using the CustomEvent & dispatchEven in Salesforce lightning web component — LWC | how to display account related contacts based on AccountId in lwc
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 → To get source code live demo, Click Here..
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]
Step 2:- Create Lightning Web Component : displayContactsOnAccountId.js
SFDX:Lightning Web Component >> New >> displayContactsOnAccountId.js
displayContactsOnAccountId.js [LWC JavaScript File]
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]
Lightning Web Component Meta XML
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]
Step 5:- Create Lightning Web Component : parentCmpLwc.js
SFDX:Lightning Web Component >> New >> parentCmpLwc.js
parentCmpLwc.js [LWC JavaScript File]
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]
Lightning Web Component Meta XML
Start Apex Controller
Step 7:- Create Apex Controller : lwcAppExampleApex.cls
SFDX:Create Apex Class >> New >> lwcAppExampleApex.cls
lwcAppExampleApex.cls [Apex Class]
Start Lightning Application
Step 8:- Create Lightning Application : eventAppLwc.app
From Developer Console >> File >> New >> Lightning Application
eventAppLwc.app [Component Application File]
Further post that would you like to learn in LWC FAQ (Frequently Asked Questions)
Live Demo → To get source code live demo, Click Here..
Hi, This is Vijay behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net
Originally published at https://www.w3web.net on December 12, 2020.
