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

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 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 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 Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU 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 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
      Pointeur sélectionnant le modal Viewport dans la liste modale.
      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.
      Flèche pointant vers la fenêtre d’affichage ajoutée à l’étape précédente.
    10. Sélectionnez + Ajouter en regard 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.
      Pour plus d'informations, consultez 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. 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.

      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 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 .
      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.