What Is Dynamic Interaction and How It Works?
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.
In other words, we can say that Dynamic Interactions is used 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.
Dynamic Interaction – 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.
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.
- Target: The item that’s the target of the interaction. Any component on a Lightning page can be a target.
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.
It all begins with Lightning Web Components
As 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.
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.
NOTE: These subtags are only available for a <targetConfig> with the target <lightning__AppPage>.
Dynamic Interactions Considerations
You need to keep these considerations in mind when working with Dynamic Interactions.
- Informational components within target components are ignored when the target component’s properties are shown in the Event property editor.
- If you switch page templates for a page that contains Dynamic Interactions, the available template list shows only templates that support Dynamic Interactions.
- Aura components re-render when an interaction targeting them is triggered.
- Autocomplete doesn’t work when entering an expression in the rich text editor.
- After a component’s event metadata is used on a Lightning page or released as part of a managed package, certain breaking changes aren’t allowed, such as removing the event, renaming a property, or changing a property type.
- Dynamic Interactions uses only type and properties from the schema. All other items in the schema are ignored.
- The only supported property attributes are type, title, and description.
- In the event schema, the only valid property types supported are String, Integer, and Boolean.
- The event tag metadata isn’t validated against the .js file.
Expressions in Dynamic Interactions Target Properties
An expression is a small chunk of code that can be evaluated to a value. It can be as literal and simple as 1+1 or a more complex combination of variables, operators, and functions. One expression is supported for Dynamic Interactions in the Lightning App Builder: {!Event.eventPropertyName}. You can use this expression when setting target component property values in the Lightning App Builder UI and in Metadata API. The value of the eventPropertyName part of the expression varies based on which properties the developer makes available for the event in the source component.
Dynamic Interactions Limits and Limitations
You need to keep these considerations in mind when working with Dynamic Interactions in the Lightning App Builder.
- Dynamic Interactions is supported only on app pages.
- Only LWC custom components can be source components, but any component present on the page (Aura or LWC) can be a target.
- Dynamic Interactions isn’t supported on pages based on custom page templates.
- Only String and Rich Text type properties can use expressions to define their values.
- The “required” property restriction isn’t respected when defining a new value for a target property in Dynamic Interactions, regardless of its type or whether it’s defined with an expression.
- Event is the only context supported for expressions in interactions.
- You can use expressions only for properties of type String, Integer, and Boolean.
- You can’t set a target property value as an array or list of values, such as a multi-select picklist.
- You can set a target property value of a String attribute to empty using Metadata API but not in the Lightning App Builder UI.
- Dynamic Interactions doesn’t work in the Mobile Only app in the Salesforce mobile app or in the legacy tablet mobile experience.
- When a dependent property is auto populated with a value based on a selection you made or a value you entered in another property, the auto populated value isn’t saved unless you “touch” the dependent property field by clicking into it or tabbing to it.
Summary
In short, we can say that Dynamic Interactions is used 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.
Dynamic Interactions also has some limits and limitations which we need to keep in mind when working with Dynamic Interactions in the Lightning App Builder.