---
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 composant de fenêtre d'affichage à votre page
========================================================

Ajouter un composant de fenêtre d'affichage à votre page {#ariaid-title1}
=========================================================================

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

Ajoutez un composant Viewport à votre page et créez une sous-page pour créer un contenu distinct sur la 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 l'éditeur de la variante de page à laquelle vous souhaitez ajouter le Viewport.  
   Si vous n'avez pas créé de page pour votre expérience, suivez les étapes pour [Créer une page dans 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. Sélectionnez + Ajouter du contenu dans l'arborescence de contenu.
5. Sélectionnez une mise en page à colonne unique .
6. Ensuite, sélectionnez l'icône + dans la colonne pour ouvrir la boîte à outils.
7. Entrez <kbd class="ph userinput">Viewport</kbd> dans la zone de recherche.
8. Sélectionnez Viewport.  
   Figure 1. Composant Viewport
9. Sélectionnez le composant Viewport dans l'arborescence de contenu.
10. Sélectionnez + Ajouter dans le panneau de configuration.  
11. Sélectionnez une [collection de pages](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-page-collection-ui-builder "Groupe de pages qui peuvent être réutilisées dans des expériences au sein d’onglets ou de modaux.") dans la liste ou créez une collection en sélectionnant + Créer une collection.  
    Pour plus d'informations sur la création de votre propre collection de pages, reportez-vous à la section [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. Sélectionnez Ajouter.  
    La collection de pages s'affiche dans la section Collections de pages du panneau de configuration. Une seule page de la collection de pages s'affiche dans la zone de stockage.
13. Sélectionnez Enregistrer.
14. Localisez l'ID et l'itinéraire de Viewport.  
    Vous pouvez voir l'ID et l'itinéraire dans le panneau de configuration, comme illustré dans la figure suivante.
15. Ajoutez un composant à votre page pour ouvrir le Viewport que vous venez d'ajouter, tel qu'un composant de bouton.  
    Pour plus d'informations, consultez [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants.").
16. Sélectionnez l'onglet Événements dans le panneau de configuration.
17. Sélectionnez + Ajouter un gestionnaire d'événements pour afficher la fenêtre d'affichage.  
18. Dans Gestionnaires d'événements au niveau de la page, sélectionnez Chargement de Viewport du macroponent UXF demandé.  
19. Dans l'élémentViewportElementID , remplacez la valeur <kbd class="ph userinput">null</kbd> par l'ID de Viewport que vous avez localisé à une étape précédente.  
    Dans cet exemple, il s'agit de <kbd class="ph userinput">« viewport_1 ».</kbd>
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.]()