Exemple : Ouverture d’une liste

Par exemple, un effet d’interface utilisateur peut permettre à un bouton d’ouvrir une liste consultable de produits pouvant être ajoutés à une transaction. Voici comment cela pourrait être écrit dans la mise en page :

      ...
      {
        "type": "button",
        "event": "productSearch",
        "label": "Add Products",
        "uiEffect": {
          "type": "productSearch",
          "target": "slideout"
        },
        "columnOrder": 6,
        "variableName": "productSearch"
      },
      ...

Voici comment ce bouton peut apparaître dans l’interface utilisateur résultante :

Programmation des effets d’interface utilisateur

Un effet d’interface utilisateur est défini par une combinaison de paramètres. Tous les effets d’interface utilisateur ont un type, et certains peuvent avoir une cible, un emplacement ou des options.

Chaque paramètre a les valeurs possibles suivantes :

• type: , , , , , addFavoritereconfigurerefreshSessionmanageFavoriteslineDetailproductSearchanchorurlshowTier
• target: inline, , tab, window, slideoutmodallineDrawerfullScreen
• location: [une URL ou un ID d’élément]
• options: [dépend du type]

Analyse des types

• url nécessite un emplacement sous la forme d’une URL. En appuyant sur le bouton, les utilisateurs accèdent à l’URL via une cible particulière (en ligne, onglet, fenêtre, iframe modal ou iframe coulissant). À l’aide d’accolades, les administrateurs peuvent transmettre dynamiquement des valeurs de champ dans l’URL. Les cas d’utilisation courants consistent à transmettre une valeur à un document de sortie ou à ouvrir une page d’enregistrement dans Salesforce.
• anchor nécessite un emplacement en tant qu’ID d’élément dans la mise en page. Appuyez sur le bouton pour vous concentrer sur l’élément ou le faire défiler. Les éléments parents connexes sont ouverts dans des onglets ou une structure en accordéon. La cible doit être en ligne.
• productSearch Ouvre le catalogue de produits dans la cible dans une fenêtre coulissante ou modale. Un nom de variable est requis. L’effet d’interface utilisateur doit être ajouté à l’élément gridHeaderButtons. Les options sont les suivantes :
  • Afficher la liste des produits : products - true (afficher), false (masquer)
  • Afficher la liste des favoris : favorites - true (afficher), faux (masquer)
  • Emplacement de placement des boutons : actionLocation - footer, header, ou les deux
    • La valeur par défaut est si footer non spécifiée
    • Les boutons incluent « Annuler », « Ajouter une ligne », « Configurer » et « Terminer la configuration »

  Le code suivant affiche les produits, masque les favoris et place les boutons uniquement sur l’en-tête :

  ...
  "options": {
    "products": true,
    "favorites": false,
    "actionLocation": header
  },
  ...

• lineDetail doit se trouver sur un bouton au niveau de la ligne. En appuyant sur le bouton, la mise en page des détails de ligne s’ouvre dans la cible (modal, slideoutou lineDrawer).
• exportLines doit se trouver sur un bouton au niveau de l’en-tête. Une pression sur le bouton exporte les lignes de transaction vers un fichier CSV.
• reconfigure Peut être au niveau de la ligne ou d’un bouton d’en-tête. Si le bouton est au niveau de l’en-tête, il nécessite une sélection de lignes. Le reconfigure type ouvre les configurations dans la cible (modal, slideoutou lineDrawer). reconfigure inclut l’option permettant de définir l’emplacement des boutons. Pour plus de détails, voir productSearch ci-dessus.
• addFavorites Il peut s’agir d’un bouton au niveau de la ligne ou d’un bouton au niveau de l’en-tête. Si le bouton est au niveau de l’en-tête, il nécessite une sélection de lignes. addFavorites Ouvre une fenêtre pour décrire et créer un favori à partir de la sélection. Aucune autre propriété n’est prise en charge.
  Remarque :

  Pour partager des favoris, un paramètre de locataire doit être activé. Pour activer le partage des favoris, soumettez un ticket d’assistance.
• manageFavorites ouvre le Gestionnaire des favoris dans la cible spécifiée (modal, slideoutou inline).
• refreshSession Vérifie si la session a été modifiée. Si tel est le cas, refreshSession actualise le sessionId et fusionne les changements.
• showTier ouvre la grille d’élément de ligne en plein écran si cible = plein écran et emplacement = lineItems. showTier fonctionne avec n’importe quel niveau, mais pour les besoins de cette fonctionnalité, l’emplacement doit être renseigné avec le nom de variable de niveau des éléments de ligne.

Actuellement, les JSON de mise en page ne sont pas validés et certaines combinaisons de propriétés ne sont pas prises en charge. Les combinaisons non prises en charge sont susceptibles d’échouer sans indiquer d’erreurs.

Appels d’événements implicites

Certains effets d’interface utilisateur impliquent l’exécution d’événements associés. Par exemple, le déclenchement de l’effet d’interface productSearch utilisateur ou de l’effet d’interface reconfigure utilisateur exécute l’événement upsertLines .

Conditions d'accès

