Amélioration de l’apparence de vos écrans

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

• Définir les boutons de pied de page d’un écran de flux
  
• Diviser un écran de flux en plusieurs sections et colonnes
  
• Configurer un composant d’écran pour qu’il s’affiche uniquement dans certaines conditions
  
• Configurer un composant d’écran pour qu’il accepte uniquement les entrées valides
  

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Ce badge fait partie d’une série de badges permettant d’apprendre à maîtriser Flow Builder. Le parcours Élaboration de flux avec Flow Builder vous guide de A à Z dans l’apprentissage de tous les aspects relatifs à Flow Builder. Suivez cette recommandation de série de badges pour acquérir de solides compétences en automatisation des processus et devenir un spécialiste de Flow Builder.

Dans ce module, vous avez créé un flux qui pose de nombreuses questions aux agents de support, puis qui crée une requête. C’est une bonne chose, mais nous pouvons l’améliorer. Nous pouvons le rendre meilleur, plus puissant, plus rapide… Ou, tout du moins, nous pouvons le rendre plus ordonné, plus facile à utiliser et adapté à vos besoins en matière de données. Libérons tout le « fluxtentiel » de vos écrans !

Définition des boutons de pied de page d’un écran

Les agents de support de Pyroclastic rencontrent des difficultés lorsqu’ils exécutent le flux Create Case for Contact (Créer une requête pour un contact). Lorsqu’ils cliquent sur Finish (Terminer) sur le dernier écran, le flux redémarre de manière inattendue depuis le début et ils ne savent pas quoi faire. Parfois, ils génèrent deux nouvelles requêtes au lieu d’une. Après quelques dépannages et investigations, Flo découvre que le problème se produit lorsqu’un agent clique sur le bouton Previous (Précédent) sur l’écran final. Examinez le flux une nouvelle fois.

Si un utilisateur clique sur le bouton Previous (Précédent), il revient à l’écran précédent : Questions Page 2. Lorsque l’utilisateur clique sur Next (Suivant) pour continuer, le flux exécute l’élément Create Case (Créer une requête) une seconde fois (ce que nous ne voulons pas) !

Il est recommandé de rendre vos flux aussi transparents et infaillibles que possible. Supprimez les boutons inutiles et attribuez à chaque bouton une étiquette décrivant ce qu’il se passe lorsqu’un utilisateur clique dessus. 

Personnalisons les boutons des écrans Questions Page 2 et File Upload (Chargement de fichier), et masquons ce bouton Previous (Précédent) potentiellement dangereux sur l’écran File Upload (Chargement de fichier).

1. Ouvrez le flux Create Case for Contact (Créer une requête pour un contact).
   
2. Dans l’élément Questions Page 2, assurez-vous qu’aucun composant n’est sélectionné dans la zone de dessin de l’écran.
   
3. Dans le menu latéral Screen Properties (Propriétés de l’écran), cliquez sur Configure Footer (Configurer le pied de page).
   
4. Pour Next or Finish Button (Bouton Suivant ou Terminer), sélectionnez Use a custom label (Utiliser l’étiquette standard).
   
5. Pour Next or Finish Button Label (Étiquette du bouton Suivant ou Terminer), saisissez Create Case (Créer une requête).
   
6. Cliquez sur Terminé.
   
7. Dans l’élément File Upload Screen (Écran de chargement de fichier), assurez-vous qu’aucun composant n’est sélectionné dans la zone de dessin de l’écran.
   
8. Dans le menu latéral Screen Properties (Propriétés de l’écran), cliquez sur Configure Footer (Configurer le pied de page).
   
9. Pour Next or Finish Button (Bouton Suivant ou Terminer), sélectionnez Use a custom label (Utiliser l’étiquette standard).
   
10. Pour Next or Finish Button Label (Étiquette du bouton Suivant ou Terminer), saisissez Restart (Redémarrer).
    
11. Dans Previous Button (Bouton précédent), sélectionnez Hide Previous (Masquer Précédent).
    
12. Cliquez sur Done (Terminé) pour enregistrer le flux.
    

Désormais, lorsque le flux exécute l’écran Questions Page 2, le bouton Next (Suivant) indique à l’utilisateur exactement ce qu’il se passe lorsqu’il clique dessus : le flux crée une requête.

Lorsque le flux exécute l’écran File Upload (Chargement de fichier), le bouton Finish (Terminer) porte l’étiquette plus claire Restart (Redémarrer) et le bouton Previous (Précédent) est masqué.

