Ajouter un événement de boîte de dialogue non modale à une Générateur d'IU page

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 6 minutes de lecture
  • Découvrez comment ajouter et configurer un événement de boîte de dialogue non modal, tel que ouvrir, fermer ou réduire dans Générateur d'IU. Une boîte de dialogue non modale est une fenêtre flottante contenant du contenu au-dessus d’une page.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Procédure

    1. Accédez à la Tout > 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 > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Ouvrez ou créez une variante de page.
      Pour plus d’informations sur la création d’une page dans Générateur d'IU, voir Créer une page dans le générateur d’IU.
    4. Ajoutez une boîte de dialogue non modale à la page.
      Pour en savoir plus sur la création d’une boîte de dialogue non modale, reportez-vous à la section Ajouter une boîte de dialogue non modale à une Générateur d'IU page.
    5. Ajoutez un composant à la page, tel qu’un bouton, pour effectuer une action sur la boîte de dialogue non modale.
      Pour plus d’informations sur la création d’un bouton qui interagit avec une boîte de dialogue non modale, reportez-vous à la section Ajouter une boîte de dialogue non modale à une Générateur d'IU page.
    6. Sélectionnez le composant de bouton dans l’arborescence de contenu ou sur l’étape.
    7. Dans le panneau de configuration, sélectionnez l’onglet Événements .
    8. Sélectionnez + Ajouter un gestionnaire d’événements.
      Panneau de configuration dénudé du bouton représenté par une flèche noire pointant vers l’onglet Événements et une seconde flèche noire pointant vers l’option + Ajouter un gestionnaire d’événements.
    9. Dans la fenêtre d’aperçu du gestionnaire d’événements, sélectionnez une action à affecter au bouton.
      Cinq gestionnaires d’événements de boîte de dialogue non modaux sont disponibles.

      Flèche noire pointant vers les événements de boîte de dialogue non modale répertoriés dans la fenêtre d’aperçu du gestionnaire d’événements.

      Remarque :
      Pour l’un des gestionnaires d’événements, sélectionnez Scriptdans la liste déroulante Mode si vous préférez travailler dans l’éditeur de script.
      Pour ajouter un gestionnaire d’événements de boîte de dialogue non modaleFaites ce qui suit
      Ouvrir la boîte de dialogue sans modèle Ouvre une boîte de dialogue non modale. Par exemple, ajoutez un bouton intitulé Composer un e-mail et configurez-le pour ouvrir une boîte de dialogue non modale contenant le composant Email Composer (mini).
      • Titre : entrez un en-tête pour la boîte de dialogue non modale.
      • En-tête réduit : saisissez un en-tête qui s’affiche lorsqu’un utilisateur sélectionne l’icône déroulante des boîtes de dialogue réduites sur la page.
      • Catégorie : saisissez un nom de catégorie pour regrouper la boîte de dialogue non modale.
      • Boîte de dialogue non modale : sélectionnez la boîte de dialogue non modale à ouvrir.
      • Instance unique : sélectionnez cette option pour permettre aux utilisateurs d’ouvrir une seule instance de la boîte de dialogue non modale. Ne sélectionnez pas cette option pour permettre aux utilisateurs d’ouvrir plusieurs instances de la boîte de dialogue non modale. Par exemple, si le bouton ouvre une boîte de dialogue non modale contenant le composant Email Composer (mini) et que vous ne sélectionnez pas l’option d’instance unique, les utilisateurs peuvent ouvrir plusieurs fenêtres de dialogue non modales pour composer des e-mails.
      • ID d’instance de boîte de dialogue non modale : si vous sélectionnez l’option Instance unique , spécifiez l’ID d’instance de boîte de dialogue non modale qui doit être ouvert par clic. Déplacez votre souris sur le champ et sélectionnez l’icône Lier les données . Dans Types de données , sélectionnez Boîte de dialogue non modale. Faites glisser la pastille instanceID vers la section supérieure et sélectionnez Appliquer.
      • Quand déclencher (option avancée) : sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) ouvre toujours la boîte de dialogue non modale. Sélectionnez Sous condition pour ajouter une condition de gestionnaire d’événements. Pour plus d’informations sur les conditions du gestionnaire d’événements, reportez-vous à Fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant.
      Fermer la boîte de dialogue sans modèle Ferme une boîte de dialogue non modale. Utilisez cette option si vous souhaitez configurer un composant, tel qu’un bouton, pour fermer la boîte de dialogue non modale en dehors de la fenêtre de dialogue non modale.
      • ID d’instance de boîte de dialogue non modale : spécifiez l’ID d’instance de boîte de dialogue non modale qui doit être fermé lors d’un clic.
      • Quand déclencher (option avancée) : sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) ferme toujours la boîte de dialogue non modale. Sélectionnez Sous condition pour ajouter une condition de gestionnaire d’événements. Pour plus d’informations sur les conditions du gestionnaire d’événements, reportez-vous à Fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant.
      Boîte de dialogue sans modèle Réduire Minimise une boîte de dialogue ouverte sans modalité. Utilisez cette option si vous souhaitez configurer un composant, tel qu’un bouton, pour réduire la boîte de dialogue non modale à partir de l’extérieur de la fenêtre de dialogue non modale.
      • ID d’instance de boîte de dialogue non modale : spécifiez l’ID d’instance de boîte de dialogue non modale qui doit être réduit lors d’un clic.
      • Quand déclencher (option avancée) : sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) réduise toujours la boîte de dialogue non modale. Sélectionnez Sous condition pour ajouter une condition de gestionnaire d’événements. Pour plus d’informations sur les conditions du gestionnaire d’événements, reportez-vous à Fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant.
      Mettre à jour la boîte de dialogue sans modèle Met à jour les champs spécifiés dans une boîte de dialogue non modale. Par exemple, ajoutez un bouton intitulé Mettre à jour l’en-tête au pied de page d’une boîte de dialogue non modale et configurez le bouton pour mettre à jour l’en-tête du composant dans la boîte de dialogue non modale.
      • En-tête : saisissez un nouveau texte d’en-tête pour la boîte de dialogue non modale qui doit être ajoutée lorsque le bouton est sélectionné.
      • Intitulé réduit : saisissez le nouveau texte d’intitulé réduit qui doit être ajouté lorsque le bouton est sélectionné.
      • Catégorie : saisissez un nouveau nom de catégorie à ajouter lorsque le bouton est sélectionné.
      • Boîte de dialogue non modale : sélectionnez la boîte de dialogue non modale à mettre à jour.
      • ID d’instance de boîte de dialogue non modale : spécifiez l’ID d’instance de boîte de dialogue non modale qui doit être mis à jour lors d’un clic.
      • Est erroné : sélectionnez cette option pour marquer la boîte de dialogue non modale comme erronée.
      • Quand déclencher (option avancée) : sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) mette toujours à jour la boîte de dialogue non modale. Sélectionnez Sous condition pour ajouter une condition de gestionnaire d’événements. Pour plus d’informations sur les conditions du gestionnaire d’événements, reportez-vous à Fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant.
      Boîte de dialogue sans modèle erronée Marque une boîte de dialogue non modale comme erronée.
      • Dans ID d’instance de boîte de dialogue non modale, spécifiez l’ID d’instance de boîte de dialogue non modale à marquer comme erroné.
      • Quand déclencher (option Avancé) : sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) soit toujours marqué comme erroné. Sélectionnez Sous condition pour ajouter une condition de gestionnaire d’événements. Pour plus d’informations sur les conditions du gestionnaire d’événements, reportez-vous à Fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant.
    10. Sélectionnez Ajouter.

    Résultats

    Le gestionnaire d’événements configuré s’affiche dans l’onglet Événements du composant du panneau de configuration.

    Flèche noire pointant vers le gestionnaire d’événements de boîte de dialogue non modale ouverte dans l’onglet d’événements du panneau de configuration pour le composant dénudé de bouton.