Ouvrir un panneau Flow

Aperçu

L'interaction "Ouvrir le panneau Flow" héberge un Screen Flow en ligne au sein de votre composant dynamique. C'est idéal pour des scénarios où vous souhaitez :

• Un processus guidé, étape par étape qui est partie de la mise en page principale, et non une fenêtre contextuelle séparée.

• Le flow doit être visible aux côtés d'autres composants sur la page.

• Une expérience plus intégrée que celle fournie par une boîte de dialogue modale.

Différence clé avec "Ouvrir la boîte de dialogue Flow"

L'interaction "Ouvrir le panneau Flow" affiche le Screen Flow dans la mise en page du composant en tant que panneau. L'interaction "Ouvrir la boîte de dialogue Flow" affiche le Screen Flow dans une fenêtre modale superposée à la page. Les deux concernent des Screen Flows (Flows avec interface utilisateur), pas des Flows auto-déclenchés.

Tutoriels

Voyez des exemples concrets et apprenez comment implémenter des scénarios spécifiques utilisant cette interaction :

Comment transmettre plusieurs enregistrements sélectionnés d’un composant dynamique à un écran Flow

Comment ça fonctionne

1. Action de l'utilisateur (optionnelle) : L'utilisateur pourrait interagir avec un composant (par ex., cliquer sur un bouton) pour déclencher le panneau. Cependant, vous pouvez aussi configurer le panneau pour afficher le flow au chargement.

2. Apparition du panneau : L'interaction "Ouvrir le panneau Flow" rend la zone du panneau visible au sein du composant.

3. Exécution du Screen Flow : Le Screen Flow spécifié s'exécute dans dans le panneau.

4. Interaction de l'utilisateur avec le Flow : L'utilisateur interagit avec les écrans du Screen Flow, fournit des entrées et fait des choix, le tout à l'intérieur du panneau.

5. Passage de données (optionnel) : Vous pouvez transmettre des données depuis le composant dynamique vers le Flow en tant que variables d'entrée.

6. Sortie (optionnelle) : Le Flow peut renvoyer des données au composant dynamique en tant que variables de sortie.

7. Le panneau reste ouvert/ferme : Le panneau reste ouvert jusqu'à la fin du Flow, ou vous pouvez configurer des actions pour contrôler sa visibilité.

8. Actions post-exécution (optionnelles) : Vous pouvez configurer des actions à effectuer après la fin du Flow (par ex., afficher un message toast, actualiser des données).

Configuration

Pour configurer l'interaction "Ouvrir le panneau Flow" :

1. Sélectionnez le composant : Choisissez le composant Avonni qui hébergera le panneau Flow (ou déclenchera son affichage).

2. Ajoutez l'interaction : Dans le panneau des propriétés du composant, trouvez "Actions" ou "Interactions." Ajoutez une nouvelle action, en sélectionnant "Ouvrir le panneau Flow."

3. Configurez les paramètres :

   • Nom API du Flow : Sélectionnez le nom API du Screen Flow que vous souhaitez intégrer.

   • Variables d'entrée du Flow (optionnel) :

     • Nom : Le nom API de la variable d'entrée dans votre Screen Flow. Cette liste montre les variables déjà définies dans votre Screen Flow et marquées comme "Disponibles pour entrée". Vous devez créer ces variables d'entrée dans votre Flow avant de configurer cette interaction.

     • Valeur : La valeur à passer à la variable d'entrée sélectionnée. Cela peut être statique, dynamique (provenant du composant) ou une ressource.

   • Variables de sortie (optionnel) :

     • Nom : Le nom API de la variable de sortie dans votre Screen Flow.

     • Nom de la ressource : Le nom de la ressource (variable) dans votre composant dynamique pour stocker la valeur renvoyée.

   • En-tête du panneau (optionnel) : Définissez l'en-tête du panneau de flow.

   • Description accessible (optionnelle) : Fournissez une description pour les lecteurs d'écran.

   • À la fin (optionnel) : Configurez des actions à effectuer lorsque le Flow se termine avec succès (par ex., afficher un toast, actualiser des données, masquer le panneau).

   • À la fermeture (optionnel) : Configurez des actions à effectuer si l'utilisateur ferme le panneau (cela peut être possible ou non selon la façon dont vous configurez le panneau et le Flow).

   • En cas d'erreur (optionnel) : Configurez des actions à effectuer si le Flow rencontre une erreur.

Cas d'utilisation exemple

Mettre à jour les informations du contact en ligne

Imaginez que vous avez un tableau de données affichant des contacts. Vous souhaitez que les utilisateurs mettent à jour le Statut d'un contact directement depuis le tableau, sans naviguer vers une page d'édition séparée.

1. Créez le Screen Flow :

   • Créez un nouveau Screen Flow.

   • Ajoutez une variable d'entrée nommée ContactId (type Texte).

   • Ajoutez un élément "Récupérer des enregistrements" pour récupérer l'enregistrement Contact basé sur ContactId.

   • Ajoutez un élément Écran avec une liste de sélection (ou autre saisie) pour permettre à l'utilisateur de sélectionner un nouveau Statut.

   • Ajoutez un élément "Mettre à jour des enregistrements" pour mettre à jour le Statut champ du Contact.

   • Activez le Flow. Notez le nom API du Flow.

2. Ajoutez un composant tableau de données : Ajoutez un Data Table Avonni configuré pour afficher des Contacts à votre composant dynamique.

3. Ajoutez un bouton (action de ligne) : Ajoutez un composant Bouton en tant que action de ligne au tableau de données. Ce bouton déclenchera le panneau Flow.

4. Configurer l'interaction "Ouvrir le panneau Flow" :

   • Sélectionnez le composant Bouton (l'action de ligne).

   • Ajoutez une interaction "Ouvrir le panneau Flow".

   • Nom API du Flow : Entrez le nom API de votre Screen Flow.

   • Variables d'entrée du Flow :

     • Nom : ContactId

     • Valeur : @ThisItem.Id (Cela transmet l'ID du Contact sélectionné au Flow).

   • À la fin : Ajoutez des actions pour afficher un message de succès (Afficher un toast) et actualiser le tableau de données pour montrer le statut mis à jour.

5. Test : Enregistrez et testez. Cliquer sur le bouton dans une ligne du tableau de données devrait maintenant afficher votre Screen Flow dans un panneau, permettant à l'utilisateur de mettre à jour le statut du Contact directement dans le contexte du tableau de données.

Considérations importantes

• Uniquement Screen Flows : L'interaction "Ouvrir le panneau Flow" ne fonctionne qu'avec des Screen Flows.

• Noms des variables d'entrée/sortie : Les noms API doivent correspondre exactement.

• Visibilité du panneau : Réfléchissez attentivement à la façon dont la visibilité du panneau est contrôlée. Vous voudrez peut-être utiliser l'action "À la fin" pour masquer le panneau après la fin du Flow.

• Mise en page : Considérez la disposition de votre composant dynamique et la façon dont le panneau s'y intégrera.

En résumé

Le Panneau d'ouverture Flow est une interaction précieuse qui intègre de façon transparente les Screen Flows au sein de vos composants dynamiques, améliorant l'interaction utilisateur et rationalisant les flux de travail. En exploitant les variables d'entrée et de sortie, vous pouvez créer un échange de données dynamique entre le composant et le Flow intégré.