Salesforce Dynamic Interactions 🌩️
Every year, Salesforce ☁️ unveils new features to improve 🔝 its ecosystem and user experience. Announced a few months ago, “dynamic interactions” 🌩️ is one of the top features of the Winter’ 22 ❄️ ️release.
In this article 📰, we will show you what is dynamic interactions and how to configure them ⚙️.
What is “dynamic interactions” ❔
Dynamic interactions 🌩️ is a new feature available on Salesforce. It allows users to create applications with components 🧱 that can communicate 📢 with each other, and react according to the user’s actions 🖱️.
The interesting aspect of this feature is that it is Low-code programming 👨💻. The configuration is done in the Lightning App Builder 🏗️. Your administrator can use components and trigger events written by your developer 💻 to define the interactions between components.
🚨 Currently, only the custom Lightning web components, and the Dynamic Action Bar are supported by dynamic interactions.
Make your Lightning components interact dynamically ⚡
Dynamic interactions make your Lightning pages ⚡ more dynamic 🏃♂️ and interactive. If a user performs an action 🖱️ on a component (e.g. clicking on an item of a list or entering ⌨️ a value in a field), this may cause a reaction on one or many other components (e.g. displaying the details of an item).
Let’s take the example below. We created a Lightning page in the App Builder to illustrate a dynamic interaction 🌩️. We’ve previously created two custom Lightning web components ⚡ and defined a trigger event. When the user enters a value 📝 in the field of the first component, the value is instantly displayed 🖥️ in the second component. As you can see, the components communicate 💬 dynamically with each other.
Configuration in the Lightning App Builder 🏗️
Dynamic interactions 🌩️ are the result of collaboration 🤝 between your developer and your Salesforce administrator :
- The developer 👨💻 creates the components and the events before deploying them in the App Builder user interface.
- The administrator 🖱️ can use them when creating a Lightning page ⚡ and thus define the interactions between the components.
Here are the steps to follow to configure ⚙️ dynamic interactions :
Declare event on your components
Before the administrator can use the custom components 🧱 in the App Builder, the developer 💻 must define the event 📅 that the source component (Input Text component in our example) should trigger. The event here will be to write text value ✍️ in the source component’s field.
The following code exposes the event in the source component.
If you want to reproduce the same example as in the article, the whole code of the components is available here.
Configuration of dynamic interaction in the App Builder
Now that the developer has defined the event, the administrator can proceed to the configuration of the interaction in the App Builder.
Create ➕ or edit 🖊️ an application page in the Lightning App Builder.
The Lightning web components should be deployed and visible 👁️ on your App Builder’s interface.
Add the custom components to your Lightning page.
Click on your source component (component that triggers the event).
In the property's pane, click on the interactions tab → Add Interaction.
Once the details of the interaction are displayed, select the component targeted 🎯 by the interaction, then define the new value to assign to the target property when the event is triggered.
🚨 The expression to assign a value to the target property is of type: {!Event.PropertyName}.
Save 💾 the page and proceed to activation ✔️ if it is a new page.
Now all you have to do is access your Lightning page from the App Launcher and test your dynamic interactions 😉.
Thanks to Rburias (Romain Burias) for his collaboration in writing ✍️ this article 📰.
