As part of the Winter ‘22 release, Salesforce has made Generally Available (GA) a feature called Dynamic Interactions (DI).
but fully supported, with further features to come on the roadmap.
We can communicate among multiple lightning components within the same app page by configuring settings in the lightning app builder.
Source Component:–
<!-- @description : @author : Rohit Kumar @group : @last modified on : 12-13-2021 @last modified by : Rohit Kumar --> <template> <lightning-card variant="Narrow" title="Source Component" icon-name="standard:account" > <div class="slds-align_absolute-center"> <lightning-input type="text" variant="standard" name="name" label="Enter the text here" placeholder="type here..." onchange={handleChange} ></lightning-input> </div> <br /> <lightning-button variant="brand" label="Send Data" title="titleName" onclick={sendData} ></lightning-button> </lightning-card> </template>
JS File
/** * @description : * @author : Rohit Kumar * @group : * @last modified on : 12-13-2021 * @last modified by : Rohit Kumar **/ import { api, LightningElement } from 'lwc'; export default class SourceComp extends LightningElement { @api sourceVar handleChange(event) { this.sourceVar = event.target.value; } sendData() { var customEvent = new CustomEvent('itemsselected', { detail: { sourceVar: this.sourceVar } }); this.dispatchEvent(customEvent); } }
XML File
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>52.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> <!--<target>lightning__Tab</target>--> <!--<target>lightning__RecordAction</target>--> <!--<target>lightning__Inbox</target>--> <!--<target>lightning__UtilityBar</target>--> <!--<target>lightning__FlowScreen</target>--> <!--<target>lightningSnapin__ChatMessage</target>--> <!--<target>lightningSnapin__Minimized</target>--> <!--<target>lightningSnapin__PreChat</target>--> <!--<target>lightningSnapin__ChatHeader</target>--> <!--<target>lightningCommunity__Page</target>--> <!--<target>lightningCommunity__Default</target>--> <!--<target>lightningCommunity__Page_Layout</target>--> <!--<target>lightningCommunity__Theme_Layout</target>--> </targets> <targetConfigs> <targetConfig targets="lightning__AppPage"> <property name="sourceVar" type="string"/> <event name="itemsselected" label="Seleted"> <schema> { "type": "object", "properties": { "sourceVar": { "type": "string" } } } </schema> </event> </targetConfig> </targetConfigs> </LightningComponentBundle>
Target Component
JS code
/** * @description : * @author : Rohit Kumar * @group : * @last modified on : 12-13-2021 * @last modified by : Rohit Kumar **/ import { api, LightningElement } from 'lwc'; export default class TargetComp extends LightningElement { @api targetVar }
HTML Code
<!-- @description : @author : Rohit Kumar @group : @last modified on : 12-13-2021 @last modified by : Rohit Kumar --> <template> <lightning-card variant="Narrow" title="Target Component" icon-name="standard:account" > The entered value is: {targetVar} </lightning-card> </template>
XML Code
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>52.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> <!--<target>lightning__Tab</target>--> <!--<target>lightning__RecordAction</target>--> <!--<target>lightning__Inbox</target>--> <!--<target>lightning__UtilityBar</target>--> <!--<target>lightning__FlowScreen</target>--> <!--<target>lightningSnapin__ChatMessage</target>--> <!--<target>lightningSnapin__Minimized</target>--> <!--<target>lightningSnapin__PreChat</target>--> <!--<target>lightningSnapin__ChatHeader</target>--> <!--<target>lightningCommunity__Page</target>--> <!--<target>lightningCommunity__Default</target>--> <!--<target>lightningCommunity__Page_Layout</target>--> <!--<target>lightningCommunity__Theme_Layout</target>--> </targets> <targetConfigs> <targetConfig targets="lightning__AppPage"> <property name="targetVar" type="string"/> </targetConfig> </targetConfigs> </LightningComponentBundle>
YoutTube Video Link Here—–