Thu. May 19th, 2022

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—–

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!