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

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

   

   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.
   
10. Sélectionnez + Ajouter à côté 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.

    

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.

    

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 Ouvrir la boîte de dialogue modale.
19. Sélectionnez le modal Viewport que vous avez créé 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