Ajouter du contenu à onglets aux pages du générateur d'IU

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 8 minutes de lecture
  • Utilisez le composant Onglets pour ajouter du contenu à onglets à des pages dans Générateur d'IU.

    Créez une navigation supplémentaire sur votre Générateur d'IU page en ajoutant un composant Onglets à votre page. Utilisez le composant Onglets pour imbriquer des composants dans des onglets de votre page. Les onglets peuvent être configurés sous forme d’onglets horizontaux en haut du contenu ou d’onglets verticaux sur le côté gauche ou droit du contenu.
    Figure 1. Exemple de composant d’onglet
    Onglets sélectionnés dans un aperçu de page du générateur d’IU.

    Les onglets peuvent être organisés dans le panneau de configuration pour réorganiser leur affichage sur la Générateur d'IU page. Ajoutez des étiquettes et des icônes personnalisées aux onglets pour fournir des identificateurs visuels uniques pour la navigation entre les onglets. Ces changements peuvent être affichés en temps réel lorsque vous modifiez le composant Onglets.

    Vous pouvez ajouter l’un des types d’onglets suivants à votre Générateur d'IU page :
    • Vider l’onglet de conteneur
    • Onglet Répéteur
    • Onglet de liste connexe
    • Onglets Collection de pages

    Le composant d’onglets prend en charge toute combinaison d’onglets statiques, d’onglets répétés, d’onglets de liste connexe et d’onglets de collection de pages. Vous pouvez également utiliser le mode d’onglet Fenêtre d’affichage pour ajouter une série de fenêtres.

    Ajouter des onglets de conteneur vides

    Utilisez un onglet de conteneur vide pour créer manuellement un ensemble statique d’onglets sur votre page.

    Avant de commencer

    Rôle requis : admin

    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 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. Créez ou ouvrez une page ou une variante de page.
      Pour en savoir plus sur la création d’une page dans Générateur d'IU, consultez Créer une page dans Générateur d’IU.
    4. Sélectionnez le bouton + Ajouter du contenu sur l’étape pour ouvrir la boîte à outils.
      Flèche pointant vers l’icône + qui ouvre la boîte à outils.
    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. Ajoutez un composant Onglets à votre page.
      Flèche pointant vers le composant d’onglets dans la boîte à outils.

      Pour plus d’informations sur l’ajout d’un composant à une page, reportez-vous à la section Ajouter et configurer des composants.

    8. Sélectionnez + Ajouter un onglet sur l’étape.
      Flèche pointant vers les onglets + l’option Ajouter dans le panneau de configuration.
    9. Sélectionnez Start from an empty container (Commencer à partir d’un conteneur vide).
      Option Start from an empty container (Commencer à partir d’un conteneur vide) sélectionnée.
    10. Sélectionnez Suivant.
    11. Remplissez les champs du formulaire.
      Tableau 1. Formulaire Paramètres de l’onglet
      Champ Description
      Étiquette de l'onglet Étiquette de l’onglet à afficher sur votre page.
      Icône Icône à afficher à côté de l’étiquette de l’onglet. Les icônes ne sont pas obligatoires.
      Masquer l'onglet Indique s’il faut masquer ou afficher l’onglet.
    12. Sélectionnez Créer.
      Le nouvel onglet s’affiche dans le composant Onglets .
    13. Sélectionnez le nouvel onglet.
    14. Sélectionnez l’icône + .
      Flèche pointant vers l’icône + pour ajouter un composant à l’onglet de démonstration.
    15. Sélectionnez le composant que vous souhaitez ajouter à l’onglet.
      Les composants s’affichent sous l’onglet dans lequel ils sont imbriqués dans l’arborescence de contenu. Pour plus d'informations, consultez Ajouter et configurer des composants.

    Résultats

    Votre page affiche les deux onglets que vous avez créés. Sélectionnez chaque onglet pour les configurer davantage, ajouter un style ou ajouter un gestionnaire d’événements. Pour plus d’informations sur le style, reportez-vous à la section Changer l’apparence par défaut des composants. Pour plus d’informations sur l’ajout d’un gestionnaire d’événements, reportez-vous à la section Gérer les actions dans les pages du générateur d’IU.

    Ajouter des onglets de répéteur

    Utilisez le composant Onglets pour créer un ensemble d’onglets répéteurs en liant des onglets à un tableau de données.

    Avant de commencer

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Vous pouvez utiliser des onglets répéteurs pour créer plusieurs onglets en fonction du tableau de données que vous fournissez. Vous pouvez transmettre l’icône, l’étiquette, le nombre et les champs en tant que clé dans l’objet. Utilisez la clé d’étiquette pour ajouter des noms aux onglets. Utilisez la clé de champ pour transmettre des informations aux onglets de répéteur. Vous pouvez lier un courtier en données, un état client ou un script client au fournisseur de tableau de données pour renvoyer le tableau d’objets avec le schéma correct.

    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 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. Créez ou ouvrez une page ou une variante de page.
      Pour en savoir plus sur la création d’une page dans Générateur d'IU, consultez Créer une page dans Générateur d’IU.
    4. Sélectionnez le bouton + Ajouter du contenu sur l’étape pour ouvrir la boîte à outils.
      Flèche pointant vers le + sur l’étape qui ouvre la boîte à outils.
    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. Ajoutez un composant Onglets à votre page.
      Flèche pointant vers le composant d’onglets dans la boîte à outils.

      Pour plus d’informations sur l’ajout d’un composant à une page, reportez-vous à la section Ajouter et configurer des composants.

    8. Sélectionnez + Ajouter un onglet sur l’étape.
      Flèche pointant vers l’option + Ajouter dans le panneau de configuration.
    9. Sélectionnez Utiliser un répéteur.
      Utilisez un répéteur sélectionné dans la fenêtre de sélection de l’onglet.
    10. Sélectionnez Suivant.
    11. Saisissez une étiquette pour l’onglet répéteur dans le champ Étiquette de l’onglet Espace réservé .
      Cette étiquette est affectée au premier onglet de répéteur et est le seul onglet affiché dans l’aperçu de page.
    12. Sélectionnez Modifier dans le champ Tableau de données .
      Ouvrez la fenêtre modale de modification du tableau de données.
    13. Configurez le tableau de données dans l’éditeur JSON.
      Clé Type de données Description
      icône Chaîne Nom de l’icône qui apparaît dans Générateur d'IU.
      étiquette Chaîne Requis. Nom d’affichage de l’onglet dans Générateur d'IU.
      compter Numéro Valeur à fournir sur l’étiquette de l’onglet. Lier dynamiquement à un courtier en données ou à un script client qui s’affichera sur l’étiquette.
      champs Objet Objet pouvant être utilisé pour stocker des informations et les transmettre aux composants dans les onglets.
    14. Sélectionnez Appliquer.
      Le champ Tableau de données affiche la configuration du tableau de données.

      Paramètres du répéteur avec un tableau de données personnalisé.

    15. Sélectionnez Créer.
      Le nouvel onglet de répéteur apparaît sur la page et dans l’arborescence de contenu.

      Onglet répéteur d’espace réservé mis en surbrillance sur la page.

    16. Sélectionnez Enregistrer.
    17. Ajoutez des composants à l’onglet répéteur.
    18. Sélectionnez le bouton Aperçu qui ouvre votre page en cours d’exécution, qui est un aperçu de l’apparence de la page sur une page Web. pour vérifier que les onglets de répéteur s’affichent correctement sur votre page.

    Ajouter des onglets de collection de pages

    Utilisez des onglets de collection de pages pour recréer les mêmes onglets sur plusieurs pages dans Générateur d'IU.

    Avant de commencer

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Une collection de pages est un groupe de pages prédéfinies disponibles dans le monde entier. Utilisez des onglets de collection de pages pour afficher chaque page d’une collection de pages sous forme d’onglet. Vous pouvez sélectionner une collection de pages existante ou créer la vôtre. Un contrôleur est requis pour ajouter une collection de pages. Pour plus d’informations sur les collections de pages, reportez-vous à .Collections de pages

    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 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. Créez ou ouvrez une page ou une variante de page.
      Pour en savoir plus sur la création d’une page dans Générateur d'IU, consultez Créer une page dans Générateur d’IU.
    4. Sélectionnez le bouton + Ajouter du contenu sur l’étape pour ouvrir la boîte à outils.
      Flèche pointant vers le + sur l’étape qui ouvre la boîte à outils.
    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. Ajoutez un composant Onglets à votre page.
      Flèche pointant vers le composant d’onglets dans la boîte à outils.

      Pour plus d’informations sur l’ajout d’un composant à une page, reportez-vous à la section Ajouter et configurer des composants.

    8. Sélectionnez + Ajouter un onglet sur l’étape.
      Flèche pointant vers l’option + Ajouter dans le panneau de configuration.
    9. Sélectionnez Ajouter une collection de pages.
      Fenêtre modale de sélection d’onglets avec l’option d’ajout d’une collection de pages mise en surbrillance.
    10. Sélectionnez Suivant.
    11. Sélectionnez une collection de pages dans la liste ou créez une collection en sélectionnant + Créer une collection.
      Pour créer 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 pour créer une collection.

    12. Sélectionnez Ajouter.
      Le nouvel onglet de collection de pages s’affiche dans la section Onglets du panneau de configuration. Un seul onglet d’espace réservé s’affiche dans l’aperçu de la page.

      Onglet Collection de pages mis en surbrillance sur la page.

    13. Sélectionnez Enregistrer.
    14. Affichez et testez votre page en sélectionnant le bouton Aperçu qui ouvre la variante de page.