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 fenêtres modales de fenêtre d’affichage pour intégrer des sous-pages ou d’autres expériences dans un modal de votre page ou expérience parente. 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 de fenêtre d’affichage supplémentaires pour des itinéraires supplémentaires.

Remarque :

Les modaux Viewport 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 Tous > 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 une 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 périmètre de manière à 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 un composant dans l’arborescence de contenu.
5. Sélectionnez une mise en page à colonne unique .
6. Sélectionnez + à côté de Modaux dans l’arborescence de contenu.
7. Sélectionnez Modal 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.
    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 de fenêtre.

    L’exemple suivant utilise un bouton pour ouvrir le modal de fenêtre.

    
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 Viewport se remplit automatiquement.
20. Sélectionnez Ajouter.
21. Sélectionnez Enregistrer.
22. Affichez et testez votre page en sélectionnant