Construir IU para criar e clonar um registro

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Fazer uma solicitação à API de interface de usuário para obter valores padrão para clonar um registro.
  • Fazer uma solicitação à API de interface de usuário para obter valores padrão para criar um registro.
  • Fazer uma solicitação à API de interface de usuário para clonar ou criar um registro.

Obter valores padrão para clonar um registro

Para compor uma interface de usuário que permita a clonagem de registros, crie um formulário editável com valores pré-preenchidos a partir do registro clonado. Como exemplo, vamos clonar um registro no Lightning Experience.
  1. No Trailhead Playground, abra o aplicativo Vendas.
  2. Clique em Oportunidades.
  3. Selecione o modo de exibição de lista Todas as oportunidades.
  4. Clique para abrir uma oportunidade.
  5. Clique em Clonar.
Página inicial do registro Oportunidade no Lightning Experience.

O formulário no Lightning Experience contém valores pré-preenchidos a partir do registro clonado, como Nome da oportunidade, Nome da conta e Valor. Formulário para clonar Oportunidade no Lightning Experience

Clique em Cancelar ou Salvar. Não vamos usar a Oportunidade clonada, só queremos dar uma olhada na interface de usuário.

Para obter as informações usadas na criação desse formulário, use o recurso de clonar padrões de registro da API de UI.
GET /ui-api/record-defaults/clone/{recordId}
A saga cloneDefaultsFetcher.js recupera os valores padrão para criar um registro.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/clone/' 
                  + action.id + '?formFactor=' + action.context.formFactor;

Se a operação da API de UI for bem-sucedida, a saga envia a ação receiveCloneDefaults(responseJson) contendo a resposta JSON. O redutor record.js intercepta a ação e a usa como entrada para atualizar o estado Redux.

Vamos examinar o aplicativo Visualizador de registros e clonar o mesmo registro para ver a resposta JSON da chamada para GET /ui-api/record-defaults/clone/{recordId}.

  1. Recarregue o aplicativo Visualizador de registros e clique na oportunidade na lista Itens recentes.
  2. Quando o registro for carregado, clique em Clonar.
  3. Para ver a resposta JSON da API de interface de usuário, clique em Mostrar JSON.
  4. Para expandir um objeto JSON (como layout, objectInfos e record), clique nele.
Resposta JSON da clonagem de padrões de registro.
Vamos nos aprofundar um pouco na resposta. Ela é parecida com a resposta do recurso /ui-api/record-ui/{recordId}, mas o volume de trabalho menor.
  • Inclui metadados de layout para o objeto em modo de edição.
  • Inclui objectInfos (metadados de objeto) referentes ao objeto clonado e a todos os objetos aninhados. Por exemplo, se você clonar uma Oportunidade, a resposta inclui os metadados de objeto referentes ao objeto Oportunidade. Também inclui metadados de objeto referentes ao objeto Conta, porque a oportunidade faz referência a uma conta. E inclui ainda metadados de objeto referentes ao objeto Usuário, porque campos como OwnerId fazem referência a um usuário.
  • Inclui os dados padrão do registro a partir do registro a ser clonado, que podem ser usados para criar um registro.

As funções /helpers/recordLayout.js analisam a resposta JSON para criar o modelo de dados internos para os layouts. Para determinar quais campos são editáveis, getLayoutItemModel procura todo item de layout em que "editableForNew" : true. Para determinar quais campos precisam receber um tratamento visual na UI para indicar que são obrigatórios, getLayoutItemModel procura todo item de layout em que "required" : true. Para ver essas propriedades, expanda a seção layout da resposta de layout JSON no aplicativo Visualizador de registros.

"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
        },
...

Obter valores padrão para criar um registro

Para construir uma interface de usuário que permite aos usuários criarem um registro, é necessário um formulário editável com campos em branco para o usuário preencher. Para obter informações para criar esse formulário, use o recurso de criação de padrões de registro.

GET /ui-api/record-defaults/create/{objectApiName}
A saga createDefaultsFetcher.js recupera os valores padrão para criar um registro.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/create/' 
                + action.apiName + '?formFactor=Large';

Se a operação da API de UI for bem-sucedida, a saga envia a ação receiveCreateDefaults(responseJson) mantendo a resposta JSON. O redutor record.js intercepta a ação e a usa como entrada para atualizar o estado Redux.

Vamos analisar o aplicativo Visualizador de registros e criar um registro para vermos a resposta JSON da chamada para GET /ui-api/record-defaults/create/{objectApiName}.
  1. No menu Criar novo registro, selecione Conta.Um formulário com campos em branco e editáveis para criar uma conta.
  2. Para ver a resposta JSON da API de interface de usuário, clique em Mostrar JSON.
Resposta JSON da criação de padrões de registro.
A resposta inclui as informações necessárias para o aplicativo construir uma interface de usuário que permite aos usuários criarem um registro.
  • Inclui metadados de layout para o objeto no modo de criação.
  • Inclui objectInfos (metadados de objeto) para o objeto especificado e quaisquer objetos aninhados.
  • Inclui valores null para campos record diferentes de Proprietário e OwnerId, que são populados com valores para o usuário que fez a solicitação.

Tal como acontece quando se clona um registro, as mesmas funções /helpers/recordLayout.js analisam a resposta JSON para criar o modelo de dados internos para layouts. Para determinar quais campos são editáveis, getLayoutItemModel procura todo item de layout em que "editableForNew" : true. Para determinar quais campos precisam receber um tratamento visual na UI para indicar que são obrigatórios, getLayoutItemModel procura todo item de layout em que "required" : true. Para ver essas propriedades, expanda o objeto layout na resposta JSON no aplicativo Visualizador de registros.

Criar ou clonar um registro

Quando o usuário clica em Salvar, o aplicativo Visualizador de registros faz uma solicitação de POST para /ui-api/records a fim de confirmar o registro no banco de dados.
POST /ui-api/records

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

Todos os valores de campo que você enviar serão mesclados aos valores de campo retornados pelo recurso de padrões de registro. Por exemplo, o campo OwnerId é obrigatório e pode ser criado, mas não é preciso informar nenhum valor porque ele existe na resposta dos padrões de registro.

Como o Workbench já está aberto, crie uma conta chamada Novos contêineres universais. Recarregue o aplicativo Visualizador de registros e clique em Novos contêineres universais na lista Itens recentes. Não se esqueça, também é possível visualizar a conta em seu Trailhead Playground!

Recursos