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 se lie. Par exemple, un composant de bouton n’a qu’un événement sur lequel un bouton a été cliqué, tandis que d’autres composants peuvent avoir plusieurs événements qui leur sont associés.

Certains composants n’ont pas d’action d’événement qui leur est appliquée. Un exemple est le composant d’en-tête. De nombreux composants exigent 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 Tous > Cadre de travail Now Experience > Générateur d'IU.
2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant + Créer.
   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 , consultez Créer une page dansGénérateur d'IU UI Builder.
4. Ajoutez un composant qui possède des événements auxquels il peut se lier à votre page, comme 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 UI Builder (fonctionnalité avancée).
   1. Pour lancer le processus de configuration d’un gestionnaire d’événements pour votre composant, cliquez sur + Ajouter un mappage d’événements.
      
   2. Sélectionnez un mappage d’événements que vous souhaitez configurer dans la liste.
      
   3. Dans la section Aperçu du gestionnaire d’événements, sélectionnez un gestionnaire d’événements à lier à votre composant.
      
   4. Configurez le gestionnaire d’événements et cliquez sur Ajouter lorsque vous avez terminé.
      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 l’action de ce bouton.
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.
   Une fenêtre modale 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 Modaux.
      
   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. Lier 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 un composant 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 d’événements.
      

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

   6. Sélectionnez une action que vous souhaitez affecter au composant.

      Par exemple, pour ajouter un gestionnaire d’événements pour le composant de 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. Activez le sélecteur de boîte de dialogue Ouvrir le modal pour que le modal s’ouvre lorsqu’un utilisateur clique sur le composant de bouton.
   8. Pour ajouter le gestionnaire d’événements modal à votre composant, cliquez sur Ajouter.
8. Cliquez sur Enregistrer.
9. Testez la fenêtre modale en sélectionnant Aperçu.
10. Pour déclencher le modal que vous avez créé, cliquez sur le bouton de la page.