• Accueil / Salesforce / Interactions dynamiques : didacticiel…
, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Interactions dynamiques : didacticiel de plongée profonde2 minutes de lecture


Winter ’22 apporte de nombreuses nouvelles fonctionnalités, l’une des plus excitantes étant Dynamic Interactions devenant GA. Outre les formulaires dynamiques et les actions dynamiques, ils donnent encore plus de pouvoir à tous les #AwesomeAdmins de Salesforce.

Dans cet article, nous verrons ce que sont les interactions dynamiques, comment commencer, comment mettre à jour vos composants, ainsi que ce qui est et n’est pas pris en charge.

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Que sont les interactions dynamiques ?

Les interactions dynamiques sont une nouvelle façon de permettre à plusieurs composants sur la même page d’application d’interagir les uns avec les autres. Auparavant, si vous aviez 2 composants dans App Builder, il n’y avait pas de moyen simple de les faire communiquer entre eux.

Par exemple, si un utilisateur clique sur un élément dans une vue de liste, vous ne pouvez pas automatiquement mettre à jour les autres composants de la page. Eh bien, vous pourriez, mais vous auriez besoin de demander à un développeur d’écrire le code pour connecter les 2 composants ensemble.

Pas plus! Entrez Dynamic Interactions, un excellent moyen pour tout administrateur de câbler les composants eux-mêmes, avec simplement des outils pointer-cliquer.

Premiers pas avec les interactions dynamiques

Jusqu’à présent, aucun composant prêt à l’emploi n’est disponible pour une utilisation avec les interactions dynamiques. Si vous souhaitez suivre ce didacticiel, nous avons créé un package contenant des composants de démonstration.

Nous ne recommandons pas de les ajouter à un environnement de production réel ; même si aucun mal ne serait fait, ces composants ont juste été créés pour présenter une démo de la fonctionnalité et peuvent ne pas être prêts pour la production.

Alors, commençons. Après avoir installé le package, accédez à App Builder et créez une nouvelle page d’application.

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Vous pouvez choisir le modèle de votre choix, j’utiliserai la « région principale et la barre latérale droite » dans ce didacticiel.

  • Ajoutez le composant « Liste des comptes » dans la section de gauche, et « Emplacement du compte » et « Détails du compte » dans la section de droite, l’un au-dessus de l’autre.

Vous devriez avoir quelque chose comme ça :

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>
  • Cliquez sur le composant « Emplacement du compte ». Vous pouvez voir qu’un attribut « ID d’enregistrement » est disponible. Jusqu’à aujourd’hui, il ne pouvait être codé en dur ou utilisé sur une page d’enregistrement que pour un enregistrement spécifique.
, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Au lieu de définir un identifiant ici, nous utiliserons une valeur dynamique, provenant d’un autre composant.

  • Cliquez sur le composant « Liste des comptes » dans le canevas et remarquez qu’il y a quelque chose de nouveau ici. Juste à côté de l’habituel onglet « Propriétés », il y a un nouvel onglet « Interactions » :
, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>
  • Cliquez dessus, puis cliquez sur le bouton « Ajouter une interaction ».

Ce que nous allons faire ici, c’est sélectionner le composant qui doit réagir lorsque nous sélectionnons un compte dans la liste. C’est assez facile à faire, il suffit d’aller dans le champ « Composant » et vous verrez une liste de tous les composants disponibles sur le canevas.

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Nous souhaitons que les composants « Emplacement du compte » et « Détails du compte » soient mis à jour avec les informations du compte sélectionné. Commençons par « Emplacement du compte ».

  • Sélectionnez-le dans la liste disponible dans le champ « Composant ».

Ce que vous voyez, c’est que les propriétés disponibles pour le composant cible sélectionné sont affichées ici. Vous vous souvenez lorsque nous avons cliqué précédemment sur le composant « Emplacement du compte » dans le canevas et que nous avons vu que nous pouvions définir manuellement un identifiant d’enregistrement ?

