Lier un événement à un composant

Liez des éléments de données à l’intérieur Générateur d'IU afin de pouvoir ajouter des actions d’événement à vos composants.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Chaque composant a des événements spécifiques auxquels il est lié. Par exemple, un composant de bouton comporte uniquement un événement sur lequel l’utilisateur a cliqué, tandis que d’autres composants peuvent être associés à plusieurs événements.

Certains composants ne sont pas dotés d’une action d’événement qui leur est appliquée. Un exemple est le composant d’en-tête. De nombreux composants nécessitent que vous mappiez un événement à votre composant pour qu’il effectue une action, telle que le chargement de données.

Pour ajouter des actions aux composants, aux pages et aux ressources de données sur votre page, vous pouvez ajouter un gestionnaire d’événements. Un composant de bouton que vous ajoutez à une page est statique. En liant une action d’événement au bouton, vous pouvez la lier à une page Web.

Procédure

1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant Créer > Expérience.
   Pour plus d'informations, consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU.
3. Créez ou ouvrez une page.
   Pour plus d’informations sur la création d’une page dans Générateur d'IU, consultez Créer une page dans le générateur d’IU.
4. Ajoutez un composant qui possède des événements auxquels il peut se lier à votre page, tel qu’un bouton.
   Pour plus d’informations sur l’ajout de composants à une page, reportez-vous à la section Ajouter et configurer des composants.
5. Pour ajouter un gestionnaire d’événements à votre composant, sélectionnez l’onglet Événements .
   Pour plus d’informations sur l’ajout de gestionnaires d’événements à votre composant, reportez-vous à la section Gérer les actions dans les pages du générateur d’IU.
   1. Pour démarrer le processus de configuration d’un gestionnaire d’événements pour votre composant, cliquez sur Ajouter un mappage d’événements.
      
   2. Sélectionnez le mappage d’événements que vous souhaitez configurer dans la liste.
      
   3. Sélectionnez Continuer.
   4. Dans la section d’aperçu du gestionnaire d’événements, sélectionnez un gestionnaire d’événements à lier à votre composant.
      
   5. Sélectionnez Continuer.
   6. Configurez la charge utile de l’événement.
      Vous configurez chaque gestionnaire d’événements différemment, en fonction de l’action de l’événement. Par exemple, si vous ajoutez un gestionnaire d’événements pour un composant de bouton, vous pouvez choisir ce que cette action de bouton effectue.
   7. Sélectionnez Ajouter.
6. Facultatif : Si vous souhaitez qu’un modal s’affiche pour votre événement, ajoutez-le à la page avant de lier votre événement au composant.
   Un modal est une fenêtre contextuelle de confirmation qui s’affiche lorsque vous cliquez sur le composant. Par exemple, si vous ajoutez un composant de bouton qui supprime un enregistrement, vous ajoutez un modal pour demander à l’utilisateur de confirmer que l’utilisateur souhaite supprimer l’enregistrement. Pour plus d'informations, consultez Ajouter un modal au composant.
   1. Sélectionnez l’icône + dans l’arborescence de contenu en regard de Modals.
      
   2. Choisissez un type de modal tel que Confirmer.
      
   3. Configurez le modal.
      Vous pouvez modifier le texte dans la fenêtre modale, les noms des boutons dans la fenêtre modale et la taille de l’écran modal. Vous pouvez également définir des actions pour le modal. Lorsque vous avez terminé de configurer le modal, fermez-le. Notez que le modal que vous avez créé se trouve au-dessus du corps de la structure de votre page dans l’arborescence de contenu.
7. Liez un événement à un composant de bouton.
   Vous liez un événement au bouton pour déclencher une action. Sélectionnez le composant de bouton pour le mettre à nouveau en surbrillance, soit dans l’arborescence de contenu, soit sur la page.
   1. Sélectionnez + Ajouter du contenu dans l’arborescence de contenu.
   2. Sélectionnez le composant Bouton dans la boîte à outils.
   3. Sélectionnez Aucun lorsque vous êtes invité à choisir un paramètre prédéfini.
   4. Dans le volet Configuration, cliquez sur Événements.
   5. Sélectionnez Ajouter un gestionnaire.
      

      Seul l’événement « bouton cliqué » est associé au composant de bouton. D’autres composants peuvent avoir plus d’un événement.

   6. Sélectionnez un gestionnaire que vous souhaitez affecter au bouton.

      Par exemple, pour ajouter un gestionnaire d’événements pour le composant bouton, vous pouvez le lier à une autre destination et ajouter des notifications d’alerte. Dans cet exemple, vous pouvez choisir Ouvrir ou fermer la boîte de dialogue modale pour que le bouton ouvre le modal que vous avez créé précédemment. Dans ce scénario de bouton, sélectionnez le gestionnaire d’événements de la boîte de dialogue modale Confirmer et détruire que vous avez créé précédemment.

      

   7. Sélectionnez Continuer.
   8. Sélectionnez un modal dans la liste déroulante.
   9. Sélectionnez Ajouter pour ajouter le gestionnaire d’événements modaux à votre composant de bouton.
8. Cliquez sur Enregistrer.
9. Testez le modal en sélectionnant Aperçu.
10. Pour déclencher le modal que vous avez créé, cliquez sur le bouton sur la page.