Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Élaboration d'une interface utilisateur pour créer et cloner un enregistrement

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Faire une requête à l'API de l’interface utilisateur pour obtenir les valeurs par défaut permettant de cloner un enregistrement.
  • Faire une requête à l'API de l’interface utilisateur pour obtenir les valeurs par défaut permettant de créer un enregistrement.
  • Faire une requête à l'API de l’interface utilisateur pour cloner ou créer un enregistrement.

Obtention de valeurs par défaut pour le clonage d'un enregistrement

Pour construire une interface utilisateur permettant aux utilisateurs de créer un enregistrement, créez un formulaire modifiable avec des valeurs pré-renseignées à partir de l'enregistrement cloné. Pour voir un exemple, clonons un enregistrement dans Lightning Experience.
  1. Dans votre Trailhead Playground, ouvrez l'application Vente.
  2. Cliquez sur Opportunités.
  3. Sélectionnez la vue de liste Toutes les opportunités.
  4. Cliquez pour ouvrir une opportunité.
  5. Cliquez sur Cloner.
Page d'accueil d'enregistrement d'Opportunité dans Lightning Experience.

Le formulaire dans Lightning Experience comprend des valeurs pré-renseignées provenant de l'enregistrement cloné, telles que le Nom de l'opportunité, le Nom du compte et le Montant. Formulaire de clonage d'Opportunité dans Lightning Experience

Cliquez sur Annuler ou Enregistrer. Nous n'utilisons pas l'Opportunité clonée, car nous souhaitons seulement voir l'interface utilisateur.

Pour obtenir les informations permettant de créer ce formulaire, utilisez les ressources de clonage par défaut d'enregistrement de l'API d'IU.
GET /ui-api/record-defaults/clone/{recordId}
La saga cloneDefaultsFetcher.js récupère les valeurs par défaut pour la création d'un enregistrement.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/clone/' 
                  + action.id + '?formFactor=' + action.context.formFactor;

Si l'opération de l'API d'IU a réussi, la saga distribue l'action receiveCloneDefaults(responseJson) en retenant la réponse JSON. Le reducer record.js intercepte l'action et l'utilise comme entrée pour mettre à jour l'état de Redux.

Passons à l'application Record Viewer et clonons le même enregistrement afin de pouvoir voir la réponse JSON à partir de l'appel à GET /ui-api/record-defaults/clone/{recordId}.

  1. Rechargez l'application Record Viewer et cliquez sur l'opportunité dans la Liste des événements récents.
  2. Lorsque l'enregistrement se charge, cliquez sur Cloner.
  3. Pour afficher la réponse JSON à partir de l'API de l’interface utilisateur, cliquez sur Show JSON.
  4. Pour développer un objet JSON (tel que layout, objectInfos et record), cliquez dessus.