Au lieu de le coder en dur, nous utiliserons une valeur dynamique. Cette valeur provient de l’événement déclenché par le composant « Liste des comptes » lorsque nous sélectionnons une ligne.

  • Pour utiliser une valeur dynamique, cliquez sur le bouton {!} sur le côté droit du champ recordId et commencez à taper « {! ». Vous verrez apparaître une valeur « Event », sélectionnez-la, puis tapez « . » pour voir les valeurs disponibles déclenchées par l’événement :
, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Ici vous pouvez voir 2 valeurs, apiName et recId. Nous voulons utiliser recId, alors sélectionnez-le et fermez-le enfin avec un « } » final. Ok, donc c’est encore un peu technique… mais vous pouvez le faire !

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Notez que vous pouvez également coder en dur une valeur directement ici si vous le souhaitez, en décochant le bouton bleu « {!} ». Cela vous fait basculer entre une valeur directe ou une valeur dynamique. Cela peut être utile si un composant cible nécessite plus d’attributs que le composant source ne vous en donne.

Par exemple, un composant cible peut nécessiter un nom d’objet (comme un compte, un contact ou une opportunité), alors qu’un composant source peut uniquement vous donner un identifiant d’enregistrement. Vous pouvez ensuite utiliser une combinaison de valeurs dynamiques et codées en dur.

Revenez à la page Interaction de ce composant (flèche gauche en haut du panneau des propriétés, à côté de Détails de l’interaction, ou désélectionnez/sélectionnez simplement à nouveau le composant « Liste des comptes » dans le canevas).

Effectuez ensuite les mêmes étapes pour câbler le deuxième composant, « Détail du compte ». Cette fois, vous aurez besoin à la fois de l’apiName et du recId. Sélectionnez les valeurs dans les listes déroulantes ou copiez et collez les valeurs suivantes :

  • {!Event.recId} pour la propriété recId
  • {!Event.apiName} pour la propriété apiName

Vous devriez vous retrouver avec quelque chose comme ceci :

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Notez que dans ce cas, vous pouvez également coder en dur l’objet apiName, car ce sera toujours une liste de comptes :

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Une fois que tout est configuré, enregistrez et activez la page.

  • Revenez à Lightning Experience, ouvrez la page d’application nouvellement créée et testez-la. Sélectionnez un enregistrement sur la gauche et voyez les composants sur la droite en cours de mise à jour.

Ça y est, vous venez de câbler 2 composants en pointer-cliquer, félicitations !

Comment rendre mes composants compatibles ?

Ce guide est destiné à démystifier l’interaction dynamique pour les administrateurs, mais comme nous l’avons vu, aucun composant Salesforce standard n’a actuellement d’onglet « Interactions » disponible dans App Builder.

Cependant, s’ils ont des propriétés que vous pouvez définir manuellement, vous pouvez les faire réagir à une interaction dynamique provenant d’un autre composant. En réalité, vous aurez probablement besoin d’un développeur pour cela ! Un développeur peut mettre à jour le fichier de configuration pour exposer des événements dans App Builder, de la même manière qu’ils exposent des propriétés dans le code à App Builder.

, Interactions dynamiques : didacticiel de plongée profonde<span class="wtr-time-wrap after-title"><span class="wtr-time-number">2</span> minutes de lecture</span>

Qu’est-ce qui n’est pas pris en charge ?

Les interactions dynamiques fonctionnent déjà très bien aujourd’hui, mais il y a encore quelques considérations à prendre en compte.

À ce jour, aucun composant Salesforce standard n’expose des événements à App Builder, donc aucun d’entre eux n’aura un onglet « Interactions ». Cependant, comme ils ont déjà des propriétés disponibles dans App Builder, ils peuvent être ciblés par une interaction dynamique déclenchée par l’un de vos composants personnalisés et mis à jour dynamiquement.

De plus, les interactions dynamiques ne sont actuellement disponibles que sur les pages d’applications. À l’avenir, j’ai hâte qu’ils soient ajoutés aux pages d’accueil et aux pages d’enregistrement. Que pensez-vous des interactions dynamiques ? Faites-nous savoir dans les commentaires et dans le Groupe communautaire des pionniers.

Ressources



Source de l’article traduit automatiquement en Français

Besoin d'aide ?
Vous utilisez Pardot depuis un certain temps mais vous n'êtes pas sûr d'en
exploiter tout le potentiel

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer