Salesforce Dynamic Interactions 🌩️

ADjema
KlintForce
Published in
4 min readNov 22, 2021

Comme chaque année, Salesforce ☁️ dévoile de nouvelles fonctionnalités toujours dans le but d’améliorer 🔝 son écosystème et l’expérience des utilisateurs. Annoncées il y a quelques mois déjà, les « interactions dynamiques » 🌩️ font leur entrée dans la liste des fonctionnalités phares de la release Winter’ 22 ❄️.

Dans cet article 📰 nous allons vous montrer en quoi consiste les interactions dynamiques et comment les configurer ⚙️.

C’est quoi les interactions dynamiques ❔

Les interactions dynamiques 🌩️ sont une nouveauté de Salesforce. Elles permettent de créer des applications avec des composants 🧱 pouvant communiquer 📢 entre eux, et réagir en fonction des actions 🖱️ de l’utilisateur.

La particularité de cette fonctionnalité est sa programmation Low-code 👨‍💻. La configuration se fait ainsi dans le Lightning App Builder 🏗️. Votre administrateur peut utiliser des composants et des évènements déclencheurs préprogrammés par votre développeur 💻 pour définir les interactions entre composants.

🚨 Actuellement, seuls les composants web Lightning personnalisés et le composant Barre d’actions dynamiques peuvent supporter les interactions dynamiques.

Faire interagir vos composants Lightning dynamiquement ⚡

Les interactions dynamiques rendent vos pages Lightning ⚡ plus dynamiques 🏃‍♂️ et interactives. Si un utilisateur exécute une action 🖱️ sur un composant (un clic sur un élément d’une liste ou l’introduction ⌨️ d’une valeur dans un champ par exemple), cela peut entrainer une réaction sur un ou plusieurs autres composants (affichage des détails d’un élément par exemple).

Prenons l’exemple ci-dessous. Pour illustrer une interaction dynamique 🌩️, nous avons créé une page d’application Lightning dans l’App Builder 🏗️. Nous avons au préalable crée deux composants web Lightning ⚡ personnalisés et défini un évènement déclencheur. Quand l’utilisateur introduit un texte 📝 dans le champ du premier composant, le texte est instantanément affiché 🖥️ dans le second composant. Les composants communiquent 💬 ainsi entre eux de manière dynamique.

Interaction dynamique entre deux composants web Lightning

Configurer les interactions dynamiques sur l’App Builder 🏗️

Les interactions dynamiques 🌩️ résultent d’une collaboration 🤝 entre votre développeur et votre administrateur Salesforce:

  • Le développeur 👨‍💻 crée les composants et les évènements avant de les déployer dans l’interface utilisateur de l’App Builder.
  • L’administrateur 🖱️ peut les utiliser lors de la création d’une page Lightning ⚡ et définir ainsi les interactions entre les composants.

Voici les étapes à suivre pour configurer ⚙️ des interactions dynamiques :

Déclaration d’évènements sur vos composants

Avant que l’administrateur ne puisse utiliser les composants personnalisés 🧱 dans l’App Builder, le développeur 💻 doit définir l’évènement 📅 que le composant source (dans notre exemple Input Text) devra émettre. L’évènement ici sera d’écrire ✍️ du texte dans le champ du composant source.

Le code suivant permet d’exposer l’évènement dans le composant source.

L’évènement <event> est exposé via la balise <targetConfigs>

Si vous souhaitez reproduire le même exemple que dans l’article, l’ensemble du code des composants utilisés est disponible ici.

Configuration de l’interaction dynamique dans l’App Builder

Maintenant que le développeur a défini l’évènement, l’administrateur peut configurer l’interaction sur l’App Builder.

Créer ➕ ou modifier 🖊️ une page d’application dans le Lightning App Builder.

Les composants web Lightning programmés doivent être déployés et visibles 👁️ sur l’interface de votre App Builder.

Ajouter les composants personnalisés à votre page Lightning.

Composants Web Lightning personnalisés crées par le développeur, déployés dans l’App Builder

Cliquer sur votre composant source (composant qui déclenche l’évènement).

Dans le volet des propriétés, cliquer sur l’onglet interactions → Add Interaction.

Une fois les détails de l’interaction affichés, sélectionner le composant ciblé 🎯 par l’interaction, puis définir la nouvelle valeur à attribuer à la propriété cible lorsque l’événement se déclenche.

🚨 L’expression pour attribuer une valeur à la propriété cible est de type :{!Event.PropertyName}.

Dans notre exemple, nous avons configuré une interaction entre le composant source Input Text et le composant cible Display text

Sauvegarder 💾 la page et l’activer ✔️ s’il s’agit d’une nouvelle page.

Il ne vous reste plus qu’à accéder à votre page Lightning depuis l’App Launcher et à tester vos interactions dynamiques 😉.

Un grand merci à Rburias (Romain Burias) avec qui j’ai collaboré pour la rédaction ✍️ de cet article 📰.

--

--