--- sourceDocument: Australie Gestion de la relation client pour les ventes sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/order-management Release : - australia ft:locale : - fr-FR ft:publication_title : - Australie Gestion de la relation client pour les ventes ft:clusterId : - omgmt bundleId : - omgmt workflow : - Customer and Industry --- # Chargement de la mise en page CSV # Chargement de la mise en page CSV {#ariaid-title1} * Rversion finale: Australia * * Mis à jour 12 mars 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 minutes de lecture Découvrez comment créer et charger un fichier CSV contenant une spécification de mise en page. Les mises en page sont définies dans un plan. Lorsque plusieurs mises en page sont définies pour un plan, les utilisateurs finaux les effectuent une rotation à l'aide du bouton autre mise en page dans le coin supérieur droit de l'interface utilisateur buyside. Les mises en page sont définies via un fichier CSV qui contient toutes les instructions pour la mise en page. Pour simplifier l'administration, nous recommandons aux administrateurs de créer leur mise en page dans une feuille de calcul (Google Sheets, Microsoft Excel ou similaire) et de l'exporter au format CSV. ## Création et modification d'une mise en page {#csv_layout_upload__section_hyn_cnn_bhc} Accédez à une mise en page à partir de sa page d'administration de plan correspondante. 1. Dans le volet de navigation de l'administrateur CPQ , cliquez sur Plans (2). 2. Cliquez sur l'onglet Mises en page (3). 3. Cliquez sur le nom du plan auquel vous souhaitez accéder. {#csv_layout_upload__ol_ygg_pkn_bhc} Pour commencer une nouvelle mise en page, cliquez sur Créer une mise en page. Pour modifier une mise en page existante, cliquez sur le nom d'une mise en page dans la liste. Vous pouvez également modifier une mise en page dans l'assistant de mise en page. Une fois que vous avez redéployé votre plan, les nouveaux changements d'interface utilisateur apparaissent du côté de l'achat. Lorsque vous commencez une nouvelle mise en page, la fenêtre Nouvelle mise en page s'ouvre. Vous pouvez importer un fichier CSV en le déposant dans la case ou en cliquant pour le sélectionner sur votre ordinateur. (i) Vous pouvez également télécharger un exemple de fichier de mise en page pour votre référence. (ii) [Exemple de fichier de mise en page](https://drive.google.com/file/d/1lzNW_jGkdzdUGwm9rh8xL9BeSxhv3MEJ/view?usp=sharing) Lorsque vous modifiez une mise en page existante : Cliquez sur Exporter pour télécharger le fichier de mise en page actuel. (a) Importez un fichier CSV de mise en page en cliquant sur Remplacer (b). Cliquez sur Enregistrer (c) pour remplacer la mise en page actuelle par la mise en page modifiée. Si le chargement du fichier CSV échoue, toutes les erreurs trouvées dans le fichier seront affichées à l'administrateur dans une boîte de dialogue d'erreur. ## Utilisation de la mise en page Chargement d'un fichier CSV {#csv_layout_upload__section_c13_2nn_bhc} Pour une présentation complète du format CSV de mise en page, visionnez la vidéo suivante de 26 minutes : [Présentation de la mise en page CSV](https://drive.google.com/file/d/1htNUPvKa168ZdBF6qXeyIEbTGJljvlyg/view?usp=sharing) Pour obtenir un exemple d'utilisation d'un CSV de mise en page, visionnez la vidéo de 4 minutes suivante : [Vue d'ensemble de la mise en page HiTech](https://drive.google.com/file/d/1sVs53kC6CBvRRbgqDD12Bq0ofwKI36Rd/view?usp=sharing) Téléchargez le fichier CSV HiTech Layout correspondant : [Fichier CSV de mise en page HiTech](https://drive.google.com/file/d/10soQrWkXtQajYb8bce68slzFxgMvmRTX/view?usp=sharing) ## Mise en page au format CSV {#csv_layout_upload__section_lw1_knn_bhc} Les en-têtes de colonnes sont en minuscules. La colonne Type définit les composants de la mise en page. La table suivante indique les valeurs valides pour cette colonne. {#csv_layout_upload__table_fyb_srn_bhc__entry__2} | Valeur de type | Description | |-|-| | tierDef | Propriétés : Pages, PagesWithLabels, PagesWithNavigation, ExpandableSection, Tab, TabWithNavigation, VerticalTab, VerticalTabWithNavigation, Accordion, AccordionWithNavigation | | couche | | | ensemble de colonnes | | | image | | | Liste de produits | | | productListColumn | | | champ | | [Tableau 1. Valeurs valides pour la colonne type] {#csv_layout_upload__table_fyb_srn_bhc} Le format de valeur de colonne de chemin d'accès donne un repère visuel pour le placement de l'étiquette source de remplacement de l'élément et n'est pas actuellement utilisé par l'application. Laissez-le vide. `L'étiquette` définit l'étiquette à afficher à l'utilisateur final dans l'interface utilisateur pour les niveaux et les champs. `variableName` définit un identificateur unique pour un niveau ou un champ. * Pour les niveaux, l'administrateur doit définir des valeurs distinctes. * Pour les champs, renseignez le nom de la variable de champ. {#csv_layout_upload__ul_ejw_ynn_bhc} La colonne du type d'affichage du composant définit la façon dont un champ doit être affiché. Les types suivants sont disponibles. {#csv_layout_upload__table_xqt_fyn_bhc__entry__2} | Type de champ | Types d'affichages des composants | |-|-| | Texte | Texte Lecture Seule Texte Zone de texte Date | | Booléen | Booléen Radio Boutons radio | | Numéro | Numéro Curseur Nombre avec soumission Texte Lecture Seule Devise en lecture seule Numéro formaté | | Liste déroulante (sélection unique) | Liste déroulante étendue picklistDisplayOnly étendu Liste déroulante Liste déroulante en lecture seule Radio Boutons radio SingleSelect picklistGrid Radio verticale Sélecteur visuel | | Liste déroulante (sélection multiple) | Liste déroulante MultiSelectExtended MultiSelectExtended, picklistDisplayOnly Liste déroulante à sélection multiple Sélection multiple picklistGrid MultiSelectVisualPicker Case à cocher Case à cocher verticale | [Tableau 2. Types d'affichages des composants] {#csv_layout_upload__table_xqt_fyn_bhc} `columnOrder` est pertinent pour les composants d'un ensemble de colonnes. Utilisé pour fournir l'ordre de tri des champs en fonction de la résolution de l'écran dans l'interface utilisateur réactive. `className` est utilisé pour référencer les classes prédéfinies disponibles dans CPQ. Par exemple, lors de l'importation d'une image, une classe peut définir le flux de champs autour de cette image. Ajoutez ces noms de classe au fichier CSV de mise en page dans la colonne className. Comme les contrôles de hauteur maximale et de grille interagissent avec la largeur du navigateur, nous vous recommandons d'expérimenter chaque classe distinctement, en explorant comment la classe réagit à une variété de tailles de navigateur. {#csv_layout_upload__table_z23_xkb_nhc__entry__4} | Effet | Concerne | Classes prises en charge | Remarques et exemples | |-|-|-|-| | Grille | Champs, images | topleft1col1row, topleft1col2row... topleft1col6row | topleft1col1row { grid-column : 1/2 ; } topleft1col2row { grid-column : 1/2 ; grid-row : 1/3 ; } topleft1col3row { grid-column : 1/2 ; grid-row : 1/4 ; } topleft1col4row { grid-column : 1/2 ; grid-row : 1/5 ; } topleft1col5row { grid-column : 1/2 ; grid-row : 1/6 ; } topleft1col6row { grid-column : 1/2 ; grid-row : 1/6 ; } | | Grille | Champs, images | topleft2col1row, topleft2col2row ... topleft2col6row | topleft2col1row { colonne-grille : 1/3 ; } topleft2col2row { grid-column : 1/3 ; grid-row : 1/3 ; } topleft2col3row { grid-column : 1/3 ; grid-row : 1/4 ; } topleft2col4row { grid-column : 1/3 ; grid-row : 1/5 ; } topleft2col5row { grid-column : 1/3 ; grid-row : 1/6 ; } topleft2col6row { grid-column : 1/3 ; grid-row : 1/6 ; } | | Grille | Champs, images | topleft3col1row, topleft3col2row ... topleft3col6row | topleft3col1row { colonne-grille : 1/4 ; } topleft3col2row { grid-column : 1/4 ; grid-row : 1/3 ; } topleft3col3row { grid-column : 1/4 ; grid-row : 1/4 ; } topleft3col4row { grid-column : 1/4 ; grid-row : 1/5 ; } topleft3col5row { grid-column : 1/4 ; grid-row : 1/6 ; } topleft3col6row { grid-column : 1/4 ; grid-row : 1/6 ; } | | Grille | Champs, images | topright1col1row, topright1col2row ... topright1col6row | topright1col1row { grid-column : -2/-1 ; } topright1col2row { grid-column : -2/-1 ; grid-row : 1/3 ; } topright1col3row { grid-column : -2/-1 ; grid-row : 1/4 ; } topright1col4row { grid-column : -2/-1 ; grid-row : 1/5 ; } topright1col5row { grid-column : -2/-1 ; grid-row : 1/6 ; } topright1col6row { colonne-de-grille : -2/-1 ; ligne-de-grille : 1/6 ; } | | Hauteur | Champs | MH5, MH10, MH15 ... MH40 | Hauteur maximale de 5 rem à 40 rem, par incréments de 5 | | Largeur | Champs | w5, w10, w15 ... w40 | Largeur maximale de 5 rem à 40 rem, par incréments de 5 | | Largeur de colonne de grille | Champs | LC-15M-15MAX, LC-15M-20MAX, LC-15M-25MAX, LC-15M-30MAX | Ces classes définissent la largeur des colonnes dans la grille de mise en page. * LC : colonne Mise en page * 15m : largeur de 15 rem * 15max : largeur maximale de 15 rem {#csv_layout_upload__ul_mp5_fpb_nhc} | | Afficher verticalement, aligner au centre | Champs de liste déroulante | disposition verticale, align-center | Par défaut : horizontal (lorsque la mise en page est verticale, la valeur par défaut est gauche) | | Masquer l'étiquette de champ, masquer l'étiquette de l'option de champ | Afficher les composants : Liste déroulante étendue, liste déroulante MultiSelectExtended | hide-field-label, hide-field-option-label | | [Tableau 3. Classes d'effets] {#csv_layout_upload__table_z23_xkb_nhc} La colonne value contient une chaîne JSON pour représenter les propriétés de l'élément (Field ou productlistcolumn) référencé sur cette ligne. `l'espace réservé` permet à l'administrateur de définir le texte d'espace réservé qui s'affichera dans un champ de texte jusqu'à ce que l'utilisateur final saisisse une valeur. ## Composants avec images {#csv_layout_upload__section_pp5_2rn_bhc} Pour les composants d'affichage de liste déroulante qui incluent des images, lorsque les options sont désactivées, l'image est estompée. Les administrateurs peuvent remplacer ce comportement et forcer l'image à avoir un aspect normal en appliquant la classe `override-disabled` au champ classname dans la mise en page. Remarque : Un moyen antérieur de définir et de modifier les mises en page à l'aide de JSON est disponible. Lorsque vous utilisez JSON, les fichiers doivent être chargés dans l'application via l'API REST. Une fois qu'une mise en page a été modifiée via JSON, la manipulation CSV n'est plus disponible. Si une mise en page a été modifiée via JSON, le bouton Mise en page actuelle est désactivé. **Concepts associés** * [Assistant de mise en page](https://servicenow-prod.fluidtopics.net/xzAkRh~iqDeDdhbhfcP4tQ "Regardez une vidéo sur la façon de générer une mise en page.") * [Éditeur de mise en page](https://servicenow-prod.fluidtopics.net/b7bbkEuF7_OrAZVZb2NMHg "Découvrez comment utiliser l’éditeur de mise en page pour modifier une mise en page sans quitter CPQ.") * [Configurer le chargeur de matrice](https://servicenow-prod.fluidtopics.net/K2ymeNdFomETilrZIWi7tw "Utilisez le chargeur de matrice pour ajouter, modifier et migrer efficacement des champs, des options de champ, des règles et des mises en page dans CPQ. Chargez des fichiers CSV, validez les configurations et rationalisez les mises à jour en bloc ou les migrations d’environnements grâce à la prise en charge de la gestion des erreurs et de la vérification.")