--- 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énérateur d'IU tutoriel ======================== Générateur d'IU tutoriel {#ariaid-title1} ========================================= * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 9 minutes de lecture Apprenez à utiliser les bases de Générateur d'IU pour créer une page appelée Mon tutoriel. Avant de commencer ------------------ Rôle requis : ui_builder_admin Dans ce Générateur d'IU didacticiel, vous effectuez les tâches suivantes pour créer une [page](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-page-ui-builder "Collection de mises en page de colonnes, de colonnes et de composants. Créez ou personnalisez plusieurs pages du générateur d’IU pour les expériences de l’espace de travail et du portail.") dans Générateur d'IU: * Démarrer Générateur d'IU. * Créez une page pour votre espace de travail ou votre expérience de portail personnalisée. Pour plus d'informations sur la création de pages, reportez-vous à la section [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."). * Modifiez la mise en page de la page pour qu'elle ait deux colonnes. Pour plus d'informations, 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."). * Créez votre page en ajoutant deux [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.") de conteneur. * Renommez les composants de votre conteneur dans l'arborescence de contenu. * Ajoutez un composant En-tête et un composant Bouton au premier conteneur. Ajoutez un composant de visualisation des données au deuxième conteneur. Pour plus d'informations sur les composants, reportez-vous à la section [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."). * Configurez vos composants comme suit : * Liez le bouton au ServiceNow® site Web. * Connectez le composant de visualisation des données à une source de données pour afficher les données de la tâche. Pour plus d'informations sur les ressources de données, reportez-vous à la section [Exposer dynamiquement les données dans les pages du générateur d'IU (fonctionnalité avancée)](https://servicenow-prod.fluidtopics.net/L8tl7TBPwiuguEHwEsYdxw "Synchronisez les données entre ServiceNow les tables et les données avec les pages avec lesquelles vous créez .Générateur d'IU Les pages affichent les données synchronisées en temps réel et mettent à jour les données/tables lorsqu’un utilisateur saisit des informations."). {#uib-tutorial__ul_yn2_xyq_24b} * Enregistrez souvent votre page. * Prévisualisez votre page pour voir à quoi elle ressemble dans un navigateur. {#uib-tutorial__ul_fgz_xhc_24b} Procédure --------- 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. Vous pouvez également saisir Générateur d’IU directement dans le navigateur de filtre.Figure 1. Démarrer Générateur d'IU 2. À partir de la page d'accueil Générateur d'IU , choisissez une expérience dans laquelle vous souhaitez travailler. Si aucune expérience dans laquelle travailler ne figure dans la liste, contactez votre administrateur pour accéder à une expérience ou créer une expérience. Pour plus d'informations, consultez [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."). 3. Créez une page. | Pour effectuer cette tâche | Faites ce qui suit | | Créer une page | 1. Sélectionnez l'icône + dans la section Pages et variantes . ![Bouton Créer une page sur la page de vue de l’expérience.]() 2. Sélectionnez Créer une nouvelle page. 3. Sélectionnez plutôt Créer à partir de zéro. ![Bouton Créer plutôt à partir de zéro.]() 4. Entrez le nom de votre nouvelle page. Le nom peut être ce que vous voulez. Dans cet exemple, vous pouvez saisir Ma page de didacticiel. 5. Dans le champ Chemin d'accès , un chemin d'accès est automatiquement saisi en fonction du nom de votre page. Dans cet exemple, le chemin d'accès est my-tutorial-page. Le chemin d'accès est l'URL de la page. Vous pouvez modifier ce chemin d'accès pour ce que vous voulez, mais le chemin d'accès doit être unique. Le chemin d'accès doit être en minuscules et ne contenir aucun espace. L'aperçu de l'URL indique quel sera le chemin d'accès de votre page. 6. Sélectionnez Continuer. 7. (Facultatif) Ajoutez des paramètres à l'URL de votre page. 8. Sélectionnez Ça a l'air bien. 9. Saisissez le nom de votre variante de page. Le nom peut être ce que vous voulez. Dans cet exemple, vous pouvez saisir Ma première variante de page. 10. Ajoutez une audience pour la variante de page en sélectionnant + Ajouter une audience. Dans cet exemple, sélectionnez Admin. 11. Sélectionnez Continuer. 12. Sur l'écran suivant, sélectionnez Version réactive. 13. Sélectionnez Créer. 14. Une fois votre page créée, l'écran de l'éditeur de page s'affiche. Vous pouvez modifier des paramètres avancés tels que les paramètres d'URL et les paramètres de variantes . Pour ce didacticiel, vous pouvez ignorer ces options avancées. Pour plus d'informations sur la modification des paramètres avancés, reportez-vous à la section [Créer une page UI Builder : Paramètres avancés](https://servicenow-prod.fluidtopics.net/JoYi7yXR~EalfphqUewmrg#work-pages__create_page_advanced_settings). {#uib-tutorial__ol_ncw_hms_tjb} Figure 2. Éditeur de page du générateur d'IU | |----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_n3q_gmd_jjb} Félicitations ! Vous avez créé votre page de tutoriel ! La page est vide de contenu. Vous ajoutez des composants à la page pour y créer des fonctionnalités. Les composants sont les blocs de construction d'une page. Générateur d'IU est livré avec de nombreux composants prêts à être ajoutés à votre page. Les composants peuvent être aussi simples qu'un en-tête ou aussi complexes qu'une liste. 4. Changez la mise en page de la page en une mise en page à deux colonnes. Pour plus d'informations sur les mises en page, reportez-vous à la section [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 effectuer cette tâche | Faites ce qui suit | | Changer la mise en page de la page en deux colonnes | 1. Sélectionnez le niveau Corps de l'arborescence de contenu pour mettre la page en surbrillance. 2. Sélectionnez + Ajouter du contenu dans l'arborescence de contenu. 3. Sélectionnez la mise en page Deux colonnes . 4. La mise en page à deux colonnes s'affiche. {#uib-tutorial__ol_igv_b1x_d4b} | |-----------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_hgv_b1x_d4b} 5. Ajoutez un composant En-tête et un composant Bouton dans la colonne de gauche. | Pour effectuer cette tâche | Faites ce qui suit | | Ajouter un composant d'en-tête à votre conteneur de colonne de gauche | Vous pouvez ajouter des composants à la page de différentes manières. Pour plus d'informations sur les façons dont vous pouvez ajouter des composants à votre page, consultez le [tableau 1](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w#work-components__addcomponentstable). 1. Sélectionnez le bouton + au milieu de la colonne de gauche. 2. Tapez En-tête dans le champ de recherche. 3. Sélectionnez le composant En-tête pour l'ajouter à votre conteneur. Un composant d'en-tête est un moyen d'ajouter du texte ou un titre à votre page. 4. Sélectionnez Aucun dans la liste des paramètres prédéfinis du panneau de configuration. 5. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l'étiquette du composant et l'ID du composant. Vous pouvez les changer pour ce que vous voulez, tant qu'ils sont uniques. 6. Sélectionnez Appliquer. 7. Configurez votre composant En-tête . Les auteurs de composants configurent les composants pour exposer les propriétés appropriées requises pour configurer leurs composants. * Définissez le style sur En-tête-primaire. Le style modifie la classe du texte d'en-tête, comme la police, le poids et la couleur. Par exemple, si vous sélectionnez En-tête-secondaire, le texte est plus petit. Différentes tailles d'en-têtes sont utiles si vous avez deux en-têtes et que vous souhaitez que le deuxième en-tête soit plus petit que l'en-tête principal. * Entrez Mon tutoriel comme texte d'en-tête dans le champ Étiquette . * Laissez le niveau 1. {#uib-tutorial__ul_yc3_dlx_d4b} {#uib-tutorial__ol_r1g_4fl_vnb} | | Ajouter et configurer un composant de bouton à votre conteneur de colonne de gauche | Ajoutez un composant de bouton à votre page. Configurez le bouton en modifiant le texte et son apparence. Modifiez ensuite ce qui se passe lorsque vous cliquez sur le bouton en ajoutant un gestionnaire d'événements pour le bouton. Le gestionnaire d'événements ajoute une action au bouton pour le lier à la page d'accueil ServiceNow® . Ainsi, lorsque vous cliquez sur le bouton, la page d'accueil s'ouvre ServiceNow® dans un nouvel onglet de votre navigateur. Pour plus d'informations sur la configuration des composants, voir [Composants](https://developer.servicenow.com/dev.do#!/reference/now-experience/sandiego/components). 1. Sélectionnez le + sur le bord inférieur du composant d'en-tête que nous avons ajouté dans la section précédente. 2. Tapez le bouton dans le champ de recherche. 3. Sélectionnez le composant Bouton dans la liste. Pour plus d'informations sur l'ajout de composants à votre page, consultez [le tableau 1](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w#work-components__addcomponentstable). 4. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l'étiquette du composant et l'ID du composant. Vous pouvez les changer pour ce que vous voulez, tant qu'ils sont uniques. 5. Configurez le composant de bouton comme suit. * Entrez Page d’accueil dans le champ Étiquette pour changer le nom de votre bouton. * Changez la taille en grande. * Entrez Accueil dans le champ de recherche Icône . * Sélectionnez Plan d'accueil. {#uib-tutorial__ul_gxl_w1x_g4b} 6. Ajoutez un gestionnaire d'événements pour configurer l'action qui s'applique au bouton. * Sélectionnez l'onglet Événements dans le panneau de configuration. * Sous Bouton cliqué, sélectionnez + Ajouter un nouveau gestionnaire d'événements. * Sous Gestionnaires d'événements hérités, sélectionnez Lien vers la destination. * Cliquez sur Sélectionner la destination. * Dans l'écran Sélectionner la destination , sélectionnez URL externe. * Saisissez votre URL. Pour ce didacticiel, tapez https://www.servicenow.com Sélectionnez OK. * Sélectionnez Ajouter. Pour plus d'informations sur les gestionnaires 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."). {#uib-tutorial__ul_crn_zxd_24b} 7. Sélectionnez Enregistrer. C'est toujours une bonne idée d'enregistrer souvent votre page pendant que vous travaillez. 8. Sélectionnez Aperçu. 9. Testez le bouton que vous avez créé lors des étapes précédentes. {#uib-tutorial__ol_nvw_kwd_24b} | |-------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_q1g_4fl_vnb} Vous avez ajouté et configuré le composant En-tête et bouton pour votre page. 6. Ajoutez un composant de visualisation des données au conteneur. Un composant de visualisation de données contient des données que vous affichez de manière visuelle. Configurez les paramètres du composant de visualisation des données. Ajoutez-y ensuite une ressource de données. | Pour effectuer cette tâche | Faites ce qui suit | | Ajouter et configurer un composant de visualisation de données à votre conteneur de colonne de droite | Vous pouvez ajouter des composants à la page de différentes manières. Pour plus d'informations sur les façons dont vous pouvez ajouter des composants à votre page, consultez le [tableau 1](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w#work-components__addcomponentstable). 1. Sélectionnez le bouton + au milieu de la colonne de droite. 2. Dans le champ Rechercher , commencez à saisir Visualisation de données jusqu'à ce que vous voyiez le composant Visualisation de données , puis sélectionnez le composant pour l'ajouter à votre page. 3. Sélectionnez le nom du composant dans le panneau de configuration pour afficher l'étiquette du composant et l'ID du composant. Vous pouvez les changer pour ce que vous voulez, tant qu'ils sont uniques. 4. Ajoutez une ressource de données à votre composant de visualisation de données pour importer les données de compte client. * Sélectionnez le composant de visualisation des données, puis l'onglet Configurer . * Sélectionnez Ajouter une source de données. * Tapez Task [task] dans le champ de recherche et recherchez une tâche disponible sur votre Générateur d'IU instance. * Sélectionnez Ajouter cette source. {#uib-tutorial__ul_wrt_122_24b} 5. Sélectionnez la liste déroulante de type de visualisation de données , puis sélectionnez Composer. Vous pouvez choisir différents types de visualisation en fonction de vos données. 6. Sélectionnez En-tête et bordure dans le panneau de configuration. 7. Entrez Mes tâches dans le champ Titre du graphique . {#uib-tutorial__ol_k31_whl_vnb} | |-------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_j31_whl_vnb} Vous avez ajouté un composant de visualisation de données à la colonne de droite et l'avez configuré. Vous avez également ajouté une ressource de données pour apporter des données de compte client. 7. Enregistrez la nouvelle page une dernière fois. | Pour effectuer cette tâche | Faites ce qui suit | | Enregistrer votre page | 1. Dans le coin le plus à droite de Générateur d'IU, sélectionnez Enregistrer. 2. Maintenant que vous avez enregistré votre page, vous pouvez y accéder dans votre expérience à tout moment. {#uib-tutorial__ol_nd1_c5m_vnb} | |----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_md1_c5m_vnb} 8. Maintenant, prévisualisez votre page pour voir à quoi elle ressemble dans un navigateur. | Pour effectuer cette tâche | Faites ce qui suit | | Aperçu de votre page | 1. Sélectionnez Aperçu dans l'en-tête Générateur d'IU . 2. Reportez-vous à l'en-tête dans la colonne de gauche de votre page. 3. Sélectionnez le bouton Page d'accueil . La ServiceNow® page d'accueil s'ouvre dans un autre onglet de navigateur. Fermez l'onglet du navigateur pour revenir à votre page d'aperçu. 4. Consultez la visualisation des données du compte client dans la colonne de droite de votre page.Figure 3. Prévisualiser la page de votre didacticiel {#uib-tutorial__ol_dyg_qg2_24b} | |----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_cyg_qg2_24b} Félicitations ! Vous avez terminé le Générateur d'IU didacticiel. Résultats --------- 1. A créé une page dans Générateur d'IU. 2. Vous avez changé la mise en page de votre page pour avoir deux colonnes. 3. Ajout d'un composant En-tête en tant que titre à votre colonne de gauche. * Modification du texte de l'en-tête. * Changement de l'étiquette de l'en-tête. {#uib-tutorial__ul_osc_jcr_24b} 4. Ajout d'un composant de bouton sous votre composant d'en-tête. * Configurez votre bouton. * Ajout d'un gestionnaire d'événements pour votre bouton. * Ajout d'un gestionnaire d'événements pour configurer un lien vers une page Web. Lorsque vous cliquez sur le bouton, la page Web s'ouvre. {#uib-tutorial__ul_hdx_kcr_24b} 5. Changement de l'étiquette de la colonne de droite. 6. Ajout d'un composant de visualisation des données . * Configurer le composant de visualisation des données. * Ajout d'une ressource de données pour apporter des données de tâche. {#uib-tutorial__ul_twx_qcr_24b} 7. Votre nouvelle page enregistrée. 8. A prévisualisé votre page. {#uib-tutorial__ol_pbw_tvm_vnb}