Ajouter un composant Viewport à votre page

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 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 Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience pour y 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 l’éditeur de la variante de page à laquelle vous souhaitez ajouter la fenêtre d’affichage.
      Si vous n’avez pas créé de page pour votre expérience, suivez les étapes de .Créer une page dans Générateur d'IU
    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 Viewport dans la zone de recherche.
    8. Sélectionnez Viewport.
      Figure 1. Composant Viewport
      Composant Viewport sélectionné dans la boîte à outils.
    9. Sélectionnez le composant Viewport dans l’arborescence de contenu.
    10. Sélectionnez + Ajouter dans le panneau de configuration.
      Flèche pointant vers le bouton +Ajouter dans l’onglet de configuration pour ajouter des collections de pages.
    11. Sélectionnez une collection de pages 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.

      Écran de sélection de collection de pages avec option pour créer une collection.

    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 de fenêtre et l’itinéraire.

      Vous pouvez voir l’ID et l’acheminement dans le panneau Config, comme illustré dans la figure suivante.

      Flèche pointant vers l’ID du composant Viewport dans l’onglet de configuration.
    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.
    16. Sélectionnez l’onglet Événements dans le panneau de configuration.
    17. Sélectionnez + Ajouter un gestionnaire d’événements pour afficher le Viewport.
      Flèche pointant vers l’option Ajouter un gestionnaire d’événements dans l’onglet de configuration du composant de bouton.
    18. Dans Gestionnaires d’événements au niveau de la page, sélectionnez Chargement de Viewport du macroponent UXF demandé.
      Gestionnaire d’événements de chargement de Viewport du macroponent UXF demandé sélectionné.
    19. Dans l’élémentViewportElementID , remplacez la valeur null par l’ID de fenêtre d’affichage que vous avez trouvé à une étape précédente.
      Dans cet exemple, il s’agit de « viewport_1 ».
    20. Sélectionnez Ajouter.
      Chargement Viewport du macroponent UXF Script de gestionnaire d’événements demandé avec l’ID de l’élément Viewport.
    21. Sélectionnez Enregistrer.
    22. Affichez et testez votre page en sélectionnant le bouton Aperçu qui ouvre la variante de page.