Formats de mise en page (visuels et YAML)

Les mises en page peuvent être gérées dans l’éditeur visuel ou dans YAML. L’éditeur visuel est sélectionné par défaut, mais les administrateurs peuvent basculer vers YAML.

Création d’une nouvelle mise en page

Pour créer une mise en page, accédez à l’interface utilisateur de l’administrateur de Transaction Manager, cliquez sur Mises en page dans le menu de gauche, puis cliquez sur + Ajouter une mise en page pour ajouter une nouvelle mise en page au plan.

Une mise en page existante peut être copiée à l’aide de la fonction Enregistrer sous dans la mise en page.

La mise en page nécessite un nom et un nom de variable. Cliquez dans le champ Nom, entrez le nom de la nouvelle mise en page, puis cliquez sur Enregistrer pour continuer. Bien que le nom puisse être modifié ultérieurement dans la mise en page, le nom de la variable n’est pas modifiable une fois la mise en page enregistrée.

Lorsque la mise en page est enregistrée, l’éditeur visuel s’ouvre. La mise en page par défaut comprend quelques éléments clés, tels que le niveau principal, une grille d’éléments de campagne et une option de recherche de produits.

Noms de mise en page et association d’étapes

Le nom de variable de mise en page est utilisé pour mapper les mises en page aux étapes. Pour mapper une mise en page à une étape, utilisez le nom de l’étape comme nom de mise en page. Une mise en page nommée « mise en page » est mappée à n’importe quelle étape qui n’a aucune mise en page mappée. Le texte par défaut est ajouté à toutes les variables de mise en page.

Par exemple, lorsque les étapes sont nommées Brouillon, Approuvé et Exécuté, et que les mises en page sont nommées Brouillon et Mise en page, le mappage est le suivant :

La mise en page facultative Détails de la ligne affiche les détails sur une ligne sélectionnée dans la grille de l’élément de ligne. Cette vue est initiée via l’effet d’interface utilisateur Détails de la ligne. Cette mise en page nécessite son propre fichier de mise en page et le nom de la variable doit se terminer par _linedetail. Ces mises en page suivent le même mappage que les étapes. En reprenant l’exemple ci-dessus, si vous souhaitez une mise en page détaillée de ligne pour l’étape Brouillon, le nom doit être draft_linedetail.

Le code YAML pour la mise en page est accessible à l’aide du bouton d’affichage dans le sous-en-tête. Les administrateurs peuvent mettre à jour la mise en page soit à l’aide de l’éditeur visuel, soit en modifiant directement le code YAML. Le YAML de chaque élément est également accessible dans la section Valeur brute des propriétés de l’élément.

Le bouton Enregistrer enregistre la version actuelle de la mise en page. Toutefois, le plan doit être déployé pour que la nouvelle version puisse être utilisée dans l’exécution. En cas d’erreurs dans la mise en page, le bouton Enregistrer est désactivé. Pour identifier les erreurs, sélectionnez le bouton Messages d’erreur dans le sous-en-tête. Dans la vue YAML, recherchez les marques rouges sur le côté droit de l’écran qui indiquent l’emplacement de l’erreur.

Informations générales sur la mise en page

Cliquez sur l’icône d’engrenage (paramètres) dans le sous-en-tête pour accéder aux paramètres de mise en page.

Les paramètres comprennent les éléments suivants :

Marques

Personnalisez l’en-tête.

Affichage de la devise

Définissez le style d’affichage de la devise : code, symbole ou aucun des deux.

Lorsque le prix est de 0, afficher

Définissez le comportement lorsque le prix est nul.

Lorsque le prix est indéfini, afficher

Définissez le comportement lorsque le prix n’est pas défini.

Autoriser la sélection des options désactivées

Autorisez l’utilisateur à sélectionner des éléments désactivés dans une liste déroulante. Le cas d’utilisation est d’afficher un message d’explication si sélectionné.

Mettre en surbrillance les changements de champs

