Gérer les Générateur d'IU pages et les variantes de page

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 12 minutes de lecture
  • Découvrir le contenu d’une page .Générateur d'IU Comprenez les éléments constitutifs 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

    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 sont constituées de mises en page et de composants. Vous créez une page à l’aide de mises en page en colonnes et de composants pour guider un utilisateur tout au long d’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 une variante à la fois.

    Mises en page et composants de colonnes dans Générateur d'IU

    Les mises en page et les composants des colonnes sont les éléments constitutifs 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 colonne 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 de 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.

    Tableau 1. Types d’éléments de mise en page de page
    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 pour 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 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 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.
    Consultez Personnaliser les Générateur d'IU pages à l’aide de composants pour plus d'informations.

    Créer une page UI Builder

    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 chemin d’accès, mais celui-ci doit être unique. L’aperçu de l’URL affiche le chemin d’accès de votre page. Définissez le type d’URL de la page. Les types d’URL vous aident à classer et à rechercher des pages importantes dans la vue de l’expérience.

    Le périmètre de l’application protège les applications en identifiant et en restreignant l’accès aux fichiers et aux données d’application. Par défaut, le périmètre de l’application est celui dans lequel se trouve actuellement l’utilisateur dans le ServiceNow AI 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

    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.

    Écran Créer une page dans lequel vous entrez un nom de page et un chemin. Il indique également le paramètre du périmètre de l’application.

    Créer une page UI Builder : paramètres avancés

    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 nom et de valeur qui fonctionnent, peu importe l’ordre dans lequel ils sont fournis.

    Option Modifier les paramètres facultatifs.

    Définissez les paramètres d’audience et 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 gestionnaires et une variante de cette page pour les subordonnés directs du gestionnaire. Pour plus d’informations sur la création d’une variante, reportez-vous à la section Créer une page de variante.

    Page des paramètres de variante par défaut dans le générateur d’IU.

    Pour plus d’informations sur les audiences, reportez-vous à la section En savoir plus sur les audiences.

    Valeurs de test dans Générateur d'IU

    Ajoutez une valeur de test à votre Générateur d'IU page afin d’intégrer des données de test dans la page à des fins de test. Par exemple, si vous ajoutez une table comme paramètre requis, vous pouvez ajouter une valeur de test d’incident et y lier une ressource de données pour introduire des données de test sur l’incident pour cette table.

    Formulaire de valeur de test pour les pages du générateur d’IU.

    Pour obtenir des valeurs de test à afficher, 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 enregistrement individuel. Dans le champ Table, liez dynamiquement la valeur de test d’incident à une table context.props.table , comme illustré dans l’image suivante.

    Lier l’incident à la table.

    Afficher une page de générateur d’IU existante

    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 sur laquelle vous souhaitez travailler dans la vue d’expérience de votre expérience.

    Vue Experience pour l’expérience Admin Center.

    Dans l’éditeur de page, ouvrez une autre variante de page en sélectionnant la liste déroulante dans l’en-tête.

    Option de liste déroulante à côté de Page où vous pouvez ouvrir une autre page.

    Créer une variante de page du générateur d’IU

    Une variante vous permet de cibler différents publics avec différents contenus, 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 avec le même chemin d’accès URL.

    Vous définissez l’audience pour chaque Générateur d'IU variante de page. Le public 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 afficher cette variante. Pour plus d’informations sur les audiences, reportez-vous à la section En savoir plus sur les audiences.

    Consultez Créer une page de variante pour plus d'informations.

    Modifier les paramètres de page du générateur d’IU

    Modifiez les paramètres de votre Générateur d'IU page à tout moment en sélectionnant l’icône Actions supplémentaires Icône Actions supplémentaires à trois points , puis Afficher les 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.

    Lien de paramètres sélectionné dans le menu Plus d’actions pour modifier les paramètres de page.

    Consultez Modifier une page pour plus d'informations.

    Générateur d'IU Arborescence de contenu

    L’arborescence de contenu dans le panneau de gestion des pages est importante. Il affiche non seulement chaque disposition de 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 le mettre en surbrillance sur la page, ce qui facilite la création de votre page.
    Figure 1. Arborescence de contenu avec composants
    Arborescence de contenu avec des composants.

    Lorsque vous cliquez sur un composant dans l’arborescence de contenu, il met en surbrillance le composant sur 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.

    Boîte d’étiquette de composant dans laquelle vous ajoutez ou modifiez une étiquette de composant qui s’affiche dans l’arborescence de contenu.

    Générateur d'IU Boîte à outils

    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.

    Boîte à outils du générateur d’IU affichant les options de mise en page de base et avancées.

    Recherchez dans la boîte à outils les mises en page et les composants à 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.

    Info-bulle de la barre d’action expliquant de quoi est composé le composant.

    Étape Générateur d'IU

    L’étape 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.

    Étape du générateur d’IU où vous créez vos pages.

    Sur la scène, le corps, la disposition des colonnes et les colonnes sont délimités en magenta. Les composants sont entourés en bleu.

    Animation montrant les mises en page des colonnes et les colonnes affichées sur l’étape avec un contour magenta et des composants entourés de 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.

    Bouton d’arborescence sélectionné affichant la hiérarchie de la disposition des colonnes, des colonnes et des composants.

    Sélectionnez l’icône Menu sur une mise en page de colonne ou un composant pour des options telles que Dupliquer et Supprimer.

    Bouton de menu sélectionné affichant des options supplémentaires.

    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

    Ajustez la taille de la scène dans l’éditeur Générateur d'IU en sélectionnant la liste déroulante Largeur.

    Liste déroulante Largeur pour redimensionner la fenêtre du générateur de pages à un nombre spécifique de pixels.

    Annuler et rétablir dans Générateur d'IU

    Annulez et rétablissez les modifications que vous avez apportées à votre Générateur d'IU page. Inversez toute action que vous effectuez à 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 le menu déroulant Annuler 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.

    Liste des changements qui peuvent être inversés à l’aide de la liste déroulante Annuler.

    Générateur d'IU Panneau de configuration

    Utilisez le panneau de configuration pour travailler avec des composants, notamment l’organisation, l’application de styles 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.

      Options de configuration pour un composant de bouton, y compris le style, l’étiquette, la désactivation du retour à la ligne et le masquage de la marge inférieure.

    • 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, vous pouvez ajouter ou modifier une couleur d’arrière-plan, une bordure ou tout autre style CSS.

      Onglet Styles avec des options telles que l’alignement, le dimensionnement, l’espacement, l’arrière-plan et la bordure.

      Consultez Changer l’apparence par défaut des composants pour plus d'informations.
    • Sélectionnez l’ongletÉvénements pour configurer les é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.

      Onglet Événements dans le panneau de configuration.

      Consultez Gérer les actions dans les pages du 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 que la mise en page soit conçue. Après avoir ajouté un composant à une colonne de 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.

      Options de mise en page telles que l’alignement, la direction et le dimensionnement.

      Consultez Organiser les composants dans les pages du générateur d'IU pour plus d'informations.

    Ouvrir une page du générateur d’IU pour la prévisualiser

    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 d’affichage, 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 pour plus d'informations.

    Modification de développeur dans Générateur d'IU

    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 sortir de Générateur d'IU. Vous devez avoir le rôle approprié en tant que développeur.

    Menu affichant les options de modification du développeur telles que Ouvrir la collection de variantes, Ouvrir la définition de page et Ouvrir l’enregistrement de variantes.