Niveaux et tierDef

Les niveaux définissent les sections de la page.

Chaque niveau et sous-niveau a besoin d’un tierDef qui définit le type d’affichage du composant (colonne F). Chaque niveau dispose des options suivantes : Onglet, ExpandableSection, Pages, Accordéon, AccordionWithNavection et VerticalTab. Chacun des exemples ci-dessous montre la même configuration avec des structures de couches différentes.

• Onglets :

  

• ExpandableSection (cela rend la mise en page plus verticale)
• Pages :

  

Vous pouvez également avoir des sous-niveaux à l’intérieur des niveaux.

Niveau d’onglet avec un sous-niveau ExpandableSection :

Vous trouverez ci-dessous une capture d’écran du fichier CSV utilisé pour créer cette mise en page à deux niveaux. Les cellules en surbrillance montrent comment les différents niveaux sont marqués. Étant donné que les lignes 9 et 10 ont le même chemin d’accès que la tierDef de la ligne supérieure de la ligne 8, les cellules s’affichent sous forme d’onglets.

Ne définissez pas l’étiquette ou le nom de variable au niveau tierDef (ligne 8 de l’image). Ils sont appliqués au niveau des niveaux (lignes 9 et 10).

Colonne d’étiquette

Tant pour les champs que pour les niveaux, le texte saisi dans la colonne d’étiquette est le texte qui apparaît à l’écran dans la mise en page. L’étiquette des lignes jaunes apparaît sous la forme d’étiquette pour chaque onglet. La colonne d’étiquette est également utilisée pour les champs.

Nom de variable

Les variables sont utilisées pour définir les champs spécifiques aux chemins d’accès et aux appels créés dans CPQ. Dans la ligne 9 de l’image suivante, le nom background de variable est défini dans la colonne E. Aux lignes 25 à 29, background est ajouté au chemin (colonne B). Cela permet de CPQ savoir que ceux-ci vont dans le background niveau.

Les variables relatives à la mise en page doivent être différentes des variables définies pour CPQ les champs ou les règles. Cela est dû au fait que les variables définies dans CPQ sont également utilisées dans la mise en page CSV. Les noms de variables affectés à un champ dans CPQ l’interface utilisateur sont utilisés pour ajouter le champ à la mise en page. Les images suivantes montrent le fichier CSV référençant une variable de champ (variablename=desiredIrons) qui a été créée dans CPQ ce qui a entraîné l’apparition du champ dans la mise en page.

Types d’ensembles de colonnes

Les ensembles de colonnes aident à définir le positionnement vertical des objets dans un niveau. La mise en page est réactive à la largeur du navigateur (qui peut changer), elle utilise donc CPQ des ensembles de colonnes pour aider l’administrateur à identifier un point d’arrêt de ligne intentionnel.

Si l’utilisateur utilise une fenêtre plus petite où l’ensemble de colonnes ne tient pas sur une ligne, les colonnes passent à la ligne suivante. La fin de l’ensemble de colonnes déclenche toujours une nouvelle ligne.

Dans les images suivantes, le user champ fait partie d’un ensemble de 1 colonne, tandis que les champs leftHanded font bag partie d’un deuxième ensemble de colonnes. Si la fenêtre du navigateur devient trop petite pour les trois images (options de liste déroulante pour user), l’ensemble de colonnes continue sur la ligne suivante. Même s’il y a de la place pour le leftHanded champ à côté de la troisième image, il se trouve sur une nouvelle ligne.

Ordre des colonnes

La columnorder colonne du fichier CSV modifie l’ordre des colonnes d’un même ensemble de colonnes. Il n’est pas nécessaire d’ajouter les champs au CSV dans l’ordre, comme le montre l’image suivante.

Mises en page des listes de produits

La liste de produits permet de personnaliser la fonctionnalité de panier des configurations. Pour ajouter des éléments à la liste de produits, une nouvelle règle de produit est créée. Lorsque l’utilisateur sélectionne Simple, les champs suivants sont disponibles :

Si l’utilisateur souhaite que le champ s’affiche dans la mise en page, il doit ajouter une colonne au CSV de mise en page pour le champ. (L’utilisateur utilisera les valeurs de la ProductList.<param> colonne de la table liée comme nom de variable. Voir la note 1 pour l’image suivante.)

Ce qui suit est une capture d’écran de la section de liste de produits de la mise en page CSV.

Quelques points à noter :

1. Les variables de cette colonne correspondent aux valeurs de la productList.<param> colonne {hauss- extList et List sont manquants}. Cela indique CPQ pour ajouter les entrées de l’utilisateur à la table.
2. Pour ajuster l’alignement du texte dans les colonnes individuelles, ajoutez la classe slds-text- align_left, slds-text-align_rightou slds-text-align_center. Pour ajouter plusieurs noms de classe, séparez-les par un espace.
3. price, listet extList toujours aligner correctement pour que les chiffres s’alignent bien.
4. Pour économiser de l’espace à l’écran, sélectionnez modallocation.

Composants de couche

Utilisez ces noms de propriété de composant de couche dans la colonne de composant d’une mise en page CSV.