Image of Astro pointing to a computer screen that has an example of Dynamic Interactions in action.

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

By

As part of our continuing drive to make Lightning pages more dynamic and interactive, we are excited to give you a sneak peek at our next big thing™ to address this issue: Dynamic Interactions

Today, if you want components on a Lightning page to talk to each other, you need developers to write code and wire events up. We want anyone to be able to point-and-click their way through the App Builder to build this experience.

Coming soon, an event occurring in one component on a Lightning page, such as the user clicking on an item in a list view, can automatically update other components on the page. Dynamic Interactions lets admins create applications with components that communicate and transform based on user interactions, all in the Lightning App Builder UI. It unlocks capabilities for admins that were previously reserved only for developers.

How does it work? To get the most out of Dynamic Interactions, admins and developers work together.

Developers write custom components that power the interactions. New code lets a 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: 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. 
  • 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). A single source can have multiple targets. 

The story

Kai (they/them) and Rina (she/her) are an admin and developer team. Kai wants to give their on-the-go users an easy way to check the location of various accounts so they can plan efficient site visits, using a simple app page.

Kai enlists Rina’s help to make this happen, and Rina suggests Dynamic Interactions. As a developer, Rina knows that she can wire up events between components using code, but she wants to give Kai the freedom and power to configure the event interactions in the way that they need to, without being required to come back to her every time a change is necessary.

Rina creates a custom source component for Kai, plus two other components to act as event targets. After installing the new components in their org, here’s what Kai’s got: an app page with three custom components — Account List, Account Detail, and Account Location (a map). 

The source component is the Account List on the left. It has an “Item Selected” event enabled, which Rina exposed to the Lightning App Builder UI using new Dynamic Interactions code. After Kai finishes configuring the event interactions, when a user clicks a list item in the Account List component, the event fires. The Account Detail component updates to show that account’s details, and at the same time, the Account Location component pinpoints that account’s location on a map. Every new click or tap on an account in the list results in an update in the content in the other two components.

Image of an an app page with three custom components: Account List, Account Detail, and Account Location (a map).

It all begins with Lightning Web Components

As we mentioned, it takes both admins and developers to make Dynamic Interactions shine. And the keystone for the whole process is a custom source component. Only Lightning Web Components (LWCs) can be source components, but any component (Aura or LWC) can be a target. 

How did Rina expose events from her source component? First, she fired standard JavaScript CustomEvents in the .js file. To make the event discoverable for Dynamic Interactions, she used some new metadata available for the component js-meta.xml file, similar to how properties for builders are exposed. 

Developers, if you’re curious what this looks like, we have a sample js-meta.xml file for you at the end of this post.

Configure event interactions in the Lightning App Builder

After Rina makes the event available in the Lightning App Builder via the Account List component, Kai connects the dots between the source and target components using a new Dynamic Interactions UI in the Lightning App Builder properties pane. 

If a component has events exposed, when you select it on the canvas, the properties pane for that component displays with two tabs. The Properties tab contains the component properties that you’re familiar with. The Events tab is new for Dynamic Interactions. It lists all of the events that are exposed for the selected component. Here is the properties pane that Kai sees when they click on the Account List source component in the Lightning App Builder.

Image showcasing the Properties tab and the new Events tab.

The Item Selected event is available, but no interactions are set up for it. Kai can do that easily by clicking Add Interaction, selecting an interaction, then choosing a component to be the target of the interaction.

Components display in the list with their region location to help you select the correct component when working on pages with many components spread across multiple regions.

When you select a target component, its properties appear in the Interaction Details pane. There, you can define the new value that you want each target property to have when the event triggers and the interaction happens. 

Here, Kai the admin is configuring an interaction between the Account List source component and the Account Location target component. After Kai selects Account Location as the target, its Record Id property appears, ready for Kai to give it a new value.

Image showcasing how the Record ID property appears after "Account Location" was selected at the target.

Kai’s goal for the interaction is that when a user clicks on an account in the list, the Account Location component updates to show the selected account’s location as a point on a map. Passing the record ID into the Account Location component tells the component what record to look at to pull the address information. Rina made the recordId property available as part of the event, so Kai can use the {!Event.recordId} expression in this field.

Image that shows that the recordID property is available as part of the event.

New additions to the js-meta.xml file

As we promised earlier, here’s the js-meta.xml configuration file for the sample Account List source component Rina created.

Dynamic Interactions introduces two new <targetConfig> subtags that can be used in a source component’s js-meta.xml file to expose an event. 

  • <event>: Exposes the event for Dynamic Interactions, which allows it to show up as an available event on the Events tab when an admin clicks on the source component in the Lightning App Builder UI.
  • <schema>: Provides the shape of the event. 
<?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 List</masterLabel>

<targets>

         <target>lightning__AppPage</target>

</targets>

<targetConfigs>

         <targetConfig targets="lightning__AppPage">

         <property name="apiName" type="String"/>

         <property name="listViewApiName" type="String"/>

          <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",

                      },

                      "apiName": {

                        "type": "string"

                      }

                    }

                  }

              </schema>

         </event>

         </targetConfig>

</targetConfigs>

<description>meta xml description</description>

</LightningComponentBundle>

How would you use the power of Dynamic Interactions to create more powerful apps? Start thinking about it now, because it will be Generally Available (GA) in Winter ’22. More information coming soon! 

Resources

Screenshot of lightning setup page

Take a Tour of Setup Home in Lightning Experience

Editor’s Note: This is one of our most popular posts, so we’ve updated it with the latest information and resources. You’ve probably been on a tour before at a museum, historical site, or even your best friend’s new home. Didn’t you learn a lot more than by stumbling through on your own? Well, consider this […]

READ MORE

Learn Lightning: Create an App

  The next step in our journey to learn Lightning is to create an app. Here we go! 1. In Lightning, there’s a handy App Manager in Setup, which allows you see all your apps in one place and make changes to them. 2. From that App Manager page, you can click New Lightning App […]

READ MORE

Have an Idea for a Story?

We are all about the community and sharing ideas.
Do you have an interesting idea or useful tip that you want to share?

SHARE YOUR IDEA