Lorsque cette option est activée, les champs sont brièvement mis en surbrillance. Recommandé lorsque les champs sont mis à jour via des règles ou des intégrations ou si des utilisateurs simultanés sont attendus.

Masquer l'en-tête

Masque la section d’en-tête de la mise en page.

Thématisation

Les mises en page de Transaction Manager peuvent être personnalisées avec des thèmes. Les thèmes peuvent être activés dans l’onglet Personnaliser le thème. Pour plus d'informations, consultez Personnalisation avec des CPQ thèmes.

Chevrons de progression de l’étape

Le composant Chevron de progression des étapes affiche une barre de chevron horizontale pour représenter visuellement la progression d’une transaction à travers les étapes. Il peut être défini statiquement ou dynamiquement et est configurable via la mise en page YAML. Pour plus d'informations, consultez Gestionnaire de transaction : mises en page : chevron de progression des étapes.

Couches

Les niveaux sont des sections d’informations pour votre transaction. Les niveaux sont le sommet de la structure hiérarchique d’un gestionnaire de transactions. Vous pouvez utiliser des niveaux pour organiser vos informations de transaction afin qu’elles soient plus faciles à trouver et à comprendre pour l’utilisateur buyside. Il est possible d’ajouter des jeux de colonnes, des niveaux ou une grille d’élément de ligne à un niveau, mais une grille d’élément de ligne doit être le seul élément d’un niveau.

Les types de couches incluent Accordéon, Extensible, Onglets, Onglets verticaux, En-têtes et Pages. Le type et la profondeur d’un niveau peuvent être configurés dans l’onglet Définition du niveau.

Ensembles de colonnes

Comme dans la configuration, les ensembles de colonnes sont des objets dans la mise en page qui vous permettent d’organiser les champs et les événements sur l’affichage d’exécution. Les champs et les événements peuvent être organisés horizontalement dans un ensemble de colonnes. Les champs et les événements sont organisés verticalement à l’aide de plusieurs ensembles de colonnes dans la même couche. Vous pouvez ajouter des champs, des images, du texte et des boutons dans un ensemble de colonnes.

Ensembles de colonnes : champs

Les champs sont un type d’objet qui peut être placé dans le tableau Éléments d’un ensemble de colonnes. Les champs fournissent la source d’entrée de données pour la transaction. Les champs peuvent être ajoutés, supprimés et ordonnés dans un ensemble de colonnes de l’onglet Organiser la mise en page. Une fois ajoutés, des propriétés de champ supplémentaires peuvent être définies dans l’onglet Modifier les informations de champ.

Dans l’onglet Modifier les informations de champ, changer le type d’affichage du champ en « zone de texte » permet à l’utilisateur de redimensionner le champ.

ColumnSets : événements

Les événements sont des objets qui entraînent la réalisation de certaines actions. Les événements sont généralement représentés dans la mise en page sous forme de bouton. Pour ajouter un événement, ajoutez un bouton à un ensemble de colonnes, puis basculez le paramètre Bouton d’événement . Une fois activé, un événement peut être sélectionné dans la liste déroulante Événement.

Grille de l’élément de ligne

L’objet Grille de l’élément de ligne affiche les informations sur le produit incluses dans la transaction. Des informations détaillées sur les produits et les prix sont affichées dans l’objet Grille de l’élément de ligne.

La grille d’élément de ligne possède les propriétés de mise en page suivantes, chacune étant activée lorsque sa valeur est définie sur vrai. Les propriétés doivent être définies dans l’éditeur YAML principal.

• showLineNumbers: active des numéros de ligne conviviaux
• supportLongText: une propriété de champ de grille d’élément de ligne qui active un popover sur le champ lorsqu’il est sélectionné
• autoScrollIntoView: lisse l’interaction de défilement entre le corps de la transaction et le LIG

