Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Ajout d’écrans à votre flux

Objectifs de formation

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

  • Répertorier les types de composants que vous pouvez ajouter aux écrans
  • Ajouter un écran de confirmation à un flux

Présentation des composants d’écran

Tout comme le Générateur d’applications Lightning permet de configurer l’expérience utilisateur de vos pages d’enregistrement, les écrans permettent d’en faire de même pour votre flux.

Chaque écran est composé d’un ou de plusieurs composants d’écran. Il s’agit d’éléments configurables et réutilisables qui viennent compléter les écrans.

Les composants d’écran sont classés dans trois catégories.

  • Entrée : composants standard qui demandent à l’utilisateur de saisir des informations.
  • Affichage : composants standard qui affichent des informations à l’utilisateur.
  • Personnalisés : composants créés par vous ou une autre personne. Installez-les à partir d’AppExchange ou d’une bibliothèque tierce, ou demandez l’aide d’un développeur pour créer les vôtres.

Choix dans les composants d’écran

La plupart des composants d’entrée standard requièrent une valeur telle qu’un nombre ou un paragraphe de texte. Pour les composants Case d’option, Liste de sélection, Groupe de cases à cocher et Liste à sélection multiple, l’utilisateur doit choisir cette valeur parmi un ensemble d’options. Pour connaître les options disponibles, sélectionnez au moins une ressource de choix ou d’ensemble de choix.

  • Un ensemble de choix d’enregistrement génère plusieurs options à l’aide d’une liste d’enregistrements filtrée.
  • Un ensemble de choix de liste de sélection génère plusieurs options en utilisant les valeurs d’un champ de liste de sélection ou de liste à sélection multiple.
  • Une ressource de choix seule représente une seule option, dont l’étiquette et la valeur sont définis manuellement.
Conseil

Conseil

Nous vous recommandons d’utiliser une ressource de choix uniquement lorsque vous ne pouvez utiliser aucune des deux autres options. En effet, les ensembles de choix d’enregistrement et les ensembles de choix de liste de sélection sont plus faciles à configurer et nécessitent une maintenance moins importante.

Comparaison des différentes expériences d’exécution

Lorsqu’on utilise des composants d’écran, il est important de savoir par quelles expériences d’exécution de flux ils sont pris en charge.

Il existe deux expériences d’exécution de flux différentes : l’exécution Lightning et l’exécution Classic. Comme son nom l’indique, l’exécution Lightning s’apparente à Lightning Experience. L’exécution Classic, elle, ressemble à Visualforce.

Comparaison de l’apparence d’un même écran de flux dans l’exécution Classic et dans l’exécution Lightning

Cela dit, ces deux expériences d’exécution ne sont liées à aucune des deux expériences de bureau. Vous pouvez donc utiliser l’exécution Lightning dans Salesforce Classic, ainsi que l’exécution Classic dans Lightning Experience.

Remarque

Remarque

Toutefois, sachez que nous n’améliorons plus l’exécution Classic. Si vous souhaitez tirer parti des améliorations apportées au fonctionnement des écrans de flux, utilisez l’exécution Lightning.

Tous les composants d’écran sont pris en charge dans l’exécution Lightning : ce n’est pas le cas dans l’exécution Classic. Voici trois éléments indiquant qu’un composant nécessite l’exécution Lightning.

  • L’icône du composant est un éclair.
  • Aucun aperçu n’est disponible pour le composant.Le composant Commutateur sur la zone de dessin de l’écran, qui indique qu’aucun aperçu n’est disponible pour lui
  • Un avertissement indiquant qu’un composant d’écran nécessite l’exécution Lightning s’affiche lorsque le flux est enregistré.Écran d’avertissement indiquant que certains composants d’écran nécessitent l’exécution Lightning pour fonctionner correctement.

L’élément Écran

Examinons ensemble les différentes parties de l’élément Écran.

L’élément Nouvel écran

Volet des composants d’écran (1) : le volet de gauche affiche l’ensemble des composants d’écran disponibles dans votre organisation. Cliquez et faites glisser un composant pour l’ajouter à l’écran.
Conseil

Conseil

Utilisez le champ de recherche pour trouver facilement le composant d’écran dont vous avez besoin.

Zone de dessin de l’écran (2) : la zone de dessin est l’endroit où vous élaborez votre écran. Faites glisser les composants pour les agencer dans l’ordre adéquat. Volet des propriétés (3) : en fonction de la sélection effectuée sur la zone de dessin, le volet des propriétés affiche les propriétés de l’écran ou bien celles du composant sélectionné. Pour afficher ou modifier les propriétés de l’écran, cliquez sur l’en-tête ou le pied de page de la zone de dessin.

