--- 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 --- Personnaliser les Générateur d'IU pages à l'aide de composants ============================================================== Personnaliser les Générateur d'IU pages à l'aide de composants {#ariaid-title1} =============================================================================== * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 minutes de lecture Découvrez ce qu'est un composant dans Générateur d'IU. Découvrez également comment les composants fonctionnent dans le générateur d'IU. Les composants sont les éléments de base de votre Générateur d'IU page. Les composants vont des éléments de base, comme les boutons et les libellés, aux composants d'expérience plus complexes, tels que les listes et les formulaires. Vous pouvez ajouter ces composants à votre Générateur d'IU page pour créer ou personnaliser votre espace de travail ou votre expérience de portail. Par exemple, l'ajout d'un composant de flux d'activité à votre page qui permet aux utilisateurs de voir leur activité de demande de déplacement. Vous pouvez ajouter des composants à votre Générateur d'IU page de la manière suivante. {#work-components__addcomponentstable__entry__2} | Emplacement | Exemple | |---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | Directement à partir d'une page dans Générateur d'IU (option 1) | Sélectionnez l'icône Ajouter du contenu (plus), sélectionnez l'onglet Composants , puis sélectionnez un composant. | | Directement à partir d'une page dans Générateur d'IU (option 2) | Sur une disposition ou un composant en colonne, sélectionnez l'icône Ajouter avant (plus) ou Ajouter après (plus), puis sélectionnez un composant. | | À partir de l'arborescence de contenu dans Générateur d'IU | Dans l'arborescence de contenu, sélectionnez + Ajouter du contenu , puis sélectionnez un composant. | | À partir du menu flottant au-dessus de la page dans Générateur d'IU | Dans une disposition ou un composant en colonne, sélectionnez l'icône Menu, sélectionnez Ajouter avant ou Ajouter après, puis sélectionnez un composant. | [Tableau 1. Façons d'ajouter un composant à une page] {#work-components__addcomponentstable} Mises en page en colonnes dans Générateur d'IU {#work-components__section_krt_tdk_znb} -------------------------------------------------------------------------------------- Ajoutez d'abord des mises en page en colonnes et des colonnes à votre Générateur d'IU page. Ajoutez ensuite des composants aux colonnes dans une mise en page en colonnes pour créer et personnaliser votre page. Considérez une mise en page en colonne comme une partie définie de l'écran où vous ajoutez des composants tels que des listes et des en-têtes. Vous pouvez avoir autant de mises en page en colonnes que vous le souhaitez sur une page, avec jusqu'à six colonnes dans n'importe Générateur d'IU quelle disposition en colonne. Plusieurs composants peuvent être ajoutés à une seule colonne. Affichez la structure de votre page dans l'arborescence de contenu . Pour plus d'informations, consultez [Mises en page en colonnes](https://servicenow-prod.fluidtopics.net/BgHnRp7KvYrn2FFoG4hTKw#column-layout "Les mises en page en colonnes sont utilisées pour concevoir et organiser Générateur d'IU les pages."). Configurer des composants dans Générateur d'IU {#work-components__config_components} ------------------------------------------------------------------------------------ Il existe trois façons de configurer un composant dans le panneau de configuration. * Configurez les propriétés du composant. * Ajoutez des remplacements de style CSS. * Configurez [des gestionnaires d'événements pour les](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-event-handler-ui-builder "Une action effectuée lorsqu’un événement se produit.") composants. {#work-components__ul_lxw_c2k_znb} ![Onglets du panneau Configuration utilisés pour configurer, appliquer un style et ajouter des événements aux composants.]() Onglet Configurer : Les propriétés des composants varient en fonction de chaque composant. La configuration des composants peut être simple, comme c'est le cas avec des éléments simples comme les boutons, les en-têtes et les étiquettes. Les composants tels que les listes et les formulaires nécessitent une configuration importante. Pour les composants d'icône et d'image, sélectionnez parmi plusieurs options ou utilisez une icône ou une image personnalisée. Vous pouvez modifier les propriétés des composants à l'aide Générateur d'IUde l'éditeur JSON low-code de . Pour plus d'informations sur la configuration des composants, voir [Composants Next Experience](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories%5B%5D=uib_component&categories%5B%5D=uib_macroponent-component&categories%5B%5D=uib_facades). : Pour chaque propriété de l'onglet de configuration du composant, vous pouvez choisir parmi les options suivantes. * Statique : utilisez les données d'une liste ou saisissez vos propres données. Les données ne se connectent pas à une source de données externe. * Liaison dynamique des [données](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-data-binding-ui-builder "Processus consistant à associer des données à un élément d’interface utilisateur qui affiche les informations.") : moyen de lier une propriété de composant à une ressource de données, une propriété de page ou un état client. * Script : saisissez du code JavaScript pour renseigner une valeur de propriété. {#work-components__ul_uh3_dh4_trb} Onglet Styles : Vous pouvez modifier les styles des feuilles de style en cascade (CSS) pour des composants individuels. Modifiez les bordures de couleur, la taille de la police, etc. Onglet Événements : Configurez les [mappages d'événements](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-event-mapping-ui-builder "Processus d’identification d’un gestionnaire d’événements à exécuter lorsqu’un événement se produit.") au niveau de la page et au niveau des variantes. Ajoutez également des événements expédiés et des événements gérés pour votre variante. Les composants d'expérience, plus complexes, s'appuient fortement sur les données dynamiques fournies par une [ressource de données](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-data-resource-ui-builder "Une façon dynamique et réutilisable de définir les données à extraire pour les composants d’une page."). La liaison de données dynamiques à un composant est une fonctionnalité importante. Vous exposez dynamiquement les données des tables, des enregistrements ou d'autres éléments de votre page. L'exposition des données vous permet de réutiliser vos composants. En outre, vous pouvez pointer vers les champs de configuration pour afficher les données des icônes ou les options de script pour chaque champ. Lorsque vous ajoutez et configurez des composants sur la page, l'étape affiche votre travail. Si vous apportez des modifications et que les mises à jour ne se chargent pas sur l'étape, sélectionnez l'icône de menu Ouvrir , puis sélectionnez Développeur \> Recharger l'étape. Le rechargement de l'étape affiche vos changements, mais ne les enregistre pas. Pour enregistrer votre travail, sélectionnez Enregistrer en haut à droite. Préréglages des composants dans Générateur d'IU {#work-components__section_cnm_cpt_25b} --------------------------------------------------------------------------------------- Utilisez [les paramètres prédéfinis des composants](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-component-preset-ui-builder "Les paramètres prédéfinis appliquent des valeurs de configuration prédéfinies et des mappages d’événements aux composants. Les paramètres prédéfinis appliquent des configurations prédéfinies aux propriétés des composants et aux gestionnaires d’événements. Les paramètres prédéfinis ne sont disponibles que pour certains composants.") pour configurer automatiquement les composants sur les pages compatibles. Générateur d'IU Les modèles de page contiennent des contrôleurs que les paramètres prédéfinis utilisent pour définir les valeurs de configuration des composants. Pour plus d'informations, consultez [Configurer automatiquement les composants à l'aide de paramètres prédéfinis](https://servicenow-prod.fluidtopics.net/chNe2gEdVldvUdYjI5xYwQ#presets "Utilisez les paramètres prédéfinis des composants pour configurer automatiquement les composants sur les pages compatibles."). Sections des propriétés des composants {#work-components__section_esm_5gk_dsb} ------------------------------------------------------------------------------ Les propriétés des composants sont regroupées en sections de propriétés similaires. Ouvrez et fermez des sections en sélectionnant les flèches à droite des en-têtes de propriété. Les administrateurs du générateur d'IU peuvent sélectionner les propriétés de configuration du composant à afficher ou à masquer en fonction des politiques d'interface utilisateur. Éditeur de formule de composant {#work-components__section_mkq_ydx_trb} ----------------------------------------------------------------------- Utilisez l'éditeur de Générateur d'IU formule de composant dans le panneau de configuration pour lier ou modifier des formules. Vous pouvez entrer du texte, des liaisons de données et/ou des formules. Les formules peuvent consister en n'importe quelle combinaison des trois types d'entrée. L'éditeur de formule de composant prend en charge les types de transformation logique, arithmétique, de comparaison, de négation et fonctionnel. Chaque fonction ajoutée à l'éditeur de formule du composant s'exécute automatiquement. L'éditeur de formule de composant affiche une étiquette pour chaque entrée de la fonction afin que vous sachiez quels paramètres chaque fonction nécessite. Pour plus d'informations sur les fonctions prises en charge dans l'éditeur de formule du composant, reportez-vous à la section [Fonctions prises en charge dans l'éditeur de formule du Générateur d'IU composant](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#uib_supported_functions "Découvrez les différentes fonctions prises en charge dans l’éditeur de formule de Générateur d'IU composant."). ID de composant {#work-components__component_id} ------------------------------------------------ Utilisez l'ID du composant lorsque vous ajoutez un script ou que vous liez des données au composant pour référencer le composant. Un ID de composant est automatiquement créé et est basé sur l'étiquette de composant lorsque vous ajoutez un composant à une page. Vous pouvez modifier l'ID de composant pour ce que vous voulez, tant qu'il est unique. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l'ID du composant. Visibilité du composant {#work-components__section_ljd_ydk_znb} --------------------------------------------------------------- Sélectionnez l'icône en forme d'œil dans le panneau de configuration pour définir la visibilité du composant. La visibilité du composant est basée sur une propriété du composant lui-même, et non sur la personne qui le consulte. Vous pouvez afficher ou masquer un composant en fonction des conditions. Par exemple, masquer une image si elle a un lien rompu. Vous pouvez définir la visibilité en fonction de la liaison dynamique des données ou en modifiant une valeur de propriété scriptée. Définissez la valeur de test pour tester ce qui se passe lorsque la visibilité est définie sur vrai, faux ou aucune. Dupliquer les composants {#work-components__section_fwf_bc5_x5b} ---------------------------------------------------------------- Créez une copie exacte d'un composant configuré sur votre Générateur d'IU page, à l'exception du nom et de l'ID. Un composant dupliqué copie toutes les propriétés, liaisons et événements. Pour plus d'informations, consultez [Dupliquer un composant](https://servicenow-prod.fluidtopics.net/Qeojq9yaO~LphvDUkU2~5g "Dupliquez un composant configuré à réutiliser sur une page."). * **[Configurer automatiquement les composants à l'aide de paramètres prédéfinis](https://servicenow-prod.fluidtopics.net/chNe2gEdVldvUdYjI5xYwQ#presets)** Utilisez les paramètres prédéfinis des composants pour configurer automatiquement les composants sur les pages compatibles. * **[Créer des paramètres prédéfinis personnalisés pour les composants](https://servicenow-prod.fluidtopics.net/zuyze4r3eYbxf~L19pHfmA)** Créez des paramètres prédéfinis pour gagner du temps et rendre les configurations de vos composants réutilisables dans différentes expériences. * **[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. * **[Améliorer l'accessibilité grâce à la gestion de la mise au point](https://servicenow-prod.fluidtopics.net/93RIm~1qyQGc8Cz97O93xw)** Définissez la mise au point sur des éléments spécifiques afin que les utilisateurs puissent interagir efficacement avec eux à l'aide de lecteurs d'écran. * **[Dupliquer un composant](https://servicenow-prod.fluidtopics.net/Qeojq9yaO~LphvDUkU2~5g)** Dupliquez un composant configuré à réutiliser sur une page. * **[Afficher dynamiquement le contenu avec des rendus conditionnels](https://servicenow-prod.fluidtopics.net/vCZpNN30Oyrabfzb41DI4A)** Utilisez le composant de rendu conditionnel pour afficher du contenu ou des composants en fonction des conditions spécifiées. * **[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. * **[Changer les visualisations de données dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/lpk0gJGaSqhgY5WbarXPJQ)** Modifiez les visualisations de données en temps réel à l'aide d'une liste déroulante pour prévisualiser les données dans votre expérience. * **[Ajouter du contenu à onglets aux pages du générateur d'IU](https://servicenow-prod.fluidtopics.net/KZzELDhFgsWnAC5IMJ3Obw#tabs-components)** Utilisez le composant Onglets pour ajouter du contenu à onglets à des pages dans Générateur d'IU. * **[Ajouter une barre latérale contextuelle](https://servicenow-prod.fluidtopics.net/wyAbuisL60qhTARkTpJNcA)** Ajoutez une barre latérale contextuelle à une page avec Générateur d'IU pour afficher le contenu associé à l'aide d'une structure d'onglets verticaux. * **[Ajouter des formulaires aux pages du générateur d'IU](https://servicenow-prod.fluidtopics.net/UIWtnFTGaJEfqPH0ByKUqg)** Utilisez le composant Formulaire pour ajouter un ou plusieurs formulaires à des Générateur d'IU pages. * **[Créer des fenêtres modales dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/xGjgLSMnykUfNFkwET6HCA)** Utilisez des fenêtres modales avec Générateur d'IU des composants pour fournir des alertes ou des appels à l'action à un utilisateur. Générateur d'IU est fourni avec des fenêtres modales pour gagner du temps et de l'énergie. * **[Étendre votre expérience d'interface utilisateur avec des composants Viewport](https://servicenow-prod.fluidtopics.net/M4fxZwCvnAuzukpldBlWFg)** Les Viewport sont des composants spécialisés qui vous permettent d'étendre votre expérience sans avoir besoin de posséder la page parente dans Générateur d'IU. Vous pouvez utiliser les fenêtres d'affichage de trois manières. Vous pouvez ajouter un composant de fenêtre d'affichage ou un onglet de fenêtre d'affichage à une page, ou ajouter une fenêtre d'affichage au composant de barre latérale contextuelle. * **[Créer des popovers dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/wgI64akAFu0SqL~9KCW8Lg#uib-popover)** Utilisez les popovers sur une page du générateur d'IU pour superposer des informations contextuelles ou des fonctionnalités permettant aux utilisateurs d'accomplir des tâches. * **[Créer des boîtes de dialogue non modales dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/TdzBdVzW~M3Bz1mhyrWA8A)** Utilisez des boîtes de dialogue non modales sur une page du générateur d'IU pour ajouter une fenêtre flottante qui vous permet d'interagir à la fois avec le contenu de la fenêtre et le contenu de la page ci-dessous.