Extrait de code YAML :

     - depth: 1
      label: Line Items
      lineGrid:
        columns:
          - order: 1
            variableName: txn.line.product.name
          - order: 2
            variableName: txn.line.product.partnerId
        showLineNumbers: true
        lineLevelButtons:
          - icon: settings
            label: Line Details
            uiEffect:
              type: lineDetail
              target: slideout
            variableName: reconfig
          - event: cloneLine
            label: Clone Lines
            variableName: cloneLine
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites
        gridHeaderButtons:
          - label: Add Lines
            uiEffect:
              type: productSearch
              target: slideout
              options:
                products: true
                favorites: true
            variableName: productSearch
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites
          - label: Reconfigure Lines
            uiEffect:
              type: reconfigure
              target: slideout
            variableName: reconfig
        autoScrollIntoView: true
      variableName: lineItems

Les boutons d’événement de niveau ligne peuvent avoir une icône définie. Les icônes doivent être définies dans le code YAML dans la section Valeur brute des propriétés du bouton de ligne ou dans l’éditeur YAML principal. Les boutons peuvent utiliser des icônes spécifiées dans la bibliothèque SLDS Utility.

Tableau 2. Icônes disponibles

Automatiser	buyer_group_qualifier	chevron vers le bas	chevron gauche	chevronright	chevron vers le haut
choix	effacer	horloge	fermer	custom_apps	supprimer
bas	modifier	Favori	Gauche	lightning_extension	Droit
question	rechercher	paramètres	target_mode	trois points	threedots_vertical

Extrait de code YAML :

        lineLevelButtons:
          - icon: settings
            label: Line Details
            uiEffect:
              type: lineDetail
              target: slideout
            variableName: reconfig
          - event: cloneLine
            label: Clone Lines
            variableName: cloneLine
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites

Enfin, il existe trois façons d’afficher les numéros de ligne dans la grille des éléments de ligne : au moyen d’une propriété de mise en page, ou par l’un des deux champs système :

• La propriété de showLineNumbers mise en page. Parce qu’il fonctionne efficacement et n’a pas de limite au nombre de lignes, c’est la méthode recommandée.

  showLineNumbers Affiche des numéros de ligne séquentiels pour les lignes visibles. La numérotation se réinitialise lorsqu’un filtre ou une recherche s’applique à la grille des éléments de ligne.

• Champ txn.line.orderNumber système

  txn.line.orderNumber Affiche la numérotation hiérarchique de toutes les lignes (par exemple : 1, 1.1, 2, 2.1, 2.2, 2.2.1). La numérotation n’est pas réinitialisée lorsqu’un filtre ou une recherche s’applique à la grille des éléments de ligne. La numérotation peut être appliquée à un maximum de 2 000 lignes.

  Le champ a les mêmes propriétés de mise en page que les autres champs de niveau ligne et peut être ajouté à la mise en page dans la section lineGrid de la mise en page.

  Pour activer ce champ, soumettez une demande à l’assistance clientèle.

• Champ txn.line.number système

  txn.line.number Affiche la numérotation séquentielle de toutes les lignes (c’est-à-dire 1, 2, 3, etc.).

  Comme pour txn.line.orderNumber, la numérotation n’est pas réinitialisée lorsqu’un filtre ou une recherche est appliqué, et il y a un maximum de 2 000 lignes. Le champ a les mêmes propriétés de mise en page que les autres champs de niveau ligne et peut être ajouté à la mise en page dans la section lineGrid de la mise en page. Pour activer ce champ, soumettez une demande à l’assistance clientèle.

Recherche de liste de produits

L’objet Recherche de liste de produits fournit un ensemble de propriétés de mise en page pour les résultats de recherche de liste de produits dans le flux d’ajout de lignes/recherche de produit. Par défaut, la recherche de liste de produits est ajoutée via le bouton d’effet d’interface utilisateur Ajouter des lignes . Les champs peuvent être ajoutés, supprimés et réorganisés dans l’objet de recherche de produit pour définir l’interface utilisateur d’exécution. Les propriétés connexes se trouvent à trois endroits :

• Propriétés du bouton avec l’effet d’interface utilisateur de recherche de produit
• Propriétés de recherche de liste de produits accessibles via l’objet de recherche de produit dans la mise en page
• Chacun des champs de l’objet de recherche de liste de produits sur la mise en page