Réponse JSON du clonage d'enregistrement par défaut.
Concentrons-nous sur la réponse. Elle est similaire à une réponse de la ressource /ui-api/record-ui/{recordId}, mais la charge de travail est plus petite.
  • Comprend les métadonnées layout de l'objet en mode d'édition.
  • Comprend objectInfos (métadonnées d'objet) pour l'objet cloné et tous les objets intégrés. Par exemple, si vous clonez une Opportunité, la réponse comprend les métadonnées de l'objet pour l'objet Opportunité. Elle comprend aussi les métadonnées d'objets pour l'objet Compte, car l'opportunité référence un compte. Et elle comprend également les métadonnées d'objets pour l'objet Utilisateur, car des champs tels que OwnerId référencent un utilisateur.
  • Comprend les données par défaut de record provenant de l'enregistrement que vous clonez, de sorte que vous pouvez l'utiliser pour créer un enregistrement.

Les fonctions /helpers/recordLayout.js analysent la réponse JSON pour créer un modèle de données internes pour les présentations. Pour déterminer les champs modifiables, getLayoutItemModel recherche tout élément de présentation où "editableForNew" : true. Pour déterminer quels champs nécessitent un traitement visuel dans l'IU afin d'indiquer qu'ils sont obligatoires, getLayoutItemModel recherche tous les éléments de présentation où "required" : true. Pour afficher ses propriétés, développez la section layout de la réponse de présentation JSON dans l'application Record Viewer.

"layout" : {
    "eTag" : "5d3f8f0a8163c3d98f16a77482cf9caa",
    "id" : "00hd000000N0BoZAAV",
    "layoutType" : "Full",
    "mode" : "Edit",
    "sections" : [ {
      "collapsible" : false,
      "columns" : 2,
      "heading" : "Opportunity Information",
      "id" : "01Bd000000SObNYEA1",
      "layoutRows" : [ {
       "layoutItems" : [ {
          "editableForNew" : true,
          "editableForUpdate" : true,
          "label" : "Opportunity Name",
          "layoutComponents" : [ {
            "apiName" : "Name",
            "componentType" : "Field",
            "label" : "Name"
          } ],
          "lookupIdApiName" : "Id",
          "required" : true,
          "sortable" : false
        },
...

Obtention de valeurs par défaut pour la création d'un enregistrement

Pour développer une interface utilisateur permettant aux utilisateurs de créer un enregistrement, vous avez besoin d'un formulaire modifiable avec des champs vides que l'utilisateur doit renseigner. Pour obtenir les informations permettant de créer ce formulaire, utilisez les ressources de création d'enregistrement par défaut.

GET /ui-api/record-defaults/create/{objectApiName}
La saga createDefaultsFetcher.js récupère les valeurs par défaut pour la création d'un enregistrement.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/create/' 
                + action.apiName + '?formFactor=Large';

Si le fonctionnement de l'API d'IU est couronné de succès, la saga distribue l'action receiveCreateDefaults(responseJson) qui contient la réponse JSON. Le reducer record.js intercepte l'action et l'utilise comme entrée pour mettre à jour l'état de Redux.

Passons à l'application Record Viewer et créons un enregistrement afin de pouvoir voir la réponse JSON à partir de l'appel à GET /ui-api/record-defaults/create/{objectApiName}.
  1. Dans le menu Créer un enregistrement, sélectionnez Compte.Un formulaire comportant des champs vides et modifiables pour la création d'un compte.
  2. Pour afficher la réponse JSON à partir de l'API de l’interface utilisateur, cliquez sur Show JSON.
Réponse JSON de la création d'enregistrement par défaut.
La réponse comprend les informations nécessaires pour que l'application puisse développer une interface utilisateur permettant aux utilisateurs de créer un enregistrement.
  • Comprend les métadonnées layout de l'objet en mode de création.
  • Comprend objectInfos (métadonnées d'objet) pour l'objet spécifié et tous les objets intégrés.
  • Comprend les valeurs null pour les champs record différents de Owner et OwnerId, qui sont renseignées par des valeurs pour l'utilisateur qui a effectué la requête.

Tout comme lorsque vous clonez un enregistrement, les mêmes fonctions /helpers/recordLayout.js analysent la réponse JSON pour créer un modèle de données internes pour les présentations. Pour déterminer les champs modifiables, getLayoutItemModel recherche tout élément de présentation où "editableForNew" : true. Pour déterminer quels champs nécessitent un traitement visuel dans l'IU afin d'indiquer qu'ils sont obligatoires, getLayoutItemModel recherche tous les éléments de présentation où "required" : true. Pour afficher ces propriétés, développez l'objet layout dans la réponse JSON de l'application Record Viewer.

Création ou clonage d'un enregistrement

Lorsqu'un utilisateur clique sur Enregistrer, l'application Record Viewer effectue une requête POST vers /ui-api/records pour effectuer l'enregistrement dans la base de données.
POST /ui-api/records

{
  "apiName": "Account",
  "fields": {
    "Name": "New Universal Containers"
  }
}

Toutes les valeurs de champ que vous envoyez sont fusionnées avec les valeurs de champ renvoyées par la ressource par défaut de l'enregistrement. Par exemple, le champ OwnerId est requis et peut être créé, mais vous n'avez pas à fournir une valeur car il existe dans la réponse par défaut de l'enregistrement.

Vous avez ouvert Workbench, alors allez-y et créez un compte appelé New Universal Containers. Rechargez l'application Record Viewer et cliquez sur New Universal Containers dans la liste des éléments récents. N'oubliez pas que vous pouvez également afficher le compte dans votre Trailhead Playground !