Les propriétés de l’écran permettent d’indiquer si l’en-tête, le pied de page ou des options de navigation spécifiques doivent être affichés.

Retour sur les actions réalisées dans le projet

Observons l’écran que vous avez créé dans le projet Élaboration d’un flux simple.

Dans le flux Nouveau contact, ouvrez l’écran.
  1. Dans Configuration, saisissez Flux dans la case Recherche rapide, puis sélectionnez Flux.
  2. Ouvrez le flux Nouveau contact.
  3. Dans la zone de dessin, double-cliquez sur Informations de contact.

L’écran contient trois composants ayant besoin d’informations sur le contact : les deux premiers s’intéressent, respectivement, au nom du contact et au compte lui étant associé. Le dernier composant est un commutateur qui détermine quelle action réaliser lorsqu’un contact avec le même nom existe déjà.

L’écran « Informations de contact » dans le flux « Nouveau contact »

Composant Nom

Tout d’abord, intéressons-nous au composant Nom.

Les paramètres du composant Nom.

  • Le composant n’est ni désactivé ni en lecture seule.
  • Ici, le composant affiche uniquement les champs Prénom et Nom (il peut également afficher d’autres champs de nom, comme Deuxième prénom). Si le composant Nom de votre projet avait affiché un champ Civilité, les options disponibles auraient été M., Mme et Mlle.
  • L’étiquette du composant est Nom.

Vous avez besoin de pouvoir faire référence dans d’autres parties du flux aux valeurs saisies par l’utilisateur dans les champs Prénom et Nom. Lorsque vous utilisez le composant Nom, le seul moyen de faire référence à ces valeurs consiste à les stocker dans des variables. Pour ce faire, accédez à la section Stocker les valeurs de sortie.

Les valeurs Prénom et Nom sont stockées dans des champs de la variable d’enregistrement {!contact}.

Dans la section Stocker les valeurs de sortie, les valeurs saisies par l’utilisateur pour le prénom et le nom sont stockées dans des champs de la variable {!contact}.

Composant Compte

Intéressons-nous maintenant à Compte, un composant de type Liste de sélection.

Les paramètres du composant Liste de sélection.

  • L’étiquette du composant est Compte (1).
  • Le composant ne prend en charge que les choix et ensembles de choix du type de données Texte (2).
  • Les choix sont générés à l’aide de l’ensemble de choix d’enregistrement « comptes » (3).

Il n’est pas nécessaire de stocker manuellement la valeur du choix sélectionné dans une variable. En effet, vous pouvez très bien faire référence au composant d’écran par son nom d’API (Compte). Lorsque l’utilisateur sélectionne un compte, le composant d’écran est défini sur la valeur du choix sélectionné. La valeur de choix dépend de la manière dont l’ensemble de choix d’enregistrement a été configuré. Ici, il s’agit de l’ID du compte sélectionné.

Composant Commutateur

Pour finir, intéressons-nous au composant Commutateur.

Les paramètres du composant Commutateur.

  • Le texte affiché à côté du commutateur est le suivant : « Si ce contact existe déjà, mettre à jour l’enregistrement existant ».
  • Lorsque le commutateur est activé, il a pour étiquette Mettre à jour existant.
  • Sinon, son étiquette est Créer un autre contact.

Mise à jour du flux

Jetons un coup d’œil aux besoins opérationnels qui étaient décrits dans le module Concepts de base des flux.

Besoin Type d’élément à utiliser
Collecter les informations de l’utilisateur (nom, prénom et compte du contact) et définir la marche à suivre lorsqu’il existe un contact correspondant. Écran
Rechercher un enregistrement de contact identique. Action
Vérifier si un enregistrement équivalent a été trouvé. Logique
Si aucune correspondance n’a été trouvée, créer le contact. Action
Si une correspondance a été trouvée, mettre à jour le contact. Action
En cas de création ou de mise à jour du contact, noter les tâches du flux dans Chatter. Action
En cas de création ou de mise à jour du contact, confirmer la fin du flux. Écran

Le flux dispose déjà un écran permettant de collecter les informations de l’utilisateur. Nous pouvons donc considérer que la première condition est remplie. Toutefois, il manque encore un écran : celui confirmant la fin de l’exécution du flux.

Ajoutons donc cet écran de confirmation.

