Dynamic Interaction in two Lightning web components

What are dynamic interactions?

Dynamic Interactions is one more step to make Lightning pages more dynamic and interactive. With Dynamic Interactions, an event occurring in one component on a Lightning page, such as the user clicking an item in a list view, can update other components on the page.

They let admins create applications with components that communicate and transform based on user interactions, all in the Lightning App Builder UI. It unlocks capabilities that previously were reserved only for developers.

Dynamic Interactions has four major building blocks.

• Event—Anything that can trigger an interaction, such as a mouse click, a button press, or a change in a field’s value.

• Interaction—An activity that happens between the source and the target.

• Source—The item triggering the event. Currently, only custom Lightning web components and the Dynamic Actions Bar component (Pilot) are supported as sources.

• Target—The item that’s the target of the interaction. Any component on a Lightning page can be a target.

To expose an event from the component, you need to define the event and its schema in the meta XML file.

event - Exposes the event for Dynamic Interactions and makes it available for the component in the Lightning App Builder. The event subtag supports the name, label, and description attributes.

name—The name of the event as defined in the component’s .js file. If no label attribute is defined, the name value is shown in the list of available events for the component in the Lightning App Builder.

label—The admin-friendly label for the event.

description—The description of the event, which displays in an i-bubble on the event label in the Lightning App Builder.

schema - Provides the shape of the event. Content in the schema subtag must be in JSON format.

Our use case - There are two independent custom Lightning web components. The first one(AccountList) contains the list of accounts and the other one(AccountDetail) displays account record detail using the record view form. We have placed these two components on an app page. We want that whenever an account is selected from the list, its detail should be displayed by the AccountDetail component. We will accomplish this by using Dynamic Interactions.

1. Create the AccountList component(source) that displays the list of accounts.

a. The HTML file - Display the list of accounts.

<template>
	<template for:each={accounts} for:item="account">
		<div key={account.Id} onclick={handleClick} data-id={account.Id} class="slds-box slds-var-p-around_small"
        style="background:white;cursor:pointer;">
			<p class="slds-truncate" title={account.Name}>{account.Name}</p>
			<p class="slds-truncate" title={account.Industry}>{account.Industry}</p>
		</div>
	</template>
</template>

b. The js file- Trigger custom event whenever an account is selected.

import { LightningElement,wire,track } from "lwc";
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class TestDynamicInteraction extends LightningElement {
    @track accounts = [];

    @wire(getAccounts)
    wireAccounts ({error, data}) {
        if (error) {
            console.error(error);
        } else if (data) {
            this.accounts = data;
        }
    }

	handleClick(event) {
		let recordId = event.currentTarget.dataset.id;
		this.dispatchEvent(
			new CustomEvent("itemselected", {
				detail: {
					recordId: recordId
				}
			})
		);
	}
}

c. The meta XML file - Exposes the event.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Account List</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <event name="itemselected" label="Item Selected" description="This event fires when an item is selected.">
                <schema>
                    {
                        "type": "object",
                        "properties": {
                            "recordId": {
                                "type": "string",
                                "title": "Record ID",
                                "description": "Enter an 18-digit record ID."
                            }
                       }
                    }
                </schema>
            </event>
        </targetConfig>
    </targetConfigs>
    <description>Defines an event for an Account List component</description>
</LightningComponentBundle>

2. Create the AccountDetail component(Target) that displays the account record's detail.

a. The HTML file - Shows account record using record view form.

<template>
	<lightning-card title="Selected Account Details">
		<lightning-record-view-form object-api-name="Account" record-id={accountId}>
			<div class="slds-var-p-left_small">
				<lightning-output-field field-name="Name"> </lightning-output-field>
				<lightning-output-field field-name="Industry"> </lightning-output-field>
				<lightning-output-field field-name="Active__c"> </lightning-output-field>
				<lightning-output-field field-name="Type"> </lightning-output-field>
			</div>
		</lightning-record-view-form>
	</lightning-card>
</template>

b. The js file - Use the event property.

import {api, LightningElement } from "lwc";

export default class Test extends LightningElement {
	accountId;

	@api get recordId() {
		return this.accountId;    
	}
	set recordId(value) {
		if (value) {
			this.accountId=value;
		}
	}
}

c. The meta XML file - Make the property available in the Lightning Builder UI

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Account Detail</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="recordId" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

3. After creating both components, you will need to place them on the App page and establish interaction between them.

Well, that's it! You can now try seeing your interaction live. Quite an easy right.

References - https://help.salesforce.com/s/articleView?id=sf.dynamic_interactions_overview.htm&type=5

Thanks for reading. Welcome all your thoughts on this. Stay safe and happy :)