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


---

Ajuster la mise en page pour une création dynamique
===================================================

Ajuster la mise en page pour une création dynamique {#ariaid-title1}
====================================================================

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

Lors de la création de pages avec une création dynamique pour différents facteurs de forme, découvrez comment ajuster la mise en page pour améliorer l'apparence de la page dans des tailles plus petites.

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

Rôle requis : ui_builder_admin

Pourquoi et quand exécuter cette tâche
--------------------------------------

Une méthode pour améliorer la convivialité de la page consiste à adapter les composants en ajustant la mise en page sur les différents points d'arrêt. Il existe de nombreuses options pour ajuster la mise en page. Dans cette procédure, ajustez la disposition du composant d'onglets pour le facteur de forme mobile.  
La plupart des options de mise en page des colonnes du volet des propriétés peuvent être modifiées pour différents facteurs de forme. Toutefois, les options suivantes ont des valeurs globales dans tous les facteurs de formulaire :

* Nombre de colonnes
* Option Empiler les colonnes dessous (pixels)
* Toutes les options sous Accessibilité
{#responsive-authoring-adjust-layout__ul_wyz_v3p_lcc}

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

1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU.
2. Ouvrez une expérience pour travailler ou créez une expérience en sélectionnant Créer \> expérience.  
   Consultez la rubrique [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.") pour plus d'informations sur la création d'expériences.
3. Créez une page à partir de zéro avec la création dynamique.  
   Pour plus d'informations sur la création d'une page, consultez [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.").
4. En haut, vérifiez que l'icône du facteur de forme du bureau est sélectionnée.  
   ![Flèche noire pointant vers l’icône de facteur de forme de bureau en haut d’une page du générateur d’IU en mode Éditeur.]()
5. À l'étape, sélectionnez + Ajouter du contenu.
6. Dans l'onglet Mises en page , sélectionnez Colonne unique.
7. Ajoutez le composant des onglets.
   1. Sélectionnez l'icône + au centre de la colonne sur l'étape.
   2. Dans l'onglet Composants , recherchez et sélectionnez le composant Onglets .
   3. Sélectionnez Enregistrer.
   {#responsive-authoring-adjust-layout__substeps_am5_1rv_sbc}
8. Dans l'onglet Configurer du panneau de configuration, modifiez le nom du premier onglet en sélectionnant l'icône de modification.  
9. Dans Étiquette de l'onglet, saisissez <kbd class="ph userinput">l’onglet 1</kbd>.
10. Dans ID d'onglet, saisissez <kbd class="ph userinput">tab_1</kbd>
11. Sélectionnez Enregistrer.
12. Ajoutez un deuxième onglet.
    1. Dans l'onglet Configurer , sélectionnez + Ajouter en regard de Onglets.
    2. Sélectionnez Démarrer à partir d'un conteneur vide , puis sélectionnez Suivant.
    3. Dans Étiquette de l'onglet, saisissez <kbd class="ph userinput">l’onglet 2</kbd>.
    4. Vérifiez que l'ID d'onglet a été automatiquement renseigné avec tab_2.  
    5. Sélectionnez Créer.
    {#responsive-authoring-adjust-layout__substeps_z3n_1cn_5bc}
13. Ajoutez un troisième onglet en répétant l'étape 12 et dans 12c, nommez l'onglet <kbd class="ph userinput">Onglet 3</kbd>.
14. Vérifiez que votre arborescence de contenu et votre page sont exactes.  
15. Sélectionnez l'icône de facteur de forme de la tablette.  
    ![Flèche noire pointant vers l’icône de facteur de forme de tablette en haut d’une page du générateur d’IU en mode Éditeur.]()

    L'espacement et la position des onglets sont adaptés à la largeur de la tablette.
16. Sélectionnez l'icône du facteur de forme mobile.  
    ![Flèche noire pointant vers l’icône de facteur de forme mobile en haut d’une page d’UI Builder en mode Éditeur.]()

    Les onglets prennent plus de place à la taille plus petite.

17. Modifiez la disposition des onglets uniquement pour la taille mobile.
    1. Dans l'arborescence de contenu, sélectionnez Colonne 1 sous Mise en page de colonne 1.
    2. Sur le panneau de configuration, dans Direction, sélectionnez l'icône de ligne.  
    3. Sélectionnez Enregistrer.

    {#responsive-authoring-adjust-layout__substeps_mf2_tzm_5bc}  
    L'étape se met automatiquement à jour et indique que l'onglet 1 est visible et qu'il existe un nouveau menu déroulant.

18. Sélectionnez Aperçu.
19. Sélectionnez Plus.  
    Les deux autres onglets sont disponibles.

20. Sélectionnez les icônes de facteur de forme des ordinateurs de bureau et des tablettes pour afficher que la liste déroulante Plus n'apparaît pas.
21. Sélectionnez le X pour fermer la superposition de l'aperçu .