---
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


---

Démarrage rapide de Générateur d'IU
===================================

Démarrage rapide de Générateur d'IU {#ariaid-title1}
====================================================

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 minutes de lecture

Ce guide de démarrage rapide vous guide tout au long du processus de création de votre première page dans Générateur d'IU. La création de votre première page est la première étape pour comprendre comment créer des pages d'interface utilisateur pour votre espace de travail ou vos expériences de portail personnalisées.

Avant de commencer
------------------

Rôle requis : ui_builder_admin

Dans ce Générateur d'IU guide de démarrage rapide, vous effectuez les tâches suivantes pour créer votre première page 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.").
* Créez votre page en ajoutant des composants. 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.").
* Enregistrez votre page.
* Prévisualisez votre page pour voir à quoi elle ressemble dans un navigateur.
{#ui-builder-quick-start__ul_r2c_wjx_d4b}

Procédure
---------

1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU.  
   Figure 1. Démarrer Générateur d'IU
2. Sélectionnez une expérience dans laquelle vous souhaitez travailler à partir de la Générateur d'IU page d'accueil.  
   Si aucune expérience n'est répertoriée dans laquelle travailler, 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.
   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.  

      Vous pouvez également créer des pages à l'aide de modèles de page, consultez la rubrique [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.") pour plus d'informations.
   4. Entrez <kbd class="ph userinput">Page de démarrage</kbd> comme nom unique pour la page dans le champ Nom .
   5. Spécifiez un chemin d'accès pour votre page dans le champ Chemin d'accès de l'URL . Générateur d'IU Génère un chemin d'accès par défaut en fonction du nom que vous avez donné à la dernière étape.  
      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. Le chemin d'accès est obligatoire et doit être unique. Le chemin d'accès peut inclure des chiffres (0-9), des lettres (A-Z, a-z) et quelques caractères spéciaux (\<\< `- >>,``<< . >>,``<< _ >>,``<< ~ >>),` avec des mots séparés par une barre oblique ou un trait d'union. L'aperçu de l'URL affiche le chemin d'accès de votre page.  
      Remarque :  
      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.").
   6. Sélectionnez Continuer.
   7. **Facultatif :** Ajoutez des paramètres à l'URL de votre page en sélectionnant + Ajouter.  
      Pour plus d'informations, consultez [Gérer les Générateur d'IU pages et les variantes de page](https://servicenow-prod.fluidtopics.net/JoYi7yXR~EalfphqUewmrg "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.").
   8. Sélectionnez Ça a l'air bien.
   9. Entrez <kbd class="ph userinput">la page de démarrage du gestionnaire</kbd> comme nom pour la variante de page.
   10. **Facultatif :** Ajoutez une ou plusieurs audiences pour cette page.  
       Si une audience dont vous avez besoin n'est pas répertoriée, vous pouvez choisir les audiences ouvertes dans le lien de la plateforme pour en créer une.
   11. **Facultatif :** Ajoutez des conditions d'affichage de la page ou de l'onglet.
   12. Sélectionnez Continuer.
   13. Sur l'écran suivant, sélectionnez Version réactive.
   14. Sélectionnez Créer pour créer votre page blanche.

   Félicitations ! Vous avez créé votre première page ! 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. Sélectionnez Éditeur pour commencer à ajouter la personnalisation de votre page.  
5. Ajoutez un composant de conteneur à votre page.  
   Un conteneur est ce qui contient vos composants. Considérez un conteneur comme une zone de la page où vous ajoutez des informations, des images ou des fonctionnalités (vos composants). Vous pouvez avoir autant de conteneurs sur une page que vous le souhaitez, avec autant de conteneurs à l'intérieur des conteneurs, avec autant de composants dans les conteneurs.
   1. Sélectionnez + Ajouter du contenu dans l'arborescence de contenu.  
   2. Sélectionnez la mise en page Colonne unique dans la boîte à outils.
   3. Sélectionnez la mise en page de colonne 1 dans l'arborescence de contenu pour mettre en surbrillance le conteneur.  
   4. Sélectionnez le nom du composant dans le panneau de configuration.  
   5. Dans le champ Étiquette du composant , saisissez <kbd class="ph userinput">Conteneur pour l’en-tête</kbd>.
   6. Dans le champ [ID du composant](https://servicenow-prod.fluidtopics.net/Xev~otlkH0vBSgsZiCDZ8Q#gloss-component-id-ui-builder "Utilisé pour référencer un composant lors de l’ajout d’un script ou de la liaison de données au composant. Un ID de composant est automatiquement créé (en fonction de l’étiquette du composant) lorsque vous ajoutez un composant à une page, mais l’ID du composant peut être modifié.") , saisissez <kbd class="ph userinput">container_for_heading</kbd>.
   7. Sélectionnez Appliquer.  
      Vérifiez que le nom de la mise en page de la colonne devient Conteneur pour l'en-tête dans l'arborescence de contenu. L'arborescence de contenu est un concept important. L'arborescence de contenu est un moyen facile de voir la mise en page structurée de votre page. 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. Vous pouvez effectuer une recherche textuelle pour un composant.

      Pour plus d'informations sur les ID de composants, reportez-vous à la section [ID de composant](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w#work-components__component_id).

   Vous avez ajouté avec succès votre première mise en page en colonne à votre page.
6. Ajoutez un composant En-tête à la mise en page de vos colonnes.  
   Vous pouvez ajouter des composants à la page de différentes manières. Pour plus d'informations sur les façons d'ajouter des composants à votre page, reportez-vous à la section [Ajouter et configurer des composants](https://servicenow-prod.fluidtopics.net/n3~Oe6m5E9q11DW86sXzOA#add-components "Découvrez comment ajouter des composants à votre page dans Générateur d'IU. Une page est créée en ajoutant des composants.").
   1. Sélectionnez + Ajouter du contenu dans l'arborescence de contenu sous la mise en page de colonne créée à l'étape 5.  
   2. Tapez <kbd class="ph userinput">l’en-tête</kbd> dans la recherche et sélectionnez le composant En-tête .
   3. Sélectionnez votre nouveau composant En-tête dans l'arborescence de contenu pour le mettre en surbrillance.
   4. Sélectionnez Aucun dans le panneau de configuration.
   5. Sélectionnez le nom du composant dans le panneau de configuration.
   6. Dans le champ Étiquette de composant , entrez <kbd class="ph userinput">En-tête personnalisé</kbd> comme étiquette unique pour le composant d'en-tête.
   7. Dans le champ ID du composant , entrez <kbd class="ph userinput">custom_heading</kbd> comme ID unique du composant d'en-tête.
   8. Cliquez sur Appliquer.  
   {#ui-builder-quick-start__substeps_yhc_4n5_xvb}
7. Personnalisez le composant En-tête.
   1. Sélectionnez le composant d'en-tête dans l'arborescence de contenu.
   2. Sélectionnez l'onglet Configurer dans le panneau de configuration.
   3. Dans le champ Étiquette , saisissez le texte de votre en-tête, par exemple <kbd class="ph userinput">Mon nouvel en-tête</kbd>.
   4. Le style modifie la taille du texte de l'en-tête.  
      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. Pour plus d'informations sur la configuration des composants, reportez-vous à la section [Configurer des composants dans Générateur d'IU](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w#work-components__config_components).
   5. Laissez le niveau1.
   6. Sélectionnez Enregistrer.

   {#ui-builder-quick-start__substeps_yjn_t22_bwb}  
   Vous avez ajouté et personnalisé un composant d'en-tête à votre page.
8. Ajoutez une mise en page en deuxième colonne à votre page.
   1. Comme précédemment, sélectionnez + Ajouter du contenu dans l'arborescence de contenu.  
   2. Sélectionnez la mise en page Colonne unique dans la boîte à outils.
   3. Sélectionnez la mise en page de colonne 1 dans l'arborescence de contenu pour mettre en surbrillance le conteneur.  
   4. Sélectionnez le nom du composant dans le panneau de configuration.
   5. Dans le champ Étiquette du composant , tapez <kbd class="ph userinput">Conteneur pour le contenu</kbd>.
   6. Dans le champ ID du composant , saisissez <kbd class="ph userinput">container_for_content</kbd>.
   7. Sélectionnez Appliquer.  
   8. Sélectionnez Enregistrer.

   Vous avez ajouté avec succès votre deuxième composant de conteneur à votre page.
9. Ajoutez un composant d'image à votre page.  
   Une image est un bon moyen d'ajouter un visuel à votre page. Dans ce démarrage rapide, vous ajoutez une photo d'archive fournie avec Générateur d'IU. Mais vous pouvez ajouter n'importe quelle image disponible.
   1. Sélectionnez + Ajouter du contenu dans l'arborescence de contenu sous le conteneur créé à l'étape 8.
   2. Tapez <kbd class="ph userinput">image</kbd> dans la recherche et sélectionnez le composant Image .  
      Une image par défaut est chargée dans le composant image. Vous pouvez ajouter votre propre image en ajoutant une URL à l'image. Vous pouvez utiliser des images hébergées sur Internet ou des images dans le Now Platform®fichier . Si vous utilisez une image hébergée sur un site externe, vous devez utiliser le protocole `https` pour des raisons de sécurité.
   3. Sélectionnez le composant Image 1 dans l'arborescence de contenu pour mettre l'image en surbrillance.  
   4. Sélectionnez Aucun dans le panneau de configuration.
   5. Sélectionnez le nom du composant dans le panneau de configuration.
   6. Dans le champ Étiquette du composant , saisissez <kbd class="ph userinput">Mon image</kbd>.
   7. Dans le champ ID du composant , saisissez <kbd class="ph userinput">my_image</kbd>.
   8. Sélectionnez Appliquer.  
   9. Sélectionnez Enregistrer.

   {#ui-builder-quick-start__substeps_h45_jpl_bwb}  
   Vous avez ajouté un composant d'image à votre page.

10. Sélectionnez Aperçu dans l'en-tête Générateur d'IU pour prévisualiser votre page.  
    Félicitations ! Vous avez terminé le Générateur d'IU démarrage rapide. Votre page génère un aperçu de son apparence dans votre espace de travail ou votre expérience du portail.

Résultats
---------

1. Votre première page a été créée dans Générateur d'IU.
2. Votre premier composant de conteneur a été ajouté à la page. Vous avez changé l'étiquette du conteneur.
3. Ajout d'un composant En-tête comme titre au conteneur. Vous avez modifié le texte de l'en-tête. Vous avez également changé l'étiquette.
4. Ajoutez un deuxième composant de conteneur à votre page. Vous avez changé l'étiquette du conteneur.
5. Ajout d'un composant Image . Vous avez modifié l'étiquette du composant d'image.
6. Votre nouvelle page enregistrée.
7. Prévisualisez votre page dans le navigateur.
{#ui-builder-quick-start__ol_pbw_tvm_vnb}

Vous avez terminé le Générateur d'IU démarrage rapide avec succès !