Les propriétés de l’objet de recherche de liste de produits incluent :

• Tri primaire par défaut : définissez jusqu’à deux paramètres utilisés pour trier les résultats de recherche. Les champs suivants peuvent être utilisés comme paramètres :
  • modifié
  • création
  • Nom (par défaut si aucun paramètre n’est défini)
  • ID partenaire
  • productCode
  • description
  • Prix unitaire
  • externeConfigurable
  L’ordre peut être défini par paramètre en tant qu’asc ou desc.
• Rechercher lors de la soumission : détermine si les résultats de la recherche sont mis à jour lorsque l’utilisateur tape ou uniquement lorsque l’utilisateur clique sur Soumettre.

Les propriétés au niveau du champ sont les suivantes :

Largeur de colonne

Valeur compatible CSS pour définir la largeur

Alignement

Alignement de l’en-tête et des valeurs

Activer le tri

Lorsqu’elle est activée, elle permet de trier les colonnes

Activer le popover de texte long

Lorsqu’elle est activée, un popover s’affiche lorsque la valeur du champ est sélectionnée

Effets d’interface utilisateur

Les effets d’interface utilisateur sont des éléments de mise en page qui ajoutent des fonctionnalités spécifiques à un bouton. Les effets de l’interface utilisateur comprennent :

URL

Ouvre l’URL associée en ligne, dans une fenêtre modale, dans un panneau coulissant ou dans un nouvel onglet ou une nouvelle fenêtre.

Ancrage

Permet d’accéder à l’emplacement spécifié dans la transaction

Recherche de produit

Ouvre le catalogue de produits, démarrant le flux Ajouter des produits

Détail de la ligne

Ouvre la mise en page des détails de ligne

Reconfigurer

Ouvre les produits sélectionnés à la configuration UX

Ajouter un favori

Ouvre une fenêtre modale pour décrire et créer un favori à partir de la sélection

Gérer les favoris

Ouvre le gestionnaire des favoris

Actualiser la session

Vérifie si la session a été modifiée et, si c’est le cas, actualise le sessionId et fusionne les changements.

Exporter des lignes

Exporte vers un fichier CSV toutes les lignes d’une transaction qui répondent aux paramètres de tri, de filtrage et d’affichage/masquage des colonnes.

Extraits de code YAML

Propriétés de mise en page :

# Layout version
version: 1
# Layout identifiers
label: Example layout
variableName: default_ExampleLayout
# Tier definitions
tierDef:
  - depth: 1
    representation: BasicContainer
# Layout
layout:
  label: layoutsection
  variableName: layoutsection
  tiers:
    - label: tier1
      variableName: tier1
      depth: 1

Niveaux :

# Layout
layout:
  label: layoutsection
  variableName: layoutsection
  tiers:
    - label: tier1
      variableName: tier1
      depth: 1

Ensembles de colonnes :

columnSets:
        - elements:
            - type: field
              columnOrder: 1
              variableName: txn.opportunity.id
          variableName: col1

Ensemble de colonnes avec champs :

columnSets:
        - elements:
            - type: field
              columnOrder: 1
              variableName: txn.opportunity.id
            - type: field
              columnOrder: 1
              variableName: txn.custom.opportunityName
            - type: field
              classInfo: mw20
              columnOrder: 1
              variableName: txn.custom.primaryContact
          variableName: col1

Ensemble de colonnes avec événements :

To be added

Propriétés du champ :

fields:
  - type: Text
    label: Custom line field
    variableName: txn.line.custom.customText
  - type: ReadOnlyText
    label: TXN Number
    variableName: txn.custom.tXNNumber

Recherche de liste de produits :

productList:
  columns:
    - label: Product ID
      sortable: true
      variableName: id
    - label: Product Name
      variableName: name
    - label: Product description
      variableName: description
      supportLongText: true
    - label: Price
      variableName: unitPrice
  defaultSort:
    - externallyConfigurable,desc
    - name