--- sourceDocument: Yokohama Créer ou modifier des applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Yokohama Créer ou modifier des applications ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Ajouter du contenu à onglets aux pages du générateur d'IU ========================================================= Ajouter du contenu à onglets aux pages du générateur d'IU {#ariaid-title1} ========================================================================== * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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 les 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 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 visualisé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 : * Onglet conteneur vide * [Onglet Répéteur](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-repeater-ui-builder "Dans UI Builder, un répéteur est un composant qui agit comme une boucle de base qui répète les données que vous fournissez dans plusieurs composants. Les répéteurs utilisent un tableau ou un tableau d’objets. Les répéteurs lient les valeurs à une propriété de tableau de données. Par exemple, [{\"task » : « A\"},{\"task » : « B\"}], répète le contenu à l’intérieur deux fois.") * Onglet de liste connexe * Onglets de collection de pages {#tabs-components__ul_anm_nst_c5b} Le composant 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 {#ariaid-title2} ------------------------------------------------------- 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 ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. Créez ou ouvrez une page ou une variante de page. Pour plus d'informations sur la création d'une page dans Générateur d'IU, consultez [Créer une page dans le générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs."). 4. Sélectionnez le bouton + Ajouter du contenu sur l'étape pour ouvrir 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. Pour plus d'informations sur l'ajout d'un composant à une page, reportez-vous à la section [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants."). 8. Sélectionnez + Onglet Ajouter sur l'étape. 9. Sélectionnez Démarrer à partir d'un conteneur vide. 10. Sélectionnez Suivant. 11. Renseignez les champs du formulaire. {#add-a-tab-component__table_usy_s1c_wtb__entry__2} | 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. | [Tableau 1. Formulaire Paramètres d'onglet] {#add-a-tab-component__table_usy_s1c_wtb} 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 + . 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](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant 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 [Modifier l'apparence par défaut des composants](https://servicenow-prod.fluidtopics.net/~7VzmeeAm5ZTloM36shAFw#add-styling-to-component "Définissez les styles des composants et des couches pour modifier l’apparence par défaut."). 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](https://servicenow-prod.fluidtopics.net/JPlu5OHPkRgfmeiDM~ttKw "Découvrez comment utiliser des événements pour ajouter des actions aux composants, aux pages, aux ressources de données et aux actions déclaratives dans Générateur d'IU."). Ajouter des onglets de répéteur {#ariaid-title3} ------------------------------------------------ Utilisez le composant Onglets pour créer un ensemble d'onglets de répéteur 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 [de répéteur](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-repeater-ui-builder "Dans UI Builder, un répéteur est un composant qui agit comme une boucle de base qui répète les données que vous fournissez dans plusieurs composants. Les répéteurs utilisent un tableau ou un tableau d’objets. Les répéteurs lient les valeurs à une propriété de tableau de données. Par exemple, [{\"task » : « A\"},{\"task » : « B\"}], répète le contenu à l’intérieur deux fois.") 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 comme 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 ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. Créez ou ouvrez une page ou une variante de page. Pour plus d'informations sur la création d'une page dans Générateur d'IU, consultez [Créer une page dans le générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs."). 4. Sélectionnez le bouton + Ajouter du contenu sur l'étape pour ouvrir 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. Pour plus d'informations sur l'ajout d'un composant à une page, reportez-vous à la section [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants."). 8. Sélectionnez + Onglet Ajouter sur l'étape. 9. Sélectionnez Utiliser un répéteur. 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 du répéteur et est le seul onglet affiché dans l'aperçu de la page. 12. Sélectionnez Modifier dans le champ Tableau de données . 13. Configurez le tableau de données dans l'éditeur JSON. {#add-repeater-tab__table_spf_5sb_5kb__entry__3} | Clé | Type de données | Description | |-----------|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | icône | Chaîne | Nom de l'icône qui s'affiche dans Générateur d'IU. | | étiquette | Chaîne | Obligatoire. 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. | [ ] {#add-repeater-tab__table_spf_5sb_5kb} 14. Sélectionnez Appliquer. Le champ du tableau de données affiche la configuration du tableau de données. 15. Sélectionnez Créer. Le nouvel onglet de répéteur apparaît sur la page et dans l'arborescence de contenu. 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 liste connexe {#ariaid-title4} ----------------------------------------------------- Créez un ensemble d'onglets sur une page en la liant à une liste connexe. ### Avant de commencer Rôle requis : admin ### Pourquoi et quand exécuter cette tâche L'onglet de liste connexe remplit automatiquement les onglets en fonction de l'enregistrement que votre page affiche. Par exemple, par défaut, les listes connexes de la table utilisateur sont les domaines Rôles, Groupes, Délégués et Visibilité. Si votre page affiche un enregistrement utilisateur, la création d'un onglet de liste connexe ajoute les quatre listes connexes en tant qu'onglets sur votre page. Vous pouvez prévisualiser la page pour voir les listes connexes qui ont été ajoutées. Un contrôleur d'enregistrement est nécessaire pour créer des onglets de liste connexe. Pour ajouter un contrôleur à votre page, consultez la rubrique [Lier les données aux Générateur d'IU pages à l'aide de contrôleurs (fonctionnalité avancée)](https://servicenow-prod.fluidtopics.net/VUtzjc7vCdT7ndKGhMZjhQ#controllers "Les contrôleurs simplifient la liaison des données et de la logique d’événement pour activer les paramètres prédéfinis des composants dans Générateur d'IU.") pour plus d'informations. ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. Créez ou ouvrez une page ou une variante de page. Pour plus d'informations sur la création d'une page dans Générateur d'IU, consultez [Créer une page dans le générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs."). 4. Sélectionnez le bouton + Ajouter du contenu sur l'étape pour ouvrir 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. Pour plus d'informations sur l'ajout d'un composant à une page, reportez-vous à la section [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants."). 8. Sélectionnez + Onglet Ajouter sur l'étape. 9. Sélectionnez Afficher les listes connexes d'un enregistrement. 10. Sélectionnez Suivant. 11. Renseignez les champs du formulaire. {#add-related-list-tab__table_usy_s1c_wtb__entry__2} | Champ | Description | |-------------------------------------------|----------------------------------------------------------------------------| | Étiquette de l'onglet de l'espace réservé | Étiquette d'espace réservé à afficher sur l'onglet d'aperçu de votre page. | | Masquer l'onglet | Indique si vous souhaitez masquer ou afficher l'onglet. | | Contrôleur d'enregistrement | Contrôleur d'enregistrement avec la liste connexe. | [Tableau 2. Formulaire Paramètres d'onglet] {#add-related-list-tab__table_usy_s1c_wtb} 12. Sélectionnez Créer. Le nouvel onglet de liste connexe s'affiche dans la section Onglets du panneau de configuration. Un seul onglet d'espace réservé apparaît dans l'aperçu de la page. L'icône verte en regard de l'onglet de liste connexe dans l'arborescence de contenu indique le nombre d'onglets qui s'affichent sur votre page. 13. Sélectionnez Enregistrer. 14. Affichez et testez votre page en sélectionnant ![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.]() Ajouter des onglets de collection de pages {#ariaid-title5} ----------------------------------------------------------- Utilisez les 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 à l'échelle mondiale. 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 à la section [Collections de pages](https://servicenow-prod.fluidtopics.net/iEHsnApwWAoewwVwXn_6ew "Les collections de pages sont des groupes de pages qui peuvent être utilisés dans plusieurs expériences."). ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpérience. Consultez la rubrique [Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/Y1bOUW4pQdHutnAVEjdwrA "Découvrez ce qu’est une expérience dans Générateur d'IU. Comprendre le contenu d’une expérience.") pour plus d'informations sur la création d'expériences. 3. Créez ou ouvrez une page ou une variante de page. Pour plus d'informations sur la création d'une page dans Générateur d'IU, consultez [Créer une page dans le générateur d'IU](https://servicenow-prod.fluidtopics.net/7FlPZg9EshuX4KGkHUH3Ew "Créez une page Générateur d'IU pour un portail, un espace de travail ou une application personnalisée afin de créer une expérience Web pour vos utilisateurs."). 4. Sélectionnez le bouton + Ajouter du contenu sur l'étape pour ouvrir 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. Pour plus d'informations sur l'ajout d'un composant à une page, reportez-vous à la section [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants."). 8. Sélectionnez + Onglet Ajouter sur l'étape. 9. Sélectionnez Ajouter une collection de pages. 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](https://servicenow-prod.fluidtopics.net/07m0oUR225fWwHLhGROULg "Créez une collection de pages pour accueillir le contenu à onglets qui peut être utilisé dans les différentes expériences."). 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. 13. Sélectionnez Enregistrer. 14. Affichez et testez votre page en sélectionnant ![le bouton Aperçu qui ouvre la variante de page.]()