Dynamic Interactions

Dynamic Interactions in Salesforce is a new way of communication between Lightning Web Components and Lightning App Builder. Now Developer can configure and expose the event in components. And admin can configure and create applications with components that communicate and transform based on user interactions, all in the Lightning App Builder UI. So an event occurring in one component on a Lightning page, such as the user clicking on an marker in a map, can automatically update other components on the page and display the details. Its GA from Winter 22.

Developers write custom components and using the new code developer define the events that are supported by a component and then expose them in the Lightning App Builder UI. Then, using new features inside the Lightning App Builder, an admin configures the event by setting up the interactions between the components.

There are four major building blocks for Dynamic Interactions:

• Event: 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. 
• Target: The item that’s the target of the interaction. 

An event occurring in one component (the source) can trigger changes in one or more other components on the page (the targets). Means a single source can have multiple targets. 

Now we will check how it works.

Create Events to Pass Data in LWC

We will first create Event in source LWC to pass data. You can check here how we can communicate using Event in LWC.

 const selectedEvent = new CustomEvent('itemsend', { detail: {inputUser}, });
 // Dispatches the event.
 this.dispatchEvent(selectedEvent);

Expose Events in the Lightning App Builder

Now we will Expose this event in LWC so we can use the same in Lightning App Builder.

<?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">
          <event name="itemsend" label="Item Send" description="This is a source component.">
             <schema>
                  {
                    "type": "object",
                    "properties": {
                      "inputUser": {
                        "type": "string",
                        "title": "User Input"
                      }
                    }
                  }
              </schema>
         </event>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

We 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 tag provides the shape of the event. Content in the Schema subtag must be in JSON format.

Configure event interactions (Dynamic Interactions) in the Lightning App Builder

Now we need to configure this Event in Lightning App Builder. For the demo purpose I have created two basic component. So now when you drop a component in App builder , you will notice a new tab Interactions. Click on the tab and you will notice Our custom Event name is there with a button name Add Interaction.

Click on that button and a new sub screen will open. Here you can select the component in which you want to trigger and pass the data.

Now select the component and we can set the property of target component from the event data.

Once we save this then we can add more interaction if needed. So with just using point and click Admin can configure the events and setup the Dynamic Interactions.

So we notice how easy it is now for admin to setup Dynamic Interactions. Previously we need to use Lightning Message Service for the same. We can also use Dynamic Interaction with Dynamic Action Bar. Now our final demo is ready.

Did you like the post or want to add anything, let me know in comments. Happy Programming 🙂