--- 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 --- Gérer les Générateur d'IU pages et les variantes de page ======================================================== Gérer les Générateur d'IU pages et les variantes de page {#ariaid-title1} ========================================================================= * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 12 minutes de lecture Découvrir le contenu d'une page .Générateur d'IU Comprendre les blocs de construction d'une Générateur d'IU page, tels que les mises en page en colonnes et les composants. Générateur d'IU Démarrage rapide {#work-pages__section_vbh_3ls_jpb} ------------------------------------------------------------------- Créez des pages dans le Générateur d'IU cadre d'un espace de travail ou d'une expérience de portail personnalisée. Générateur d'IU Les pages se composent de mises en page et de [composants](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-component-ui-builder "Les composants sont utilisés dans le générateur d’IU pour créer des pages. Les composants ont une interface qu’un utilisateur final peut afficher et avec laquelle il peut interagir. Les composants peuvent communiquer entre eux par le biais d’événements et de propriétés. Les composants couramment utilisés comprennent En-tête, Image, Liste, Formulaire et Bouton."). Vous créez une page à l'aide de mises en page en colonnes et de composants pour guider un utilisateur dans une expérience. Par exemple, vous pouvez créer une page pour gérer les demandes de déplacement de vos employés. La page peut avoir des mises en page en colonnes avec des composants contenant des listes de toutes les demandes de déplacement soumises et approuvées. Vous pouvez ajouter des boutons qui permettent aux utilisateurs d'ajouter et de soumettre des demandes de déplacement. La façon dont vous construisez votre page est illimitée. Remarque : Un développeur doit travailler sur n'importe quelle [variante](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-variant-ui-builder "Version d’une page UI Builder dont l’accès est contrôlé par rôle ou condition. Créez des variantes de pages pour cibler les expériences de différents publics. Par exemple, créez une page d’accueil pour les agents et une variante pour les gestionnaires à la même URL. Vous pouvez également créer une variante de page que les utilisateurs voient dans différentes conditions.") à la fois. Mises en page et composants de colonnes dans Générateur d'IU {#work-pages__section_iyh_td2_4nb} ----------------------------------------------------------------------------------------------- Les mises en page et les composants des colonnes sont les blocs de construction de votre Générateur d'IU page. Ajoutez des mises en page et des composants de colonnes à votre page pour créer ou personnaliser votre espace de travail ou votre expérience de portail. Par exemple, ajoutez une mise en page en colonnes et placez dans une colonne un composant de bouton qui permet aux utilisateurs de soumettre des demandes. Vous pouvez ajouter des mises en page en colonnes, des colonnes et des composants, ainsi que naviguer entre eux, à partir de l'étape ou de l'arborescence de contenu. Une mise en page en colonne peut contenir une ou plusieurs colonnes. Les colonnes peuvent contenir des composants. Modifiez le style visuel des mises en page des colonnes, des colonnes et des composants pour en faire votre propre expérience. {#work-pages__table_dv3_chr_24b__entry__2} | Type | Description | |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Mise en page en colonnes | Un conteneur flexible avec une à six colonnes. Ajoutez des mises en page en colonnes pour fournir une structure et un cadre de travail à une page. | | Colonne | Remplissez les colonnes avec des composants. | | Composant | Éléments de base d'une page, tels que les boutons, les listes et les formulaires. | | [Modal](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-modal "Fenêtre d’expérience utilisateur qui se superpose à une autre fenêtre de contenu et prend le contrôle de l’expérience utilisateur.") | Utilisez un modal pour créer un type de page qui Générateur d'IU s'affiche en haut de la page et nécessite une action. | | [Popover](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-popover-ui-builder "Superposition de page qui permet aux utilisateurs de continuer à utiliser le reste de la page. Les popovers peuvent être configurés comme des pages du générateur d’IU avec du texte, des composants, des images, des champs et des éléments de menu.") | Un popover est un type de conteneur qui apparaît au-dessus d'une Générateur d'IU page lorsqu'il est déclenché par un événement. Utilisez le composant popover pour afficher des informations supplémentaires ou des actions liées à la page. | [Tableau 1. Types d'éléments de mise en page] {#work-pages__table_dv3_chr_24b}Consultez [Personnaliser les Générateur d'IU pages à l'aide de composants](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w "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.") pour plus d'informations. Créer une page UI Builder {#work-pages__section_b3v_xjq_snb} ------------------------------------------------------------ Créez une Générateur d'IU page pour créer une expérience de page à partir de zéro ou utilisez un modèle de page. Créez une page, un composant à la fois. Si vous utilisez l'un des modèles de page prédéfinis, vous partez d'une structure de base et pouvez la personnaliser en fonction de vos besoins. Donnez un nom à votre Générateur d'IU page. Définissez le chemin d'accès (ou conservez le chemin d'accès par défaut qui est automatiquement ajouté en fonction du nom de votre page). Un chemin d'accès par défaut est ajouté en fonction du nom de votre page. Vous pouvez également créer votre propre parcours, mais celui-ci doit être unique. L'aperçu de l'URL affiche le chemin d'accès de votre 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. Par défaut, le périmètre de l'application est celui dans lequel se trouve actuellement l'utilisateur Now Platform®. Pour plus d'informations sur le périmètre de l'application, reportez-vous à [En savoir plus sur la sécurité et les rôles](https://servicenow-prod.fluidtopics.net/aFpv44YrrL~zyrHcZD4T7Q "Configurez la sécurité et les rôles de votre Générateur d'IU instance."). Utilisez un Générateur d'IU modèle de page pour créer une page basée sur un modèle de page prédéfini, puis personnalisez la page en fonction de vos besoins. Vous pouvez référencer ou copier un modèle de page. Pour plus d'informations, consultez [Créer une page à partir d'un modèle](https://servicenow-prod.fluidtopics.net/VjMRDcqIOHbLjsMglcGL_A "Utilisez un modèle pour créer une page basée sur un modèle de page prédéfini. Un modèle de page peut vous aider à créer des pages plus rapidement et à maintenir la cohérence des pages au sein d’une expérience. Les modèles de page peuvent inclure des composants, des ressources de données et une mise en page."). Créer une page UI Builder : Paramètres avancés {#work-pages__create_page_advanced_settings} ------------------------------------------------------------------------------------------- Ajoutez les paramètres requis à votre Générateur d'IU page. Un paramètre obligatoire est un élément de données requis par votre page, tel qu'un sys_id, une table ou une requête. Les paramètres requis sont utiles pour les composants, car ils peuvent se lier à la valeur du paramètre requis. Par exemple, vous pouvez ajouter un paramètre de table au champ URL, puis lier des données à cette table. Lorsque la table est référencée, elle expose les données de la table à tous les composants de la page. Les paramètres requis sont visibles dans l'URL lorsque vous les ajoutez à votre page. Dans l'exemple suivant, un paramètre requis appelé table a été ajouté. Notez qu'il a été ajouté à l'URL. ![Paramètre appelé table ajoutée à la page. L’URL est accompagnée d’une table.]() Ajoutez des paramètres facultatifs à votre Générateur d'IU page. Les paramètres facultatifs sont des éléments de données facultatifs que vous pouvez ajouter à l'URL de votre page. Contrairement aux paramètres requis, les paramètres facultatifs sont toujours des paires de noms et de valeurs qui fonctionnent dans quel que soit l'ordre dans lequel ils sont fournis. ![Option Modifier les paramètres facultatifs.]() Définissez l'audience et les paramètres de conditions pour Générateur d'IU les variantes de page. Lorsque vous créez une page, Générateur d'IU une variante de la page est également créée pour vous par défaut. Une variante de page est une variante de votre page sur le même chemin d'accès qui vous permet de cibler des expériences pour différentes audiences à l'aide de critères d'utilisateur. Par exemple, une page pour les responsables et une variante de cette page pour leurs subordonnés directs. Pour plus d'informations sur la création d'une variante, reportez-vous à la section [Créer une page de variante](https://servicenow-prod.fluidtopics.net/ChjHOpiYKddmlt~LYPtydQ "Une variante de page dans Générateur d'IU est une variante d’une page qui existe sur le même chemin et qui cible différentes audiences à l’aide de critères d’utilisateur."). Pour plus d'informations sur les audiences, reportez-vous à la section [En savoir plus sur les audiences](https://servicenow-prod.fluidtopics.net/_brwuViSrLsk86qQzeDNig "Découvrez comment appliquer les bonnes audiences à vos Générateur d'IU pages."). Valeurs de test dans Générateur d'IU {#work-pages__section_kv2_xdx_g4b} ----------------------------------------------------------------------- Ajoutez une valeur de test à votre Générateur d'IU page afin d'apporter des données de test dans la page à des fins de test. Par exemple, si vous ajoutez une table en tant que paramètre requis, vous pouvez ajouter une valeur de test de l'incident et y lier une ressource de données pour intégrer des données de test sur l'incident de cette table. Pour obtenir des valeurs de test à afficher des données, ajoutez une ressource de données, puis configurez la ressource de données pour lier un enregistrement à la valeur de test dans l'URL. Par exemple, vous pouvez ajouter l’incident comme valeur de test. Ajoutez ensuite une ressource de données nommée Rechercher un seul enregistrement. Dans le champ Table, lier dynamiquement la valeur de test d'incident à une table `context.props.table` , comme illustré dans l'image suivante. Afficher une page UI Builder existante {#work-pages__section_pzv_5mq_snb} ------------------------------------------------------------------------- Vous pouvez travailler sur n'importe quelle Générateur d'IU page de votre expérience en fonction des paramètres de votre rôle. Cliquez sur le nom de la page dans laquelle vous souhaitez travailler lorsque vous êtes dans la vue d'expérience de votre expérience. Dans l'éditeur de page, ouvrez une autre variante de page en sélectionnant la liste déroulante dans l'en-tête. Créer une variante de page UI Builder {#work-pages__section_oc2_tnq_snb} ------------------------------------------------------------------------ Une variante vous permet de cibler différents publics avec un contenu différent, en utilisant des critères d'utilisateur. Par exemple, vous pouvez créer une page d'accueil pour les agents et une variante de la page pour les gestionnaires qui existe dans le même chemin d'URL. Vous définissez l'audience pour chaque Générateur d'IU variante de page. L'audience détermine qui utilise la variante de page. Par exemple, si vous créez une page de demande de déplacement, créez-en une variante pour que les gestionnaires gèrent les demandes de déplacement des employés. Vous définissez l'audience de la page de gestionnaire pour toute personne ayant le rôle de gestionnaire. Les employés ne peuvent pas voir cette variante. Pour plus d'informations sur les audiences, reportez-vous à la section [En savoir plus sur les audiences](https://servicenow-prod.fluidtopics.net/_brwuViSrLsk86qQzeDNig "Découvrez comment appliquer les bonnes audiences à vos Générateur d'IU pages."). Consultez [Créer une page de variante](https://servicenow-prod.fluidtopics.net/ChjHOpiYKddmlt~LYPtydQ "Une variante de page dans Générateur d'IU est une variante d’une page qui existe sur le même chemin et qui cible différentes audiences à l’aide de critères d’utilisateur.") pour plus d'informations. Modifier les paramètres de page du générateur d'IU {#work-pages__section_ozc_t4q_snb} ------------------------------------------------------------------------------------- Modifiez les paramètres de votre Générateur d'IU page à tout moment en sélectionnant Paramètres dans la vue de l'expérience Générateur d'IU . Vous pouvez modifier le nom, le chemin et les paramètres de votre page après avoir créé une page. Consultez [Modifier une page](https://servicenow-prod.fluidtopics.net/Ie22gNaPsEycKGTfflaKrA "Modifiez une page pour modifier son nom, son chemin d’accès et ses paramètres.") pour plus d'informations. Générateur d'IU Arborescence de contenu {#work-pages__content-tree} ------------------------------------------------------------------- L'arborescence de contenu dans le panneau de gestion des pages est importante. Il affiche non seulement chaque disposition en colonne, colonne et composant de votre Générateur d'IU page, mais il vous permet également de trouver facilement vos composants et de les utiliser. L'arborescence de contenu est particulièrement importante lorsque votre page comporte plusieurs composants. Vous sélectionnez le composant dans votre arborescence de contenu pour mettre en surbrillance le composant sur la page, ce qui facilite la création de votre page.Figure 1. Arborescence de contenu avec des composants Lorsque vous cliquez sur un composant dans l'arborescence de contenu, il met en surbrillance le composant de votre étape afin que vous puissiez configurer, ajouter un style, des événements, des données, etc. Vous pouvez faire glisser des éléments dans l'arborescence de contenu pour réorganiser votre page. Il est important d'ajouter une étiquette de composant lorsque vous ajoutez un composant à votre page. L'étiquette de composant est utilisée dans l'arborescence de contenu pour appliquer des ID d'étiquettes à chaque composant de l'arborescence de contenu. Vous pouvez identifier les composants beaucoup plus facilement dans l'arborescence de contenu lorsqu'ils sont étiquetés de manière appropriée. Générateur d'IU Toolbox {#work-pages__section_str_ltm_gxb} ---------------------------------------------------------- Utilisez la Générateur d'IU boîte à outils pour ajouter des mises en page et des composants à votre page. Accédez à la Générateur d'IU boîte à outils en sélectionnant + Ajouter du contenu ou l'icône + dans l'étape. Recherchez dans la boîte à outils les mises en page et les composants que vous souhaitez ajouter à une Générateur d'IU page. Affichez une description brève d'une disposition ou d'un composant en sélectionnant l'icône d'informations ![Icône d’informations.]() pour afficher l'info-bulle. L'onglet Composants affiche des couleurs différentes si un composant peut utiliser un paramètre prédéfini ou s'il est regroupé avec plusieurs composants. Étape Générateur d'IU {#work-pages__section_fr1_mmr_snb} -------------------------------------------------------- La scène est la plus grande zone de l'éditeur Générateur d'IU et est utilisée pour construire des pages. Ajoutez vos mises en page de colonnes et vos composants ici en sélectionnant un bouton + ou en les faisant glisser du volet Composant vers la page. Sur la scène, le corps, les dispositions des colonnes et les colonnes sont délimités en magenta. Les composants sont entourés en bleu. Utilisez l'icône d'élément d'arborescence pour accéder à une autre couche de contenu. Par exemple, si une colonne est sélectionnée, accédez facilement à la mise en page de la colonne parente ou à un composant dans la colonne. Sélectionnez l'icône Menu sur une disposition ou un composant de colonne pour des options telles que Dupliquer et Supprimer. Les modifications apportées à l'étape sont reflétées dans le panneau Styles à droite. Les modifications apportées dans le panneau Styles mettent immédiatement à jour les éléments de l'étape. Mettre à l'échelle la taille de l'étape dans Générateur d'IU {#work-pages__section_bd3_xc5_x5b} ----------------------------------------------------------------------------------------------- Ajustez la taille de la scène dans l'éditeur Générateur d'IU en sélectionnant la liste déroulante Largeur. Annuler et Rétablir dans Générateur d'IU {#work-pages__section_s4x_2gm_5wb} --------------------------------------------------------------------------- Annulez et rétablissez les modifications que vous avez apportées à votre Générateur d'IU page. Inversez toute action que vous effectuez sur une mise en page, un composant, un style ou une mise en page. La fonction Annuler et Rétablir se trouve dans la barre d'outils de l'en-tête. Vous pouvez sélectionner le bouton Annuler ( ![Bouton Annuler.]()) ou Rétablir ( ![Bouton Rétablir.]()) pour inverser une action. Vous pouvez également cliquer sur la liste déroulante d'annulation pour revenir en arrière de plusieurs étapes. Vous ne pouvez pas annuler ou rétablir les modifications apportées dans l'étagère de données. Vous pouvez annuler les 20 actions précédentes en sélectionnant la liste déroulante Annuler. Générateur d'IU Panneau de configuration {#work-pages__section_s2r_ydr_snb} --------------------------------------------------------------------------- Utilisez le panneau de configuration pour utiliser des composants, notamment l'organisation, le style et la configuration des gestionnaires d'événements. * Sélectionnez l'onglet Config (Configuration ) pour configurer les composants. Chaque composant dispose de différentes options de configuration qui vous permettent de contrôler les parties nécessaires du composant. Par exemple, un composant de bouton est simple et vous ne pouvez configurer que son apparence, son étiquette et quelques propriétés. Un composant de liste est plus compliqué et contient des dizaines de paramètres de liste modifiables. * Sélectionnez l'onglet Styles dans le panneau de configuration pour ajouter un style à un composant. Vous pouvez utiliser des feuilles de style en cascade (CSS) basées sur des normes pour modifier le style visuel d'un composant. Par exemple, ajoutez ou modifiez une couleur d'arrière-plan, une bordure ou tout autre style CSS. Consultez [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. * Sélectionnez l'ongletÉvénements pour configurer des événements qui ajoutent des actions à vos composants, pages, ressources de données et actions déclaratives. Lorsque vous ajoutez des composants à votre Générateur d'IU page, ils ne sont pas configurés pour effectuer une action. Par exemple, un composant de bouton est statique et ne fait rien tant que vous ne lui avez pas lié une action d'événement, telle que la suppression d'un enregistrement. Consultez [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.") pour plus d'informations. * Les colonnesrégissent la façon dont les composants sont disposés sur une page. Lorsque vous ajoutez une mise en page en colonne à une Générateur d'IU page, vous pouvez configurer la façon dont vous souhaitez concevoir la mise en page. Après avoir ajouté un composant à une colonne dans la mise en page, vous pouvez configurer les éléments de manière plus avancée. Par exemple, vous pouvez justifier le contenu, aligner les éléments et définir la hauteur, la largeur, les marges, l'arrière-plan, les bordures et le remplissage de la disposition des colonnes, des colonnes et des composants. La grille CSS est le système de mise en page le plus puissant. La grille CSS est construite sur une grille bidimensionnelle qui vous donne le pouvoir sur la façon dont vous créez vos pages. Consultez [Organiser les composants dans les pages du générateur d'IU](https://servicenow-prod.fluidtopics.net/3E6QvANo8NwYir8pWDptRw "Les mises en page en colonnes organisent les composants d’une Générateur d'IU page. Découvrez comment les mises en page de colonnes sont utilisées dans Générateur d'IU.") pour plus d'informations. {#work-pages__ul_emz_w2r_snb} Ouvrir une page du générateur d'IU pour la prévisualiser {#work-pages__section_gd4_4xq_snb} ------------------------------------------------------------------------------------------- Prévisualisez une Générateur d'IU page pour voir à quoi elle ressemble en tant que page Web. Sélectionnez le bouton ![Aperçu de cette variante.]() pour tester la variante sur laquelle vous travaillez actuellement, y compris les modaux, les fenêtres, les composants, les ressources de données et les données dynamiques. L'aperçu d'une variante de page est utile pour voir son apparence et son fonctionnement lors de la création d'une expérience. Une autre méthode de prévisualisation d'une page consiste à demander le chemin de l'URL au serveur. Utilisez cette méthode pour tester si un utilisateur voit la variante lorsqu'il ouvre la page. Sélectionnez la flèche déroulante en regard de Aperçu et sélectionnez Ouvrir ![le chemin de l’URL Ouvrez le chemin de l’URL de la page.]() ou sélectionnez Aperçu \> Ouvrir le chemin ![de l’URL Ouvrez le chemin de l’URL de la page.](). Consultez [Découvrez comment afficher et tester votre Générateur d'IU expérience](https://servicenow-prod.fluidtopics.net/yLVUbePnKFlqgIm6ZvbCUw "Prévisualisez votre expérience dans Générateur d'IU pour voir à quoi elle ressemble et fonctionne lors de la création d’une expérience. L’aperçu permet de s’assurer que votre expérience fonctionne comme prévu, que les ressources de données sont disponibles et que les mises en page sont correctement configurées.") pour plus d'informations. Développeur modifiant dans Générateur d'IU {#work-pages__section_wc4_tyq_snb} ----------------------------------------------------------------------------- Dans le menu, modifiez la Générateur d'IU page en tant que développeur sur la plateforme. Cette option vous permet de modifier les détails au niveau de la plate-forme de votre page et vous permet de Générateur d'IUquitter . Vous devez avoir le rôle approprié en tant que développeur. * **[Créer une page dans 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. * **[Modifier une page](https://servicenow-prod.fluidtopics.net/Ie22gNaPsEycKGTfflaKrA)** Modifiez une page pour modifier son nom, son chemin d'accès et ses paramètres. * **[Ajouter une audience à votre Générateur d'IU page](https://servicenow-prod.fluidtopics.net/aRwsA7igRnkKvXq5Jq2n2w)** Ajoutez une ou plusieurs audiences à votre page ou variante de page. * **[Valeurs de test dans une page](https://servicenow-prod.fluidtopics.net/D7IJuwckPAkpEV7zRhrmAA)** Ajoutez des valeurs de test à votre URL pour importer des données de test dans une page. * **[Créer une page de variante](https://servicenow-prod.fluidtopics.net/ChjHOpiYKddmlt~LYPtydQ)** Une variante de page dans Générateur d'IU est une variante d'une page qui existe sur le même chemin et qui cible différentes audiences à l'aide de critères d'utilisateur. * **[Création dynamique](https://servicenow-prod.fluidtopics.net/1~W5Wpz7WZVpEfDaPTOKQg)** Utilisez la création dynamique pour créer Générateur d'IU des pages qui s'adaptent facilement à différents facteurs de forme (tailles), tels qu'un ordinateur de bureau, une tablette et un appareil mobile. * **[Découvrez comment afficher et tester votre Générateur d'IU expérience](https://servicenow-prod.fluidtopics.net/yLVUbePnKFlqgIm6ZvbCUw)** Prévisualisez votre expérience dans Générateur d'IU pour voir à quoi elle ressemble et fonctionne lors de la création d'une expérience. L'aperçu permet de s'assurer que votre expérience fonctionne comme prévu, que les ressources de données sont disponibles et que les mises en page sont correctement configurées.