---
sourceDocument: Yokohama Créer ou modifier des applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - fr-FR

ft:publication_title :

    - Yokohama Créer ou modifier des applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

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

Ajouter un événement de boîte de dialogue non modale à une Générateur d'IU page {#ariaid-title1}
================================================================================================

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 minutes de lecture

Découvrez comment ajouter et configurer un événement de boîte de dialogue non modale, 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 ToutCadre de travail Now ExperienceGénérateur d'IU.
2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience.  
   Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") 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, consultez [Créer une page dans le générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs.").
4. Ajouter une boîte de dialogue non modale à la page.  
   Pour plus d'informations 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](https://servicenow-prod.fluidtopics.net/KXR84D~1~OKUWZbWC3yg3g "Découvrez comment ajouter une boîte de dialogue non modale 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.").
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 interagissant 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](https://servicenow-prod.fluidtopics.net/KXR84D~1~OKUWZbWC3yg3g "Découvrez comment ajouter une boîte de dialogue non modale 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.").
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.  
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 modale sont disponibles.

   Remarque :  
   Pour l'un des gestionnaires d'événements, sélectionnez Script dans 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 modale |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     Faites 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 bouton pour ouvrir une boîte de dialogue non modale contenant le composant Compositeur d'e-mail (mini). * En-tête : saisissez 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 uniquement une instance de la boîte de dialogue non modale. Laissez cette option non sélectionnée 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 Compositeur d'e-mail (mini) et que vous ne sélectionnez pas l'option d'instance unique, les utilisateurs peuvent ouvrir plusieurs fenêtres de boîte de dialogue non modale pour composer des messages électroniques. * 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 au 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é) : Sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) ouvre toujours la boîte de dialogue non modale. Sélectionnez Conditionnellement pour ajouter une condition de gestionnaire d'événements. Pour plus d'informations sur les conditions du gestionnaire d'événements, reportez-vous à la section [Fonctions prises en charge dans l'éditeur de formule du Générateur d'IU composant](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#uib_supported_functions "Découvrez les différentes fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant."). {#add-modeless-dialog-event__ul_ct2_cqn_21c} |
   |                  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 boîte de dialogue non modale. * ID de l'instance de boîte de dialogue non modale : spécifiez l'ID de l'instance de boîte de dialogue non modale qui doit être fermé au clic. * Quand déclencher (option Avancé) : Sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) ferme toujours la boîte de dialogue non modale. Sélectionnez Conditionnellement pour ajouter une condition de gestionnaire d'événements. Pour plus d'informations sur les conditions du gestionnaire d'événements, reportez-vous à la section [Fonctions prises en charge dans l'éditeur de formule du Générateur d'IU composant](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#uib_supported_functions "Découvrez les différentes fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant."). {#add-modeless-dialog-event__ul_kcn_qdv_21c}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
   |                   Boîte de dialogue sans modèle Réduire                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Réduit une boîte de dialogue non modale ouverte. Utilisez cette option si vous souhaitez configurer un composant, tel qu'un bouton, pour réduire la boîte de dialogue non modale en dehors de la fenêtre de boîte 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 au clic. * Quand déclencher (option Avancé) : sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) réduise toujours la boîte de dialogue non modale. Sélectionnez Conditionnellement pour ajouter une condition de gestionnaire d'événements. Pour plus d'informations sur les conditions du gestionnaire d'événements, reportez-vous à la section [Fonctions prises en charge dans l'éditeur de formule du Générateur d'IU composant](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#uib_supported_functions "Découvrez les différentes fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant."). {#add-modeless-dialog-event__ul_n45_yxn_21c}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
   |              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é. * En-tête réduit : saisissez un nouveau texte d'en-tête réduit qui doit être ajouté lorsque le bouton est sélectionné. * Catégorie : saisissez un nouveau nom de catégorie qui doit être ajouté lorsque le bouton est sélectionné. * Boîte de dialogue non modale : sélectionnez la boîte de dialogue non modale à mettre à jour. * ID de l'instance de boîte de dialogue non modale : spécifiez l'ID de l'instance de boîte de dialogue non modale qui doit être mis à jour par clic. * Est erroné : sélectionnez cette option pour marquer la boîte de dialogue sans mode comme erronée. * Quand déclencher (option Avancé) : sélectionnez Toujours pour que le composant (dans cet exemple, le bouton) mette toujours à jour la boîte de dialogue non modale. Sélectionnez Conditionnellement pour ajouter une condition de gestionnaire d'événements. Pour plus d'informations sur les conditions du gestionnaire d'événements, reportez-vous à la section [Fonctions prises en charge dans l'éditeur de formule du Générateur d'IU composant](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#uib_supported_functions "Découvrez les différentes fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant."). {#add-modeless-dialog-event__ul_jfp_2yn_21c}                                                                                                                                                                                                                                                                                                                      |
   |                   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 Conditionnellement pour ajouter une condition de gestionnaire d'événements. Pour plus d'informations sur les conditions du gestionnaire d'événements, reportez-vous à la section [Fonctions prises en charge dans l'éditeur de formule du Générateur d'IU composant](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#uib_supported_functions "Découvrez les différentes fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant."). {#add-modeless-dialog-event__ul_rm1_x2v_21c}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
   |---------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

   {#add-modeless-dialog-event__choicetable_dzv_llh_wnb}
10. Sélectionnez Ajouter.

Résultats
---------

Le gestionnaire d'événements configuré s'affiche dans le panneau de configuration Onglet Événements pour le composant.


