---
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 modal de fenêtre d'affichage à votre expérience
==========================================================

Ajouter un modal de fenêtre d'affichage à votre expérience {#ariaid-title1}
===========================================================================

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

Ajoutez un Viewport dans un modal selon votre expérience.

Avant de commencer
------------------

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche
--------------------------------------

Utilisez des fenêtres modales pour intégrer des sous-pages ou d'autres expériences dans une fenêtre modale de votre page parente ou de votre expérience. Les fenêtres modales de Viewport peuvent être ouvertes via des événements ou des scripts. Les fenêtres modales de fenêtre d'affichage sont limitées à un itinéraire secondaire par fenêtre modale de fenêtre d'affichage. Vous pouvez créer des fenêtres modales Viewport supplémentaires pour des itinéraires supplémentaires.  
Remarque :  
Les modaux de fenêtre d'affichage hérités ne peuvent pas être mis à niveau et doivent être recréés pour tirer parti des nouvelles fonctionnalités.

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 [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.
3. Ouvrez ou créez une page.  
   Si vous ouvrez une page existante, assurez-vous d'être dans le même champ d'application que la page d'origine. Si ce n'est pas le cas, modifiez le champ d'application avant de commencer à modifier la page. La définition du périmètre de l'application protège les applications en identifiant et en limitant l'accès aux fichiers et données d'application. Les administrateurs définissent le champ d'application pour spécifier quelles parties d'une application sont accessibles aux autres applications. Le périmètre de l'application protège les données et les fichiers d'application. Consultez pour [En savoir plus sur la sécurité et les rôles](https://servicenow-prod.fluidtopics.net/aFpv44YrrL~zyrHcZD4T7Q "Configurez la sécurité et les rôles de votre Générateur d'IU instance.") plus d'informations sur le périmètre de l'application.
4. Sélectionnez + Ajouter du contenu dans l'arborescence de contenu.
5. Sélectionnez une mise en page à colonne unique .
6. Sélectionnez + en regard de Modaux dans l'arborescence de contenu.
7. Sélectionnez Modal de fenêtre d'affichage dans la liste.  
   Figure 1. Modal Viewport  
   Un modèle de fenêtre d'affichage s'affiche au-dessus de votre page.
8. Cliquez sur Enregistrer.
9. Sélectionnez la fenêtre dans l'arborescence de contenu.  
10. Sélectionnez + Ajouter en regard de Collections de pages dans l'onglet de configuration.  
11. Sélectionnez une collection de pages ou créez-en une nouvelle.  
    Pour plus d'informations, consultez [Créer une collection de pages sur plusieurs pages de l'interface utilisateur](https://servicenow-prod.fluidtopics.net/07m0oUR225fWwHLhGROULg "Créez une collection de pages pour accueillir le contenu à onglets qui peut être utilisé dans les différentes expériences.").

12. Cliquez sur Ajouter.
13. Cliquez sur Enregistrer.
14. Ajoutez un composant qui ouvre le modal Viewport.  
    L'exemple suivant utilise un bouton pour ouvrir la fenêtre modale Viewport.

15. Sélectionnez l'onglet Événements.
16. Sélectionnez + Ajouter un gestionnaire d'événements.  
17. Sélectionnez Ouvrir ou fermer la boîte de dialogue modale.
18. Activez la boîte de dialogue modale Ouvrir.
19. Sélectionnez la fenêtre modale Viewport que vous avez créée dans la liste déroulante Modal .  
    L'ID de Viewport se remplit automatiquement.
20. Sélectionnez Ajouter.
21. Sélectionnez Enregistrer.
22. Affichez et testez votre page en sélectionnant ![le bouton Aperçu qui ouvre la variante de page.]()