Ajout d’un écran de confirmation

  1. Si ce n’est pas déjà fait, ouvrez le flux « Nouveau contact », créé dans le projet Élaboration d’un flux simple.
  2. Faites glisser un élément Écran vers la zone de dessin.
  3. Saisissez une étiquette pour l’écran (Confirmation).
  4. Faites défiler la liste ou naviguez jusqu’à la section Contrôler la navigation, développez-la, puis désélectionnez Précédent. Laissez les autres propriétés de l’écran inchangées.
  5. Ajoutez un composant Texte d’affichage à l’écran. Dans le volet des composants de l’écran, recherchez Texte et faites glisser Texte d’affichage vers la zone de dessin.
  6. Attribuez au composant Texte d’affichage le nom d’API suivant : confirmation_message. Rédigeons maintenant un message qui remercie l’utilisateur et confirme ce que le flux a fait. Ce flux contient plusieurs branches. Soit il crée un contact, soit il met à jour un contact existant. Idéalement, le message de confirmation doit être soit : « Merci ! Le contact a été créé. », soit « Merci ! Le contact a été mis à jour. » Pour proposer des messages de confirmation personnalisés, vous pouvez :
    • Créer un message de confirmation statique valable pour toutes les possibilités. Par exemple : « Merci ! Le contact a été créé ou mis à jour. » Cette solution est facile à mettre en place, mais l’utilisateur se demandera immédiatement : « Justement… comment puis-je savoir s’il a été créé ou mis à jour ? »
    • Créer un message de confirmation dynamique qui est différent en fonction du résultat du flux.
    • Créer un écran de confirmation séparé pour chaque possibilité (pour que notre flux reste léger, faisons de cette option notre dernier recours).
    Comme un seul groupe de mots change entre les deux messages, une formule simple suffit à mettre en place un message dynamique.
  7. Dans la zone de texte, saisissez Merci ! Le contact a été XYZ. (Ne vous inquiétez pas, XYZ est un espace réservé pour la formule.)

Attelons-nous maintenant à l’élaboration de cette fameuse formule.

Message de confirmation dynamique contenant une formule

Commençons par une fonction IF : IF(logical_test, value_if_true, value_if_false)

Vérifiez, dans le cadre du test logique (logical_test), si le flux a créé le contact ou l’a mis à jour. Pour ce faire, insérez une référence à l’élément Créer des enregistrements. Le champ de fusion {!Create_Contact} renvoie la valeur « true » si le flux a exécuté l’élément Créer un contact. Sinon (si le flux a mis à jour le contact), le champ de fusion ne renvoie pas la valeur « true ».

Si le test logique a pour résultat « true », le flux a créé le contact. Si le test logique a pour résultat « false », le flux a mis à jour le contact. Ainsi, value_if_true correspond à « créé », et value_if_false à « mis à jour ».

Voici l’expression de la formule finale. IF({!Create_Contact}, "créé", "mis à jour")

Revenons maintenant au composant Texte d’affichage et mettons en œuvre cette expression.

  1. Dans le composant Texte d’affichage, cliquez dans la zone de recherche située au-dessus de la zone de texte, puis sur Nouvelle ressource. Le bouton Nouvelle ressource mis en évidence dans les options de la liste déroulante de la zone de recherche.
  2. Configurez la formule avec les valeurs suivantes, puis cliquez sur Terminé.
    Champ Valeur
    Type de ressource Formule
    Nom de l’API Created_or_updated
    Type de données Texte
    Formule IF({!Create_Contact}, "créé", "mis à jour")
    La formule « created_or_updated ».
  3. Dans le composant Texte d’affichage, remplacez XYZ par une référence à votre formule. Pour insérer la formule, cliquez à nouveau dans la zone de recherche, saisissez created et sélectionnez la formule que vous avez créée.
  4. Ajoutons maintenant un lien au contact créé ou mis à jour. Vous n’aurez même pas besoin d’utiliser de formules ! Créez un lien relatif à l’aide de l’ID de l’enregistrement de contact stocké dans la variable d’enregistrement {!contact}.
    1. Dans le message de confirmation, sélectionnez Le contact, puis cliquez sur le bouton Link.
    2. Supprimez le texte existant à l’aide de la touche Suppr ou Retour arrière de votre clavier, puis saisissez /{!contact.Id}.
    3. Cliquez sur Enregistrer.
  5. Sur l’élément Écran, cliquez sur Terminé. Le flux « Nouveau contact », avec le nouvel élément d’écran « Confirmation » mis en évidence.
  6. Enregistrez le flux et ignorez les avertissements : vous connecterez l’écran plus tard.

Maintenant, le flux dispose de deux écrans qui interagissent avec vos utilisateurs. Le premier, que vous avez configuré dans le projet Élaboration d’un flux simple, leur demande de saisir des informations. Le second, que vous avez élaboré dans cette unité, confirme ce que le flux a fait de ces informations. Intéressons-nous maintenant aux éléments logiques de base de Flow Builder.

Ressources