Lier un événement à un composant

Liez les é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 n’a qu’un événement de clic sur un bouton, alors que d’autres composants peuvent avoir plusieurs événements qui leur sont associés.

Certains composants ne disposent pas d’une action d’événement qui leur est appliquée. Le composant d’en-tête en est un exemple. 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 de 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éer ou ouvrir une page.
   Pour en savoir plus sur la création d’une page dans Générateur d'IU, consultez Créer une page dans 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 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 qu’il 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 le modal, les noms des boutons dans le modal 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 votre structure de 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 plusieurs événements.

   6. Sélectionnez le 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 la fenêtre modale que vous avez créée précédemment. Dans ce scénario de bouton, sélectionnez le gestionnaire d’événements de 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 affiché sur la page.