Exploring Communication Strategies for LWC in Salesforce
This article demonstrates three ways to communicate between Lightning Web Components (LWC) in Salesforce with practical examples.
CORE
·
Join the DZone community and get the full member experience.
Join For FreeWhen building a Salesforce application with multiple lightning web components (LWC) as building blocks, it is important to ensure that those components can effectively share information. The method of communication depends on the structure of your lightning components.
If one component is built within another component, you create a parent-child relationship, and the way you communicate amongst them is different from how you communicate between two unrelated components.
In this article, we’ll explore three primary ways to share information between LWCs:
- Parent-to-child communication via public properties
- Child-to-parent communication via custom events
- Communication between unrelated components via lightning messaging service
Let us dive deeper into each of these communication methods.
1. Parent-to-Child Communication via Public Properties
Parent-to-child communication can be achieved through public properties. In the child component, a public property can be declared with the @api decorator. Once declared, this property becomes accessible from the parent component, allowing the parent to pass data to the child.
Let us consider a simple example: an application that lists all leads in the system. In this application, the parent component handles the query, and the child component displays the list of leads. Below is the code that demonstrates the communication in detail.
Child component:
import { LightningElement,api } from 'lwc';
export default class Lwc_data_sharing_child extends LightningElement {
@api records = [];
leadColumns = [
{ label: "Name", fieldName: "Name"},
{ label: "Phone", fieldName: "Phone" },
{ label:"Status", fieldName:"Status"},
{ label:"State", fieldName:"State"}
];
}The array property records is declared as a public property using @api decorator.
<template>
<lightning-card title="Child Component" icon-name="standard:account">
<div class="slds-p-horizontal_medium">
<lightning-datatable data={records} key-field="Id" columns={leadColumns} hide-checkbox-column="true" ></lightning-datatable>
</div>
</lightning-card>
</template>Parent component:
import { LightningElement,wire } from 'lwc';
import getLeads from "@salesforce/apex/LeadController.getLeads";
export default class Lwc_data_sharing_parent extends LightningElement {
@wire(getLeads)parentRecords;
}The parent component gets the list of records by wiring the Apex method to a property called parentRecords.
<template>
<lightning-card title="Parent Component" icon-name="action:new_note">
<div class="slds-p-left_medium">
Current List is for : Leads
</div>
</lightning-card>
<c-lwc_data_sharing_child records={parentRecords}></c-lwc_data_sharing_child>
</template>The parentRecords property is then passed to the child's public property records.
2. Child-to-Parent Communication via Custom Events
Child-to-parent communication can be achieved through custom events. The child dispatches an event, which is listened to by the parent, prompting it to take the appropriate actions.
To demonstrate this, let us enhance the previous example by adding a dropdown with two values (Lead and Opportunity). This dropdown will control which list — lead or opportunity — is displayed on the child component. When the user selects a dropdown value, the child will communicate the selection back to the parent via a custom event, so that the parent can send the appropriate list back to the child.
Child component:
import { LightningElement,api } from 'lwc';
export default class Lwc_data_sharing_child extends LightningElement {
objectInfo;
@api records = [];
leadColumns = [
{ label: "Name", fieldName: "Name"},
{ label: "Phone", fieldName: "Phone" },
{ label:"Status", fieldName:"Status"},
{ label:"State", fieldName:"State"}
];
OpportunityColumns = [
{ label: "Name", fieldName: "Name" },
{ label:"StageName", fieldName:"StageName"},
{ label:"CloseDate", fieldName:"CloseDate"}
];
columns = [];
get options() {
return [
{ label: 'Leads', value: 'Lead' },
{ label: 'Opportunities', value: 'Opportunity' }
];
}
handleChange(event) {
this.objectInfo = event.detail.value;
this.dispatchEvent(
new CustomEvent('objectpick', { detail: this.objectInfo })
);
if(this.objectInfo === 'Lead'){
this.columns = this.leadColumns;
}else if(this.objectInfo === 'Opportunity'){
this.columns = this.OpportunityColumns;
}
}
}<template>
<lightning-card title="Child Component" icon-name="standard:account">
<div class="slds-p-horizontal_medium">
<lightning-datatable data={records} key-field="Id" columns={leadColumns} hide-checkbox-column="true" ></lightning-datatable>
</div>
<lightning-combobox class="slds-p-horizontal_medium"
name="Object"
label="List Object"
value=""
placeholder="Select Object"
options={options}
onchange={handleChange}
required
></lightning-combobox>
</lightning-card>
</template>
Here, the handleChange function, which is called when the user selects an option from the dropdown, dispatches a custom event called objectpick, that carries the selection back to the parent.
Parent component:
<template>
<lightning-card title="Parent Component" icon-name="action:new_note">
<div class="slds-p-left_medium">
Current List is for : {objectInfo}
</div>
</lightning-card>
<c-lwc_data_sharing_child onobjectpick={eventHandler} records={parentRecords}></c-lwc_data_sharing_child>
</template>The parent, upon listening to the objectpick event, calls the eventHandler function.
import { LightningElement } from 'lwc';
import getLeads from "@salesforce/apex/LeadController.getLeads";
import getOpportunities from "@salesforce/apex/LeadController.getOpportunities";
export default class Lwc_data_sharing_parent extends LightningElement {
parentRecords;
objectInfo;
eventHandler(event){
this.objectInfo = event.detail;
if(this.objectInfo === 'Lead'){
getLeads()
.then(result => {
this.parentRecords = result;
});
}else if(this.objectInfo === 'Opportunity'){
getOpportunities()
.then(result => {
this.parentRecords = result;
});
}
}
}The eventHandler function is what sets the parentRecords to the appropriate record list, which is then passed to the child for display.
3. Communication Between Unrelated Components via Lightning Messaging Service
What if you need to communicate between two independent components? This can be achieved using Lightning Messaging Service (LMS), a publish/subscribe service that enables the communication between lightning web components.
To demonstrate this, let us introduce an independent component, which subscribes to the event (message) generated by the parent, which carries the objectInfo and records data.
Parent component:
import { LightningElement,wire } from 'lwc';
import getLeads from "@salesforce/apex/LeadController.getLeads";
import getOpportunities from "@salesforce/apex/LeadController.getOpportunities";
import { publish, MessageContext } from 'lightning/messageService';
import RECORDS_CHANNEL from '@salesforce/messageChannel/RecordsChannelService__c';
export default class Lwc_data_sharing_parent extends LightningElement {
records;
objectInfo;
@wire(MessageContext)
messageContext;
eventHandler(event){
this.objectInfo = event.detail;
if(this.objectInfo === 'Lead'){
getLeads()
.then(result => {
this.records = result;
this.publishMessage();
});
}else if(this.objectInfo === 'Opportunity'){
getOpportunities()
.then(result => {
this.records = result;
this.publishMessage();
});
}
}
publishMessage(){
const payload = {
objectInfo: this.objectInfo,
records:this.records
};
publish(this.messageContext, RECORDS_CHANNEL, payload);
}
}In order to publish LMS:
- A message channel called
RecordsChannelServiceis created and imported. - A payload with objectInfo and records is set up.
- The payload is sent using the publish function.
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
<description>Message channel for passing records</description>
<isExposed>true</isExposed>
<masterLabel>RecordsChannelService</masterLabel>
</LightningMessageChannel>Independent component:
import { LightningElement,wire,track } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import RECORDS_CHANNEL from '@salesforce/messageChannel/RecordsChannelService__c';
export default class Lwc_data_sharing_lms extends LightningElement {
objectInfo;
@track records = [];
@wire(MessageContext)
messageContext;
subscription = null;
renderedCallback() {
this.subscribeToMessageChannel();
}
leadColumns = [
{ label: "Name", fieldName: "Name"},
{ label: "Phone", fieldName: "Phone" },
{ label:"Status", fieldName:"Status"},
{ label:"State", fieldName:"State"}
];
OpportunityColumns = [
{ label: "Name", fieldName: "Name" },
{ label:"StageName", fieldName:"StageName"},
{ label:"CloseDate", fieldName:"CloseDate"}
];
columns = [];
subscribeToMessageChannel() {
this.subscription = subscribe(
this.messageContext,
RECORDS_CHANNEL,
(message) => this.handleMessage(message)
);
}
handleMessage(message) {
this.objectInfo = message.objectInfo;
this.records = message.records;
if(this.objectInfo === 'Lead'){
this.columns = this.leadColumns;
}else if(this.objectInfo === 'Opportunity'){
this.columns = this.OpportunityColumns;
}
}
}
The independent component imports the same message channel. The message is received by the subscribe function and processed to extract the objectInfo and records list.
Conclusion
In conclusion, communication between Lightning Web Components (LWC) in Salesforce can be efficiently achieved using different methods based on the relationship between the components. For parent-child components, data can be shared through public properties, allowing the parent to pass information to the child.
When communication is needed from child to parent, custom events serve as a powerful mechanism for sending data upwards. For independent, unrelated components, the Lightning Message Service (LMS) offers a robust publish/subscribe model that facilitates communication without a direct relationship between the components.
Understanding and using these methods ensures seamless data flow across your Salesforce application, improving the overall user experience and functionality.
Opinions expressed by DZone contributors are their own.
Comments