Les Screenflows et les composants personnalisés (LWC – Lightning Web Components) sont deux outils indispensables de l’écosystème Salesforce. Mais comment faire pour qu’ils échangent des informations en temps réel ? Si vous souhaitez qu’un choix fait dans un composant personnalisé mette instantanément à jour d’autres éléments de l’écran ou modifie les variables du flux sans forcer l’utilisateur à cliquer sur « Suivant », une communication bidirectionnelle est requise.

Découvrez comment configurer vos variables et déclencher des événements natifs pour faire interagir dynamiquement vos composants et vos flux d’écran.

Étape 1 : Configurer les variables dans le fichier XML du composant (.js-meta.xml)

Pour que votre Screenflow puisse lire et écrire des valeurs dans votre composant, vous devez déclarer ses propriétés d’entrée et de sortie dans son fichier de configuration.

• La cible lightning__FlowScreen : Elle indique à Salesforce que votre composant est éligible pour être inséré dans un écran de flux.

• Les rôles d’entrée et de sortie (Input / Output) : Dans le bloc <targetConfig>, l’attribut role définit le sens de communication. Utilisez "inputOnly" pour recevoir des données du flux (ex: un ID de record), et "outputOnly" pour renvoyer une information mise à jour par l’utilisateur vers le flux.

 

Étape 2 : Déclarer les propriétés publiques dans le contrôleur JavaScript (.js)

Une fois vos variables configurées dans le XML, vous devez les lier à la logique de votre contrôleur. Pour ce faire, utilisez le décorateur @api de Salesforce. Cela rend vos propriétés publiques et permet au moteur du Screenflow de s’y connecter (que ce soit pour y injecter une donnée de départ ou pour récupérer la valeur finale).

Pour les variables d’entrée, c’est également très simple, puisqu’il suffit de les déclarer avec l’annotation “api”.

Mon éditeur de code (ici VSCode) m’a automatiquement proposé d’insérer l’import “api” adéquat.

 

Étape 3 : Notifier le Screenflow des changements de valeur via le FlowAttributeChangeEvent.

Déclarer une variable de sortie ne suffit pas. Si l’utilisateur effectue une action dans le composant (comme cocher une case ou sélectionner une ligne), le Screenflow doit en être immédiatement notifié.

Pour cela, Salesforce fournit un événement natif très puissant : le FlowAttributeChangeEvent. L’avantage de cette méthode standard est qu’elle ne nécessite aucun package externe. Dans votre contrôleur JavaScript, vous devez importer cet événement depuis lightning/flowSupport, puis le distribuer (dispatch) en lui passant le nom de la variable modifiée et sa nouvelle valeur.

Étape 4 : Intégration et réactivité dans le Flow Builder

Une fois votre composant déployé, ouvrez le Flow Builder et insérez votre LWC personnalisé dans un écran. Vos paramètres d’entrée apparaissent dans le panneau de droite pour y mapper des variables de flux, et vos sorties sont prêtes à être stockées.

Grâce au déclenchement du FlowAttributeChangeEvent, vous constaterez une réactivité immédiate de l’écran du flux : chaque interaction sur le composant met à jour les autres éléments de la page en temps réel, offrant une expérience utilisateur fluide et moderne.

Conclusion : Une synergie technique au service de l’UX

Faire communiquer vos Lightning Web Components et vos Screenflows ne demande que quelques lignes de code supplémentaires conformes aux standards de Salesforce. En maîtrisant ces échanges, vous transformez vos formulaires rigides en véritables applications dynamiques et réactives.