Gérer les Générateur d'IU pages et les variantes de page
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
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.
| 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. |
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.
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.
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.
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.
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.
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.
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.
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 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 , 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.
Consultez Modifier une page pour plus d'informations.
Générateur d'IU Arborescence de contenu
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.
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.
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 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
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.
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.
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 mise en page de colonne ou un composant 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
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
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 ) ou 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.
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.
- 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.
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.
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.
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 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 ou sélectionnez Aperçu > Ouvrir le chemin de
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.