Ajouter un modal de fenêtre d’affichage à votre expérience

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 2 minutes de lecture
  • Ajouter un Viewport dans un modal d’après votre expérience.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Utilisez les fenêtres modales de Viewport 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 Viewport sont limitées à un itinéraire secondaire par fenêtre modale Viewport. Vous pouvez créer des fenêtres modales Viewport supplémentaires pour des itinéraires supplémentaires.
    Remarque :
    Les fenêtres modales Viewport héritées ne peuvent pas être mises à niveau et doivent être recréées pour tirer parti de la nouvelle fonctionnalité.

    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.
    3. Ouvrez ou créez une page.
      Si vous ouvrez une page existante, assurez-vous que vous êtes 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 des applications protège ces dernières en identifiant et en restreignant l’accès à leurs fichiers et à leurs données. Les administrateurs définissent le champ d’application pour spécifier quelles parties d’une application sont accessibles à d’autres applications. Le périmètre de l’application protège les données et les fichiers d’application. Pour plus d’informations sur le périmètre de l’application, reportez-vous à la rubrique En savoir plus sur la sécurité et les rôles .
    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 Viewport dans la liste.
      Figure 1. Modal Viewport
      Pointeur sélectionnant le modal Viewport dans la liste modale.
      Un modèle de fenêtre d’affichage apparaît au-dessus de votre page.
    8. Cliquez sur Enregistrer.
    9. Sélectionnez la fenêtre dans l’arborescence de contenu.
      Flèche pointant vers la fenêtre ajoutée à l’étape précédente.
    10. Sélectionnez + Ajouter à côté de Collections de pages dans l’onglet de configuration.
      Flèche pointant vers + Ajouter dans le panneau de configuration
    11. Sélectionnez une collection de pages ou créez-en une nouvelle.
    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 le modal Viewport.

      Flèche pointant vers un composant de bouton utilisé pour ouvrir un modal de fenêtre d’affichage.

    15. Sélectionnez l'onglet Événements.
    16. Sélectionnez + Ajouter un gestionnaire d’événements.
      Flèche pointant vers + Ajouter un gestionnaire d’événements dans l’onglet Événements d’un composant de bouton.
    17. Sélectionnez Ouvrir ou fermer la boîte de dialogue modale.
    18. Activez Ouvrir la boîte de dialogue modale.
    19. Sélectionnez le modal Viewport que vous avez créé dans la liste déroulante Modal .
      Configurez le gestionnaire d’événements pour votre modal Viewport.
      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.