Chargement de la mise en page CSV
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
Accédez à une mise en page à partir de sa page d’administration de plan correspondante.
- Dans le volet de navigation de l’administrateur CPQ , cliquez sur Plans (2).
- Cliquez sur l’onglet Mises en page (3).
- Cliquez sur le nom du plan auquel vous souhaitez accéder.
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
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
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
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
Téléchargez le fichier CSV HiTech Layout correspondant :
Mise en page au format CSV
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.
| 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 |
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.
La colonne du type d’affichage du composant définit la façon dont un champ doit être affiché. Les types suivants sont disponibles.
| 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 |
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.
| 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 ; } |
| 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 ; } |
||
| 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 ; } |
||
| 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.
|
| 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 |
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
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.