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

Ajoutez un viewport dans un modal dans votre expérience.

Avant de commencer

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche

Utilisez les modaux de fenêtre d’affichage pour intégrer des sous-pages ou d’autres expériences au sein d’une fenêtre modale de votre page parente ou de votre expérience. Les fenêtres modales de fenêtre peuvent être ouvertes via des événements ou des scripts. Les fenêtres modales Viewport sont limitées à un sous-itinéraire 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 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 dans laquelle 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. Le 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 à d’autres applications. Le périmètre de l’application protège les données et les fichiers d’application. Consultez En savoir plus sur la sécurité et les rôles pour 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 Fenêtre modale de fenêtre d’affichage dans la liste.

   Figure 1. Modal Viewport

   

   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.
   
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 de fenêtre d’affichage.

    

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 de fenêtre que vous avez créé dans la liste déroulante Modal .
    
    L’ID de fenêtre d’affichage se remplit automatiquement.
20. Sélectionnez Ajouter.
21. Sélectionnez Enregistrer.
22. Affichez et testez votre page en sélectionnant