Empiece a realizar un seguimiento de su progreso
Inicio de Trailhead
Inicio de Trailhead

Construir una interfaz de usuario para crear y duplicar un registro

Objetivos de aprendizaje

Después de completar esta unidad, podrá:
  • Realizar una solicitud a la API de la interfaz de usuario para obtener todos los valores predeterminados para duplicar un registro.
  • Realizar una solicitud a la API de la interfaz de usuario para obtener todos los valores predeterminados para crear un registro.
  • Realizar una solicitud a la API de la interfaz de usuario para duplicar o crear un registro.

Obtener los valores predeterminados para duplicar un registro

Para construir una interfaz de usuario que permita a los usuarios duplicar un registro, cree un formulario modificable con valores rellenados previamente procedentes del registro duplicado. Para ver un ejemplo, dupliquemos un registro en Lightning Experience.
  1. En su Trailhead Playground, abra la aplicación Ventas.
  2. Haga clic en Oportunidades.
  3. Desde la vista de lista Todas las oportunidades.
  4. Haga clic para abrir una oportunidad.
  5. Haga clic en Duplicar.
Página principal del registro Oportunidad en Lightning Experience.

El formulario en Lightning Experience incluye valores rellenados previamente procedentes del registro duplicado, como Nombre de oportunidad, Nombre de cuenta e Importe. Formulario duplicado de Oportunidad en Lightning Experience

Haga clic en Cancelar o Guardar. No utilizaremos la oportunidad duplicada, solo queríamos ver la interfaz de usuario.

Para obtener la información para construir este formulario, utilizaremos el recurso duplicado con los valores predeterminados del registro de la API de la interfaz de usuario.
GET /ui-api/record-defaults/clone/{recordId}
La saga de cloneDefaultsFetcher.js recupera los valores predeterminados para crear un registro.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/clone/' 
                  + action.id + '?formFactor=' + action.context.formFactor;

Si la operación de la API de la interfaz de usuario es correcta, la saga despacha la acción receiveCloneDefaults(responseJson) que aloja la respuesta JSON. El reductor de record.js intercepta la acción y la utiliza como una entrada para actualizar el estado Redux.

Pasemos a la aplicación Record Viewer y dupliquemos el mismo registro de modo que veamos la respuesta JSON de la llamada GET /ui-api/record-defaults/clone/{recordId}.

  1. Vuelva a cargar la aplicación Record Viewer y haga clic en la oportunidad en la Lista de elementos recientes.
  2. Cuando se cargue el registro, haga clic en Duplicar.
  3. Para ver la respuesta JSON desde la API de la interfaz de usuario, haga clic en Show JSON (Mostrar JSON).
  4. Para expandir un objeto JSON (como layout, objectInfos y record), haga clic en él.
Respuesta JSON procedente de los valores predeterminados de duplicación de un registro.
Echemos un vistazo de alto nivel a la respuesta. Es parecida a una respuesta procedente del recurso /ui-api/record-ui/{recordId}, pero la carga es menor.
  • Incluye metadatos layout para el objeto en modo de modificación.
  • Incluye objectInfos (metadatos de objeto) para el objeto duplicado y cualquier objeto anidado. Por ejemplo, si duplica una oportunidad, la respuesta incluye metadatos de objeto para el objeto Oportunidad. También incluye metadatos de objeto para el objeto Cuenta, porque la oportunidad hace referencia a una cuenta. También incluye metadatos de objeto para el objeto Usuario, porque los campos como OwnerId hacen referencia a un usuario.
  • Incluye los datos de record predeterminados procedentes del registro que está duplicando para que pueda utilizarlos para crear un registro.

Las funciones de /helpers/recordLayout.js analizan la respuesta JSON para construir el modelo de datos interno para los formatos. Para determinar qué campos son modificables, getLayoutItemModel busca cualquier elemento de formato donde "editableForNew" : true. Para determinar qué campos necesitan un tratamiento visual en la interfaz de usuario para indicar si se requieren, getLayoutItemModel busca cualquier elemento de formato donde "required" : true. Para ver estas propiedades, amplíe la sección layout de la respuesta del formato JSON en la aplicación 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
        },
...

Obtener los valores predeterminados para crear un registro

Para construir una interfaz de usuario que permita a los usuarios crear un registro, necesita un formulario modificable con campos vacíos para que los usuarios los rellenen. Para obtener información para construir este formulario, utilice los valores predeterminados de un registro para crear recursos.

GET /ui-api/record-defaults/create/{objectApiName}
La saga de createDefaultsFetcher.js recupera los valores predeterminados para crear un registro.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/create/' 
                + action.apiName + '?formFactor=Large';

Si la operación de la API de la interfaz de usuario es correcta, la saga despacha la acción receiveCreateDefaults(responseJson) que aloja la respuesta JSON. El reductor de record.js intercepta la acción y la utiliza como una entrada para actualizar el estado Redux.

Pasemos a la aplicación Record Viewer y creemos un registro de modo que veamos la respuesta JSON de la llamada GET /ui-api/record-defaults/create/{objectApiName}.
  1. Desde el menú Create New Record (Crear nuevo registro, seleccione Account (Cuenta).Un formulario con campos modificables vacíos para crear una cuenta.
  2. Para ver la respuesta JSON desde la API de la interfaz de usuario, haga clic en Show JSON (Mostrar JSON).
Respuesta JSON procedente de los valores predeterminados de creación de un registro.
La respuesta incluye la información necesaria para que la aplicación construya una interfaz de usuario que permita a los usuarios crear un registro.
  • Incluye metadatos layout para el objeto en modo de creación.
  • Incluye objectInfos (metadatos de objeto) para el objeto especificado y cualquier objeto anidado.
  • Incluye valores null para campos record que no sean Owner y OwnerId, que se rellenan con valores para el usuario que realizó la solicitud.

Del mismo modo que cuando está duplicando un registro, las mismas funciones de /helpers/recordLayout.js analizan la respuesta JSON para construir el modelo de datos interno para los formatos. Para determinar qué campos son modificables, getLayoutItemModel busca cualquier elemento de formato donde "editableForNew" : true. Para determinar qué campos necesitan un tratamiento visual en la interfaz de usuario para indicar si se requieren, getLayoutItemModel busca cualquier elemento de formato donde "required" : true. Para ver estas propiedades, amplíe el objeto layout en la respuesta JSON en la aplicación Record Viewer.

Crear o duplicar un registro

Cuando un usuario hace clic en Guardar, la aplicación Record Viewer realiza una solicitud POST a /ui-api/records para enviar el registro a la base de datos.
POST /ui-api/records

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

Cualquier valor de campo que envíe se combina con los valores de los campos que el recurso con los valores predeterminados del registro devolvió. Por ejemplo, el campo OwnerId es requerido y creable, pero no tiene que proporcionar un valor porque ya existe en la respuesta con los valores predeterminados del registro.

Tiene Workbench abierto, así que cree una cuenta llamada Nuevos contenedores universales. Vuelva a cargar la aplicación Record Viewer y haga clic en Nuevos contenedores universales en la Lista de elementos recientes. No lo olvide, ¡también puede ver la cuenta en su Trailhead Playground!