Ajouter un composant Viewport à votre page

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 1 minute de lecture

    • Ajoutez un composant Viewport à votre page et créez une sous-page pour créer un contenu distinct sur la page.

    Avant de commencer

    Rôle requis : ui_builder_admin

    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 la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Ouvrez l’éditeur de la variante de page à laquelle vous souhaitez ajouter la fenêtre d’affichage.
      Si vous n’avez pas créé de page pour votre expérience, suivez les étapes pour Créer une page dans Générateur d'IU.
    4. Sélectionnez + Ajouter du contenu dans l’arborescence de contenu.
    5. Sélectionnez une mise en page à colonne unique .
    6. Ensuite, sélectionnez l’icône + dans la colonne pour ouvrir la boîte à outils.
    7. Entrez viewport dans la zone de recherche.
    8. Sélectionnez Viewport.
      Figure 1. Composant Viewport
      Composant Viewport sélectionné dans la boîte à outils.
    9. Sélectionnez le composant Viewport dans l’arborescence de contenu.
    10. Sélectionnez + Ajouter dans le panneau de configuration.
      Flèche pointant vers le bouton +Ajouter dans l’onglet de configuration pour ajouter des collections de pages.
    11. Sélectionnez une collection de pages dans la liste ou créez une collection en sélectionnant + Créer une collection.
      Pour plus d’informations sur la création de votre propre collection de pages, reportez-vous à la section Créer une collection de pages sur plusieurs pages de l’interface utilisateur.

      Écran de sélection de collection de pages avec option permettant de créer une collection.

    12. Sélectionnez Ajouter.
      La collection de pages s’affiche dans la section Collections de pages du panneau de configuration. Une seule page de la collection de pages s’affiche dans la zone de transit.
    13. Sélectionnez Enregistrer.
    14. Localisez l’ID et l’itinéraire du Viewport.

      Vous pouvez voir l’ID et l’itinéraire dans le panneau de configuration, comme illustré dans la figure suivante.

      Flèche pointant vers l’ID du composant Viewport dans l’onglet de configuration.
    15. Ajoutez un composant à votre page pour ouvrir la fenêtre que vous venez d’ajouter, par exemple un composant de bouton.
      Pour plus d'informations, consultez Ajouter et configurer des composants.
    16. Sélectionnez l’onglet Événements dans le panneau de configuration.
    17. Sélectionnez + Ajouter un gestionnaire d’événements pour afficher la fenêtre d’affichage.
      Flèche pointant vers l’option Ajouter un gestionnaire d’événements dans l’onglet Configurer du composant de bouton.
    18. Dans Gestionnaires d’événements au niveau de la page, sélectionnez UXF Macroponent Viewport Load Requested.
      Chargement de la fenêtre du macroponent UXF Gestionnaire d’événements demandé sélectionné.
    19. Dans l’élémentviewportElementID , remplacez la valeur null par l’ID de fenêtre d’affichage que vous avez localisé lors d’une étape précédente.
      Dans cet exemple, il s’agit de « viewport_1 ».
    20. Sélectionnez Ajouter.
      Chargement du macroponent UXF Viewport Script du gestionnaire d’événements demandé avec l’ID de l’élément Viewport.
    21. Sélectionnez Enregistrer.
    22. Affichez et testez votre page en sélectionnant le bouton Aperçu qui ouvre la variante de page.