La section Configure Footer (Configurer le pied de page) contient également des paramètres pour le bouton Pause, mais ce dernier n’apparaît que s’il est activé dans les paramètres à l’échelle de l’organisation. Le bouton Pause permet aux utilisateurs d’interrompre leur progression dans un flux, en enregistrant le flux pour le reprendre plus tard. Pour plus d’informations, consultez Préparation de votre organisation pour les interviews de flux interrompues dans l’aide Salesforce.

Organisation des composants dans des lignes et des colonnes

Flo a intégré le flux Create Case for Contact (Créer une requête pour un contact) dans la colonne la plus large d’une page Lightning de contact. L’écran de flux contient désormais de nombreux espaces blancs inutilisés. De plus, le deuxième écran comporte de nombreuses questions qui occupent beaucoup d’espace vertical. Comment pouvons-nous utiliser l’espace de l’écran plus efficacement ?

Le composant Section divise un écran de flux en plusieurs colonnes, vous permettant de positionner les composants côte à côte et d’utiliser cet espace blanc horizontal. Dans le composant Section, vous définissez le nombre de colonnes et la largeur relative de chaque colonne.

Ajoutez des composants Section à vos écrans pour utiliser cet espace supplémentaire.

Mise à jour de l’écran Questions

1. Ouvrez l’élément Questions.
   
2. Faites glisser Section du menu latéral Components (Composants) vers le haut de la zone de dessin de l’écran.
   
3. Dans le menu latéral Section, cliquez sur +Add Column (+Ajouter une colonne).
   
   
4. Faites glisser le composant Display Text (Texte d’affichage) SayThisText vers la première colonne vide.
   La surbrillance verte indique quelle section est active lorsque vous vous déplacez sur la zone de dessin. Déposez le composant dans la première colonne lorsqu’elle est en surbrillance.
   
   
5. Faites glisser le composant Long Text Area (Zone de texte longue) Problem Description (Description du problème) vers la première colonne, sous SayThisText.
   
6. Faites glisser le composant Text (Texte) Case Subject (Objet de la requête) vers la deuxième colonne.
   
7. Faites glisser le composant Toggle (Bouton bascule) CloseCase vers la deuxième colonne, sous ScreenSubject.
   La zone de dessin de votre écran doit ressembler à ceci.
   
   
8. Cliquez sur Terminé.
   

Mise à jour de l’écran Questions Page 2

1. Ouvrez l’élément Questions Page 2.
   
2. Faites glisser Section du menu latéral Components (Composants) vers le haut de la zone de dessin de l’écran.
   
3. Dans le menu latéral Section, cliquez sur +Add Column (+Ajouter une colonne).
   
4. Définissez la largeur de la colonne 1 sur 9 of 12 (9 sur 12).
   
5. Faites glisser le composant Data Table (Tableau de données) Point of Contact (Point de contact) vers la première colonne.
   
6. Faites glisser le composant Radio Buttons (Cases d’option) What priority would the customer assign to this case (Quelle priorité le client attribuerait-il à cette requête) dans la deuxième colonne.
   
7. Faites glisser une autre section du menu latéral Components (Composants) vers la zone de dessin de l’écran, sous le premier composant Section.
   
8. Dans le menu latéral Section, cliquez deux fois sur +Add Column (+Ajouter une colonne).
   La deuxième section comporte désormais trois colonnes.
   
9. Modifiez la largeur des colonnes comme suit :
   

• Largeur de la colonne 1 : 3 sur 12
  
• Largeur de la colonne 2 : 3 sur 12
  
• Largeur de la colonne 3 : 6 sur 12 (demi-largeur)
  

10. Faites glisser le composant Lookup (Référence) QA Reviewer (Réviseur QA) vers la première colonne de la deuxième section.
    
11. Faites glisser le composant Record Field (Champ d’enregistrement) Case Reason (Motif de la requête) vers la deuxième colonne de la deuxième section.
    
12. Faites glisser le composant Checkbox Group (Groupe de cases à cocher) In which timeslots can we call the customer for follow-up if needed (À quels créneaux horaires pouvons-nous appeler le client pour effectuer un suivi si nécessaire) dans la troisième colonne de la deuxième section.
    La zone de dessin de votre écran devrait ressembler à ce qui suit.
    
    
13. Cliquez sur Done (Terminé) pour enregistrer le flux.
    

Pour voir vos écrans réorganisés en action, enregistrez le flux et cliquez sur Run (Exécuter). Cet écran est si esthétique que vous devriez vous appeler Michelangeflow !

Contrôle de l’apparition des composants