La capacité d’un utilisateur à accéder à un effet d’interface utilisateur ne peut pas être contrôlée de la même manière que les événements. Il n’existe aucun paramètre comparable aux paramètres d’événement suivants :

Toutefois, les conditions d’accès pour un effet d’interface utilisateur peuvent être modifiées par son contexte dans la transaction ou par des événements connexes.

Lorsqu’un événement implicite est associé à un effet d’interface utilisateur, les conditions d’accès de l’événement déterminent les conditions d’accès du bouton et, à son tour, l’effet d’interface utilisateur. Par conséquent, si un administrateur souhaite limiter les conditions dans lesquelles un productSearch effet d’interface utilisateur peut être déclenché, il peut ajouter ces limitations à l’événement upsertLines .

Un bouton sur la grille de ligne qui a l’effet d’interface reconfigure utilisateur est masqué sur les lignes qui ne sont pas configurables. Au niveau de l’en-tête, elle n’est activée que lorsque chaque ligne sélectionnée est configurable.

Si un événement et un effet d’interface utilisateur sont tous deux présents sur un bouton, l’accès des deux est déterminé par l’intersection de leurs paramètres d’accès individuels. Pour que le bouton soit accessible, l’effet d’interface utilisateur et l’événement doivent être accessibles. Si l’un ou l’autre est désactivé ou masqué, l’ensemble du bouton est désactivé ou masqué.

Cas courants

• Recherche de produit (l’effet d’interface utilisateur addLines appelle implicitement l’événement upsertLines ) :
  • Extrait de code JSON

    {
      "type": "button",
      "variableName": "addLines",
      "label": "Add Lines",
      "uiEffect": {
        "type": "productSearch",
        "target": "slideout"
      }
    }

  • Extrait de code YAML

    type: button
    variableName: addLines
    label: Add Lines
    uiEffect:
      type: productSearch
      target: slideout

• Tiroir de détails de ligne :
  • Extrait de code JSON

    "lineLevelButtons": [
     {
       "icon": "settings",
       "label": "reconfig",
        "uiEffect": {
           "type": "lineDetail",
            "target": "lineDrawer"
          },
        "variableName": "reconfig"
      }

  • Extrait de code YAML

    lineLevelButtons:
    -icon: settings
     label: reconfig
     uiEffect:
       type: lineDetail
       target: lineDrawer
     variableName: reconfig

• Recherche de produit avec les favoris activés :
  • Extrait de code JSON

    {
      "type": "button",
      "variableName": "addLines",
      "label": "Add Lines",
      "uiEffect": {
        "type": "productSearch",
        "target": "slideout"
        "options": {
          "products": true,
          "favorites": true,
        }
      }
    }

  • Extrait de code YAML

    type: button
    variableName: addLines
    label: Add Lines
    uiEffect:
      type: productSearch
      target: slideout
      options:
        products: true
        favorites: true

• Ouvrir le lien URL dans un nouvel onglet :
  • Extrait de code JSON

    {
      "columnorder": 1,
      "label": "Google it",
      "type": "event",
      "variableNane": "LinkToSite",
        "uieffect": {
            "type": "url",
            "target": "tab",
            "location": "https://google.com/search?q=I{txn.search}" 
        }
    }

  • Extrait de code YAML

    columnorder: 1
    label: Google it
    type: event
    variableName: LinkToSite
    uieffect:
      type: url
      target: tab
      location: "https://google.com/search?q=I{txn.search}"

• Actualiser la session :
  • Extrait de code JSON

    {
      "type": "button",
      "variableName": "Refresh",
      "label": "Refresh",
      "uiEffect": {
        "type": "refreshSession"
      }
    }

  • Extrait de code YAML

    type: button
    variableName: Refresh
    label: Refresh
    uiEffect:
      type: refreshSession

• Reconfigurer :
  • Extrait de code JSON

    "lineLevelButtons": [
      {
         "icon": "settings",
         "label": "Reconfigure",
          "uiEffect": {
              "type": "reconfigure",
              "target": "modal"
           },
         "variableName": "reconfig"
      }

  • Extrait de code YAML

    lineLevelButtons:
    -icon: settings
     label: Reconfigure
     uiEffect:
       type: reconfigure
       target: modal
     variableName: reconfig

• Ajouter aux favoris :
  • Extrait de code JSON

    {
      "label": "Add To Favorites",
      "uiEffect": {
        "type": "addFavorite"
        },
      "variableName": "addFavorites"
    }

  • Extrait de code YAML

    label: Add To Favorites
    uiEffect:
      type: addFavorite
    variableName: addFavorites

• Gérer les favoris :
  • Extrait de code JSON

    {
      "label": "Manage Favorites",
      "uiEffect": {
        "type": "manageFavorites",
        "target": "modal"
        },
     "variableName": "manageFavorites"
    }

  • Extrait de code YAML

    label: Manage Favorites
    uiEffect:
      type: manageFavorites
      target: slideout
    variableName: manageFavorites

• Lignes d’exportation Extrait YAML :

  label: Export Lines
  uiEffect:
    type: exportLines
  variableName: exportLines