--- 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 --- Mises en page en colonnes ========================= Mises en page en colonnes {#ariaid-title1} ========================================== * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 11 minutes de lecture Les mises en page en colonnes sont utilisées pour concevoir et organiser Générateur d'IU les pages. Cette vidéo vous montre comment effectuer la procédure suivante. Les mises en page en colonnes vous permettent de créer des pages utiles et visuellement attrayantes dans une expérience. Une disposition en colonnes est un type de conteneur flexible qui peut contenir des composants. Les mises en page en colonnes sont des mises en page simples et préconfigurées, ce qui vous permet de concevoir rapidement une page efficace et attrayante. Il est utile de définir et de définir la structure de la page avec des mises en page en colonnes avant d'ajouter des composants. Les mises en page en colonnes peuvent avoir des colonnes de largeurs égales ou différentes. Vous pouvez configurer la mise en page des colonnes dans son ensemble et les colonnes individuelles de la mise en page. Par exemple, définissez une largeur et une couleur de bordure différentes pour une mise en page en colonne et pour les colonnes individuelles dans la mise en page. Remarque : Actuellement, le masquage/l'affichage de colonnes dans une disposition de colonne en fonction des conditions n'est pas pris en charge. Ajouter une mise en page en colonnes {#ariaid-title2} ----------------------------------------------------- Ajoutez une mise en page Générateur d'IU en colonne pour créer, structurer et organiser les composants sur une page d'expérience. ### Avant de commencer Rôle requis : ui_builder_admin ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpé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é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.") ou ouvrez une page. 4. Sélectionnez + Ajouter du contenu dans l'arborescence de contenu. 5. Sélectionnez l'une des options de base dans l'onglet Mises en page . ![Menu de composant flottant dans Générateur d’IU avec un onglet de mises en page affiché répertoriant les options de disposition de colonnes de base.]() La disposition de colonne apparaît sur l'étape afin que vous puissiez ajouter des composants aux colonnes. Consultez [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.") pour plus d'informations. 6. Ajoutez des mises en page de colonnes supplémentaires au-dessus ou en dessous. * Dans l'arborescence de contenu, sélectionnez et maintenez l'appui (ou cliquez avec le bouton droit de la souris) sur le nom d'une mise en page en colonne ou sélectionnez l'icône Menu pour une mise en page en colonne. Sélectionnez ensuite Ajouter avant ou Ajouter après dans la liste et sélectionnez une mise en page. * À l'étape, sélectionnez une disposition en colonne, puis sélectionnez le signe plus en haut ou en bas. {#create-column-layout__choices_tgp_1d2_rzb} Configurer la mise en page des colonnes {#ariaid-title3} -------------------------------------------------------- Configurez les mises en page en colonnes pour Générateur d'IU ajouter le nombre de colonnes approprié et l'aspect que vous souhaitez sur une page d'expérience. ### Avant de commencer Rôle requis : ui_builder_admin ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpé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é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.") ou ouvrez une page. 4. Si la page ne contient pas déjà une mise en page en colonne, [Ajouter une mise en page en colonnes](https://servicenow-prod.fluidtopics.net/BgHnRp7KvYrn2FFoG4hTKw#create-column-layout "Ajoutez une mise en page Générateur d'IU en colonne pour créer, structurer et organiser les composants sur une page d’expérience."). 5. Ajoutez (jusqu'à six colonnes) à l'aide de l'arborescence de contenu, de l'étape ou du panneau de configuration. * Dans l'arborescence de contenu, sélectionnez et maintenez l'appui (ou cliquez avec le bouton droit de la souris) sur un nom de colonne ou sélectionnez l'icône Menu d'une colonne, puis sélectionnez Ajouter une colonne avant ou Ajouter une colonne après dans la liste. * À l'étape, sélectionnez une colonne, sélectionnez l'icône Menu en regard du nom de la colonne, puis sélectionnez Ajouter une colonne avant ou Ajouter une colonne après dans la liste. * À l'étape, sélectionnez et maintenez l'appui (ou cliquez avec le bouton droit de la souris) sur une colonne, puis sélectionnez Ajouter une colonne avant ou Ajouter une colonne après dans la liste. * Dans l'arborescence de contenu, sélectionnez une mise en page en colonne, puis à l'étape sélectionnez l'icône + plus pour ajouter des colonnes sur le côté droit de la mise en page en colonne. * Dans l'arborescence de contenu, sélectionnez une mise en page en colonne, puis dans le panneau de configuration, utilisez l'icône + plus en regard de Colonnes pour ajouter des colonnes sur le côté droit de la mise en page en colonne. {#configure-column-layouts__choices_qqr_5wv_qzb} Remarque : Les colonnes peuvent être imbriquées les unes dans les autres, mais ce niveau de complexité n'est pas souvent requis sur les pages. 6. Renommez une colonne en modifiant l'étiquette de colonne à partir de l'arborescence de contenu, de l'étape ou du panneau de configuration. * Dans l'arborescence de contenu, sélectionnez et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur un nom de colonne ou sélectionnez l'icône Menu d'une colonne, sélectionnez Renommer. * À l'étape, sélectionnez l'icône Menu en regard d'un nom de colonne, puis sélectionnez Renommer. * Dans le panneau de configuration, sélectionnez l'icône d'informations en regard du nom de colonne. {#configure-column-layouts__choices_c1v_1gr_11c} Le fait de renommer les colonnes peut vous aider à distinguer les différentes colonnes de l'étape et de l'arborescence de contenu. Si vous avez une page complexe avec de nombreuses mises en page et colonnes, il est utile de renommer les colonnes. 7. Pour modifier la largeur d'une colonne dans une mise en page, sélectionnez la mise en page de colonne (dans l'arborescence de contenu ou sur l'étape), puis faites glisser un séparateur de colonne sur la scène vers la gauche ou la droite pour rendre la colonne plus étroite ou plus large. Les pourcentages de largeur en haut des colonnes changent automatiquement lorsque vous faites glisser le séparateur de colonne. Les pourcentages totalisent 100 %. Lors du redimensionnement d'une colonne, tenez compte de l'espace dont le ou les composants dans la colonne ont besoin. Par exemple, les composants de liste et de formulaire ne s'affichent généralement pas bien dans les colonnes étroites. 8. Répartissez les colonnes d'une mise en page uniformément horizontalement à l'aide de l'arborescence de contenu, de l'étape ou du panneau de configuration. * Dans l'arborescence de contenu, sélectionnez et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur un nom de mise en page en colonne ou sélectionnez l'icône Menu pour une mise en page en colonne, puis sélectionnez Répartir les colonnes uniformément dans la liste. * À l'étape, sélectionnez une mise en page en colonne, sélectionnez l'icône Menu en regard du nom de la mise en page en colonne, puis sélectionnez Répartir les colonnes uniformément dans la liste. * Sélectionnez une mise en page de colonne (dans l'arborescence de contenu ou sur l'étape) et, dans le panneau de configuration, sélectionnez Répartir les colonnes uniformément. {#configure-column-layouts__choices_y32_dy1_vzb} 9. Réorganisez les colonnes (y compris leur contenu) dans une mise en page de colonne à l'aide de l'arborescence de contenu ou de l'étape. * Dans l'arborescence de contenu, sélectionnez la colonne et faites-la glisser vers une autre position (une ligne horizontale bleue indique l'endroit où la colonne peut être déposée). * Sur l'étape, sélectionnez un en-tête de colonne, faites glisser la colonne vers une autre position et déposez la colonne dans la zone de dépôt définie par une ligne verticale magenta. {#configure-column-layouts__choices_edh_kyd_rzb} Si vous réorganisez la colonne dans l'arborescence de contenu, l'étape est mise à jour et, si vous réorganisez l'étape, l'arborescence de contenu est mise à jour. 10. Spécifiez la quantité d'espace entre les colonnes de l'arborescence de contenu, de l'étape ou du panneau de configuration. * Dans l'arborescence de contenu, sélectionnez et maintenez enfoncé (ou cliquez avec le bouton droit de la souris) sur le nom d'une mise en page en colonne ou sélectionnez l'icône Menu pour une mise en page en colonne, sélectionnez Mise en page dans la liste et sélectionnez une option de taille dans Écart entre les colonnes. * À l'étape, sélectionnez une disposition en colonne, sélectionnez l'icône Menu en regard du nom de la disposition en colonne, sélectionnez Mise en page dans la liste et sélectionnez une option de taille dans Écart entre les colonnes. * Sélectionnez une disposition de colonne (dans l'arborescence de contenu ou sur l'étape) et, dans le panneau de configuration, sélectionnez une option de taille dans Écart entre les colonnes. {#configure-column-layouts__choices_ud2_hnr_11c} 11. Sélectionnez l'icône Arborescence pour accéder à une autre couche de contenu, par exemple, d'une colonne à la mise en page de colonne parente ou à un composant enfant. 12. Supprimez des colonnes de l'arborescence de contenu ou de l'étape. * Dans l'arborescence de contenu, sélectionnez et maintenez l'appui (ou cliquez avec le bouton droit de la souris) sur un nom de colonne ou sélectionnez l'icône Menu d'une colonne, puis sélectionnez Supprimer la colonne dans la liste. * À l'étape, sélectionnez une colonne, sélectionnez l'icône Menu en regard du nom de la colonne, puis sélectionnez Supprimer la colonne dans la liste. * Dans l'arborescence de contenu, sélectionnez une mise en page en colonne, puis dans le panneau de configuration, utilisez l'icône - moins en regard de Colonnes pour supprimer des colonnes du côté droit de la mise en page en colonne. {#configure-column-layouts__choices_nrl_xjd_rzb} Pour plus d'informations sur la modification de l'espacement des colonnes, reportez-vous à la section [Définir l'écart entre les composants dans les colonnes](https://servicenow-prod.fluidtopics.net/BgHnRp7KvYrn2FFoG4hTKw#set-gap-between-and-in-columns "Dans Générateur d'IU, si une colonne contient plusieurs composants, définissez l’écart entre les composants."). Définir l'écart entre les composants dans les colonnes {#ariaid-title4} ----------------------------------------------------------------------- Dans Générateur d'IU, si une colonne contient plusieurs composants, définissez l'écart entre les composants. ### Avant de commencer Rôle requis : ui_builder_admin ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpé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é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.") ou ouvrez une page. 4. Si la page ne contient pas déjà une mise en page en colonne, [Ajouter une mise en page en colonnes](https://servicenow-prod.fluidtopics.net/BgHnRp7KvYrn2FFoG4hTKw#create-column-layout "Ajoutez une mise en page Générateur d'IU en colonne pour créer, structurer et organiser les composants sur une page d’expérience."). 5. Dans une seule colonne, ajoutez deux composants 1. Dans l'arborescence de contenu, identifiez une colonne et sélectionnez + Ajouter du contenu sous le nom de la colonne. 2. Dans la fenêtre de boîte à outils, sélectionnez un composant, par exemple Avatar. 3. Dans l'arborescence de contenu, déplacez votre souris sur le nom du composant que vous venez d'ajouter, sélectionnez l'icône du menu ouvert (trois points verticaux), puis sélectionnez Ajouter après. 4. Dans la boîte à outils, sélectionnez un autre composant, par exemple, Bouton. {#set-gap-between-and-in-columns__substeps_csp_wgf_51c} 6. Sélectionnez Enregistrer. 7. Dans l'arborescence de contenu, sélectionnez la colonne à laquelle vous avez ajouté les deux composants. 8. Dans le panneau de configuration, sélectionnez une option de taille dans Espace. 9. Pour spécifier une taille d'écart exacte en pixels, déplacez votre souris sur le champ Espace , sélectionnez l'icône Utiliser une valeur personnalisée (crayon) et tapez un nombre, par exemple 300px. 10. Pour alterner entre l'empilement des composants et leur placement les uns à côté des autres dans la colonne, sélectionnez l'icône Ligne ou Colonne dans Direction. ![Dans le panneau de configuration, une flèche noire pointe vers le champ de direction et une seconde flèche noire pointe vers les icônes de ligne et de colonne.]() Pour inverser l'ordre et le placement des composants dans la colonne, sélectionnez l'icône Avancé (trois points horizontaux) dans Direction, puis sélectionnez l'option Inverser (Reverse (Inverser ). ![Dans le panneau de configuration, une flèche noire pointe vers le champ de direction et une seconde flèche noire pointe vers l’icône de direction avancée.]() Définir les options avancées de mise en page des colonnes {#ariaid-title5} -------------------------------------------------------------------------- Définissez des options avancées de disposition des colonnes, notamment la Générateur d'IU largeur de la pile et la hauteur de disposition des colonnes. ### Avant de commencer Rôle requis : ui_builder_admin ### Procédure 1. Accédez à la ToutCadre de travail Now ExperienceGénérateur d'IU. 2. Ouvrez une expérience pour y travailler ou créez une expérience en sélectionnant CréerExpé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é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.") ou ouvrez une page. 4. Si la page ne contient pas déjà une mise en page en colonne, [Ajouter une mise en page en colonnes](https://servicenow-prod.fluidtopics.net/BgHnRp7KvYrn2FFoG4hTKw#create-column-layout "Ajoutez une mise en page Générateur d'IU en colonne pour créer, structurer et organiser les composants sur une page d’expérience."). 5. Sélectionnez une mise en page en colonne contenant deux colonnes ou plus dans l'arborescence de contenu. 6. Pour définir la largeur d'une pile, accédez au panneau de configuration \> Mise en page et sélectionnez Afficher les options avancées de mise en page. Remarque : La définition de la largeur d'une pile vous permet de contrôler l'apparence d'une page avec des mises en page en colonnes dans une fenêtre de navigateur étroite, une tablette ou un appareil mobile. 7. Saisissez une largeur dans les colonnes Empiler ci-dessous. 8. Sélectionnez Enregistrer. 9. Pour tester la largeur de la pile mise à jour, sélectionnez la flèche en regard de Aperçu et sélectionnez Ouvrir le chemin de l'URL. 10. Réduisez la largeur de la fenêtre du navigateur à une largeur inférieure à la largeur de la pile que vous avez spécifiée pour vérifier que les colonnes de droite se déplacent en dessous de la première colonne. 11. Fermez l'onglet du navigateur qui s'est ouvert avec le chemin de l'URL. 12. Pour contrôler la hauteur de la mise en page des colonnes, sélectionnez une mise en page en colonne avec deux colonnes ou plus dans l'arborescence de contenu, accédez au panneau Configuration \> Mise en page, puis sélectionnez Afficher les options avancées de mise en page. Remarque : La définition de la hauteur est utile si la disposition de votre colonne contient un composant qui peut être haut, comme le composant Liste. 13. Sous Calibrage, saisissez des nombres dans une ou plusieurs des options (Hauteur, Min. H, et Max. H) et définissez l'unité de dimensionnement (par exemple, px, % ou em). 14. Sélectionnez Enregistrer. 15. Pour tester le dimensionnement mis à jour, sélectionnez la flèche en regard de Aperçu et sélectionnez Ouvrir le chemin de l'URL. 16. Réduisez et agrandissez la hauteur de la fenêtre du navigateur pour tester les valeurs spécifiées. 17. Fermez l'onglet du navigateur qui s'est ouvert avec le chemin de l'URL.