Tout comme les composants de page Lightning, les composants d’écran de flux prennent en charge la visibilité conditionnelle. Lorsque vous ajoutez une visibilité conditionnelle à un composant, le flux affiche le composant uniquement lorsque les conditions que vous spécifiez sont remplies. Ces conditions peuvent faire référence à n’importe quel élément du flux, y compris à d’autres composants sur le même écran.

Les agents de support de Pyroclastic n’ont pas besoin de voir les créneaux horaires pour le suivi, à moins qu’ils ne sélectionnent un motif susceptible de nécessiter un suivi. Alors simplifions le flux avec un peu de visibilité conditionnelle.

1. Ouvrez l’élément Questions Page 2 et sélectionnez le composant de groupe de cases à cocher CallbackTimes.
   
2. Cliquez sur Set Component Visibility (Définir la visibilité du composant).
   
3. Dans When to Display Component (Quand afficher le composant), sélectionnez All Conditions Are Met (AND) (Toutes les conditions sont remplies [ET]).
   
4. Pour Resource (Ressource), sélectionnez caseVar> Reason (Motif).
   
5. Pour Opérateur, sélectionnez Égal à.
   
6. Pour Value (Valeur), saisissez Equipment Complexity,Performance,Breakdown,Equipment Design,Other (Complexité des équipements,Performances,Panne,Conception des équipements,Autre).
   Ces valeurs correspondent à toutes les options de cette liste de sélection, à l’exception d’Installation et de Feedback (Commentaires). Lorsque vous saisissez toutes les options souhaitées séparées par des virgules, Salesforce traite chaque valeur comme une option valide. Vous pouvez également définir When to Display Component (Quand afficher le composant) sur Any Condition is Met (OR) (N’importe quelle condition est remplie [OU]) et ajouter chaque option viable en tant que condition distincte.
   
   
7. Cliquez sur Done (Terminé) dans la fenêtre contextuelle.
   
8. Cliquez sur Done (Terminé) pour fermer l’élément d’écran.
   
9. Enregistrez le flux.
   

Désormais, lorsque le motif de la requête est défini sur une valeur autre que Installation ou Feedback (Commentaires), le composant CallbackTimes apparaît. Remplacez le motif de la requête par Installation ou Feedback (Commentaires), et la question disparaît. Cliquez sur le bouton Run (Exécuter), accédez au deuxième écran et essayez par vous-même !

Amélioration de la qualité des données dans les composants

Les responsables de support de Pyroclastic ont une dernière demande concernant le flux Create Case for Contact (Créer une requête pour un contact). Certaines descriptions de requête sont trop brèves et ne contiennent pas suffisamment d’informations sur l’appel. Flo vous demande d’implémenter un nombre minimal de caractères obligatoires dans le champ de description.

Heureusement, vous pouvez ajouter une validation aux composants d’écran. C’est comme ajouter une règle de validation à chaque composant. Il existe cependant une différence majeure.

• Une règle de validation se déclenche lorsque sa formule renvoie TRUE (VRAI).
  
• Une validation des composants de l’écran se déclenche lorsque sa formule renvoie FALSE (FAUX).
  

Ajoutons une limite minimale de 20 caractères au composant Problem Description (Description du problème).

1. Ouvrez l’élément Questions et sélectionnez le composant Problem Description (Description du problème).
   
2. Dans le volet des propriétés, cliquez sur Validate Input (Valider l’entrée).
   
3. Pour Error Message (Message d’erreur), saisissez Please add more detail. (Veuillez ajouter plus de détails.)
4. Pour Formula (Formule), saisissez LEN({!ScreenDescription}) >= 20
   
   
5. Cliquez sur Done (Terminé) pour enregistrer le flux.
   

Désormais, lorsqu’un utilisateur saisit une description de moins de 20 caractères, le flux affiche le message d’erreur et empêche l’utilisateur de continuer jusqu’à ce qu’il ait ajouté du texte. Bien sûr, cela ne veut pas dire qu’il ajoutera des détails pertinents, mais c’est un encouragement qu’il est difficile d’ignorer.

Dans ce badge, vous avez appris à créer un flux d’écran. Ensuite, consultez le badge Distribution de flux d’écran pour apprendre à intégrer des flux d’écran là où vos utilisateurs en ont besoin.

Ressources

• Aide Salesforce : Composant de sortie de l’écran de flux : Section
• Aide Salesforce : Considérations relatives à la visibilité conditionnelle dans les flux
• Aide Salesforce : Validation de l’entrée de l’utilisateur sur les écrans de flux