Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • The Ultimate Guide to Data Cleanup Techniques for Salesforce
    • How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI
    • Top Mistakes Developers Make in Salesforce Apex Triggers
    • Introducing Agentforce3 to Salesforce Developers
    • The Ultimate Guide to Apex Order of Execution for Developers
    • How to Handle Bulkification in Apex with Real-World Use Cases
    • How to Confidently Manage Transactions in Salesforce Apex
    • Building a Dynamic Tree Grid in Lightning Web Component
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Saturday, August 2
    • Home
    • Salesforce Platform
      • Architecture
      • Apex
      • Lightning Web Components
      • Integration
      • Flows & Automation
      • Best Practices
      • Questions
      • News
      • Books Testimonial
    • Industries
      • Artificial Intelligence
    • Hire Me
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Downloads
      • Salesforce Release Notes
      • Apex Coding Guidelines
    • About Us
      • Privacy Policy
    • Contact Us
    SalesforceCodex
    Home»Salesforce»Apex»Dynamic Interaction Between Two LWCs

    Dynamic Interaction Between Two LWCs

    Dhanik Lal SahniBy Dhanik Lal SahniApril 30, 2022Updated:June 11, 20233 Comments3 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Dynamic Interaction Between Two LWCs
    Share
    Facebook Twitter LinkedIn Pinterest Email

    Many times we have requirements to update or show detail on other components based on the action of the first component. Like we can have one component which will show a list of accounts and on selection, we will show the address of that account on a map. This post will explain to create a dynamic interaction between two LWCs.

    To accomplish the above requirement we can have the below solutions

    1. Use events interaction
    2. Use Method handler
    3. Use Dynamic Interaction

    The top two approaches are completely code-based and tightly coupled with each other. The last approach (dynamic interaction) is a combination of custom development and admin configuration. We will focus on the last approach in this post. Before starting the code logic, let us see what is dynamic interaction.

    Dynamic Interactions are a new way to interact with each other within same app page. An event occurring in one component on a Lightning page can update other components on the page.

    Dynamic Interactions has four important building blocks.

    • Event—Anything that can trigger an interaction, such as a save button click or a change in a picklist value.
    • Interaction—An activity that happens between the source and the target. Basically what interaction we are doing between components.
    • Source—The item triggering the event. It can be Lightning web components or Dynamic Actions Bar components.
    • Target—The item that’s the target of the interaction. Any component on a Lightning page can be a target.

    Let us implement logic to handle our business requirements.

    1. Source Component:

    First component is the account list component which will show all accounts. It will also create an event that will propagate the event to the second component for action.

    Apex Class:

    LWC:

    Let us create a source LWC component. We are using lightning-datatable component to show the list of accounts. On record selection itemselected event is fired using datatable row selection event.

    Apex Class AccountSelector is used to retrieve accounts.

    Dynamic Interaction Creation:

    As this LWC is a source component, we have to create events and properties which need to send to the second component. File accountSelector.js-meta.xml targetConfig has event and property definition. We will see the configuration last when we test it.

    2. Target Component

    Let us create a target LWC component that will show the address on the map for the selected record from the source component. We are using recordid property to get address information for that account and this address information is shown on lightning-map component.

    Apex Class:

    Above created apex class will be used for this component as well.

    LWC:

    Configuration Properties:

    Create properties for setting recordId from dynamic interaction.

    Test Dynamic Interaction:

    Let us test dynamic interaction by configuring it on the lightning app builder page.

    Create one lightning app builder page or use any existing app builder page. I have created a page with two sections. One section is containing the source component (accountSelector) and a second section shows the target component (accountAddress).

    Dynamic Interaction Configuration- SalesforceCodex

    To configure dynamic interaction, select accountSelector and click on interactions on the right side.

    Create new interaction similar to the below image. if we have a single event and properties by default Event and Interaction will be selected. Select target component from component picklist and in Record Id properties set value {!Event.recordId}, recordId (Record Id) is public properties created in target component.

    Dynamic Interaction Configuration- SalesforceCodex

    Demo:

    Related Post:

    Communicate Across Salesforce UI Technologies with Lightning Message Service

    Generic DataTable in Lightning Web Component

    References:

    Introducing Dynamic Interactions, the Latest Low-Code Innovation for Salesforce Platform

    Configure a Component for Dynamic Interactions in the Lightning App Builder

    component interaction dynamic datatable dynamic interaction event propagation lightning lightning component lightning map Lightning web component lightning-datatable lightning-map lwc
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleAWS Signature 4 Signing in Salesforce
    Next Article Custom Toast with custom duration In LWC
    Dhanik Lal Sahni
    • Website
    • Facebook
    • X (Twitter)

    With over 18 years of experience in web-based application development, I specialize in Salesforce technology and its ecosystem. My journey has equipped me with expertise in a diverse range of technologies including .NET, .NET Core, MS Dynamics CRM, Azure, Oracle, and SQL Server. I am dedicated to staying at the forefront of technological advancements and continuously researching new developments in the Salesforce realm. My focus remains on leveraging technology to create innovative solutions that drive business success.

    Related Posts

    By Dhanik Lal Sahni6 Mins Read

    How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI

    July 28, 2025
    By Dhanik Lal Sahni7 Mins Read

    Top Mistakes Developers Make in Salesforce Apex Triggers

    July 25, 2025
    By Dhanik Lal Sahni14 Mins Read

    The Ultimate Guide to Apex Order of Execution for Developers

    July 20, 2025
    View 3 Comments

    3 Comments

    1. Pingback: 20 Most Popular Salesforce Admin & Developer Blogs 2022 | Salesforce Ben

    2. Pingback: Integrate Google reCaptcha v3 into the Salesforce Sites

    3. Pingback: How to Export Data in Excel with SheetJS in LWC

    Leave A Reply Cancel Reply

    Ranked #1 Salesforce Developer Blog by SalesforceBen.com
    SFBenTopDeveloper
    Ranked #4 Salesforce Developer Blog by ApexHours.com
    ApexHoursTopDevelopers
    Categories
    Archives
    Tags
    apex (116) apex best practices (5) apex code best practice (10) apex code optimization (6) Apex logging (4) apex rest (11) apex trigger best practices (6) architecture (22) Asynchronous apex (9) AWS (5) batch apex (10) best code practice (4) code optimization (9) custom metadata types (5) design principle (9) flow (16) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (66) lightning-combobox (5) lightning-datatable (10) lightning component (32) Lightning web component (64) lwc (53) named credential (8) news (4) optimize apex (5) optimize apex code (6) optimize apex trigger (5) Permission set (4) Queueable (9) queueable apex (4) rest api (23) salesforce (150) salesforce apex (52) salesforce api integration (5) Salesforce Interview Question (5) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    MailChimp

    Expert Salesforce Developer and Architect
    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • The Ultimate Guide to Data Cleanup Techniques for Salesforce
    • How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI
    • Top Mistakes Developers Make in Salesforce Apex Triggers
    • Introducing Agentforce3 to Salesforce Developers
    • The Ultimate Guide to Apex Order of Execution for Developers
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • Top 10 Salesforce CRM Trends to Watch in 2025 July 18, 2025
    • Discover the Top 10 Salesforce AppExchange Apps to Boost Productivity July 10, 2025
    • Top 20 Salesforce Data Cloud Interview Questions & Answers for Admins June 5, 2025
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    Archives
    Categories
    Tags
    apex (116) apex best practices (5) apex code best practice (10) apex code optimization (6) Apex logging (4) apex rest (11) apex trigger best practices (6) architecture (22) Asynchronous apex (9) AWS (5) batch apex (10) best code practice (4) code optimization (9) custom metadata types (5) design principle (9) flow (16) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (66) lightning-combobox (5) lightning-datatable (10) lightning component (32) Lightning web component (64) lwc (53) named credential (8) news (4) optimize apex (5) optimize apex code (6) optimize apex trigger (5) Permission set (4) Queueable (9) queueable apex (4) rest api (23) salesforce (150) salesforce apex (52) salesforce api integration (5) Salesforce Interview Question (5) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.