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 Code:-
<!--
@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 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 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__AppPage</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 Code:-
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 TargetComp extends LightningElement {
@api targetVar
}
HTML File:-
============
<!--
@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 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__AppPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__AppPage">
<property name="targetVar" type="string"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
=======================================================================
Youtube Video Link Here:-
=======================================================================
0 Comments