Usar o Lightning Data Service para trabalhar com dados

<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={objectApiName}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
    get name() {
        return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD);
    }
}

<template>
  Account Name: {name}
</template>

wireGetRecordProperty é um exemplo de decoração de propriedade. Podemos decorar uma função da mesma forma. Isso é útil quando você deseja executar alguma lógica sobre os registros retornados. Aqui está o exemplo anterior (wireGetRecordProperty), retrabalhado para conectar uma função (wiredAccount) em vez de uma propriedade.

wireGetRecordFunction.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}) {
        console.log('Execute logic each time a new value is provisioned');
        if (data) {
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
    get name() {
        return getFieldValue(this.data, ACCOUNT_NAME_FIELD);
    }
}

Destaques do código:

• Linhas 8 a 9: Em vez de decorar uma propriedade, vamos decorar a função wiredAccount. A função recupera, como um parâmetro, um objeto que tem dois atributos: data e error. Usamos a desestruturação ES6 de objeto para descompactar os atributos do objeto.
• Linhas 11 a 17: Como os adaptadores de conexão do LDS não provisionam um único valor, mas sim um fluxo de valores, a função wiredAccount pode ser invocada várias vezes. Como resultado, a função conectada deve redefinir os estados que ela influencia. Então, aqui, nas linhas 11 a 17, se o adaptador de conexão provisiona novos dados, armazenamos esses dados na propriedade data e definimos a propriedade error como indefinida. Como alternativa, se houver um erro, armazenamos o erro na propriedade error e definimos a propriedade data como indefinida.

Neste exemplo, podemos acessar a propriedade name da mesma forma que a acessamos no exemplo anterior.

Modificar dados com funções do LDS

Os adaptadores de conexão do LDS são ótimos para ler dados, mas para criar, atualizar ou excluir registros, você precisa de uma função do LDS. Observe que, embora os adaptadores de conexão sejam invocados pelo mecanismo dos componentes Web do Lightning, as funções são invocadas imperativamente. As funções do LDS notificam o cache do LDS quando registros são criados, atualizados ou excluídos. Considere este exemplo, que usa a função do LDS createRecord para criar um registro de conta.

ldsCreateRecord.js

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: {
                [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME'
            }
        };
        createRecord(recordInput)
            .then(account => {
                // code to execute if create operation is successful
            })
            .catch(error => {
                // code to execute if create operation is not successful
            });
    }
}

Destaques do código:

• Linha 2: importamos a função do LDS createRecord.
• Linhas 3 a 4: importamos o objeto Account e o campo Account.Name (como fizemos nos exemplos anteriores) para garantir a integridade referencial.
• Linha 6: definimos o método handleButtonClick como um manipulador de eventos. Ele responde ao evento que ocorre quando um usuário clica em um lightning-button no arquivo .html (não mostrado). Quando handleButtonClick é invocado, ele invoca a função CreateRecord imperativamente.
• Linha 10: nosso manipulador de eventos transmite uma string para o campo Account.Name, necessário para o adaptador criar uma nova conta.
• Linha 13: quando invocamos uma função do LDS imperativamente, ela retorna uma promessa (um objeto do JavaScript que simplifica a execução de chamadas assíncronas).
• Linhas 14 a 16: no método then, definimos o que acontece se a conta for criada com sucesso.
• Linhas 17 a 19: no método catch, definimos o que acontece se a criação da conta falhar.

Nota:  as funções do LDS permitem que você trabalhe somente com registros individuais. Embora você possa usar várias funções no mesmo componente (para criar dois tipos diferentes de registros na mesma operação, por exemplo), cada função é executada em sua própria transação independente. Portanto, não há lógica de reversão comum. Se você precisar que uma operação DML combinada seja transacional, cogite usar o Apex.

Para saber mais sobre os adaptadores e funções de conexão do LDS e como usá-los, visite o Guia do desenvolvedor de componentes Web do Lightning e o blog de desenvolvedores do Salesforce.

Implantar um componente Web do Lightning que cria contas

Agora que analisamos diferentes maneiras de trabalhar com o Lightning Data Service, vamos trabalhar em um exemplo.

Antes de começar

Presumimos que você tem seu ambiente de desenvolvimento Salesforce DX configurado, e se sente confortável em usá-lo para criar componentes Web do Lightning e implantá-los em uma organização. Se você ainda não está familiarizado com esse processo, conclua o projeto Início rápido: Componentes Web do Lightning.

Criar um novo Trailhead Playground

Para este projeto, é preciso criar um novo Trailhead Playground. Role até a parte inferior desta página, clique na seta para baixo ao lado de Iniciar e selecione Criar um Trailhead Playground. Normalmente, leva de 3 a 4 minutos para criar um novo Trailhead Playground.

Nota:  sim, estamos falando de um Trailhead Playground totalmente novo! Se você estiver usando uma organização ou um playground existente, poderá ter problemas na hora de concluir os desafios.

Obtenha seu nome de usuário e senha para o Trailhead Playground

Vá ao seu Trailhead Playground. (Caso não esteja aberto, role até o fim desta página e clique em Iniciar.) Se você vir uma guia na sua organização com o rótulo Obter suas credenciais de login, ótimo! Avance para a etapa 1. 

Caso contrário, no App Launcher (Iniciador de aplicativos) (), encontre e abra o Playground Starter e siga as etapas. Se não vir o aplicativo Playground Starter, consulte Encontrar o nome de usuário e a senha para seu Trailhead Playground na Ajuda do Trailhead.

1. Clique na guia Obter suas credenciais de login e anote seu nome de usuário.
2. Clique em Redefinir minha senha. Isso envia um email para o endereço associado ao seu nome de usuário.
3. Clique no link exibido no email.
4. Insira uma nova senha, confirme-a e clique em Alterar senha.

Pronto para pôr a mão na massa? Vamos lá.

Neste exercício, você adiciona um componente Web do Lightning ao seu projeto e o implanta em seu Trailhead Playground. 

1. Crie um novo projeto:
   1. Abra o Visual Studio Code.
   2. Abra a paleta de comandos: clique em Visualizar | Paleta de comandos.
   3. Na paleta de comandos, selecione SFDX: Criar projeto.
      Se não vir na lista, digite SFDX:Create Project (SFDX:Criar projeto) e pressione Enter.
   4. Aceite o modelo padrão.
   5. Como nome do projeto, insira workingWithDataInLWC e pressione Enter.
   6. Selecione um local para o novo projeto e clique em Criar projeto.
2. Autorize seu Trailhead Playground:
   1. Na paleta de comandos, selecione (ou insira) SFDX: Autorizar uma organização.
   2. Selecione Produção: login.salesforce.com e pressione Enter.
   3. Em alias, insira lwc_and_salesforce_data e, em seguida, pressione Enter.
   4. Use o nome de usuário e a senha do Trailhead Playground para entrar.
   5. Quando você tiver feito login em seu Trailhead Playground, deixe-o aberto e volte para o Visual Studio Code.
3. Crie um componente Web do Lightning:
   1. No painel do Explorer, clique com o botão direito na pasta lwc e selecione SFDX: Criar componente Web do Lightning.
   2. Como nome do componente, insira accountCreator e pressione Enter.
   3. Pressione Enter novamente para aceitar o diretório padrão.
4. Substitua o conteúdo de seus arquivos accountCreator.html e accountCreator.js pelo código fornecido na seção Ler ou modificar dados com componentes básicos do formulário de registro, mostrada anteriormente nesta unidade.
5. Para disponibilizar esse componente nas páginas do aplicativo em uma organização, substitua o conteúdo do seu arquivo accountCreator.js-meta.xml por este código:
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>48.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
   </LightningComponentBundle>

6. Salve os três arquivos: accountCreator.html, accountCreator.js e accountCreator.js-meta.xml.
7. Implante os arquivos de projeto em seu Trailhead Playground. (Clique com o botão direito do mouse no diretório accountCreator e selecione SFDX: Implantar fonte para organização.)
8. Se o Trailhead Playground não estiver aberto, abra-o. (Na paleta de comandos, selecione (ou insira) SFDX: Abrir organização padrão).
9. Em seu Trailhead Playground, clique em e, em seguida, selecione Setup (Configuração).
10. Na caixa Busca rápida, insira Criador de aplicativo Lightning e selecione Criador de aplicativo Lightning.
11. Crie uma página do Lightning:
    1. Clique em Novo.
    2. Selecione Página de aplicativo e clique em Avançar.
    3. Em Rótulo, insira Working with Data e, então, clique em Avançar.
    4. Como layout, escolha Cabeçalho e barra lateral esquerda.
    5. Clique em Concluir.
12. Arraste o componente accountCreator para a barra lateral da página.
13. Salve a página.
14. Ative a página: Mantenha o nome do aplicativo padrão (“Working with Data”) e clique em Salvar.
15. Quando for solicitado que você adicione a página ao menu de navegação, clique em Concluir.
16. Abra a nova página: Na pesquisa do Iniciador de aplicativos, insira work e selecione Working with Data.

Pronto. Você tem um componente Web do Lightning que usa lightning-record-form para criar registros de conta na página Working with Data. Usar o Lightning Data Service é uma maneira de trabalhar com os dados do Salesforce nos componentes Web do Lightning. Na próxima unidade, você aprenderá como usar o Apex para trabalhar com dados.

Recursos

• Guia do desenvolvedor de Componentes Web do Lightning: Lightning Data Service
• Guia do desenvolvedor de Componentes Web do Lightning: Trabalhar com registros usando componentes básicos
• Guia do desenvolvedor de Componentes Web do Lightning: Usar o serviço de conexão para obter dados
• Blog: Armazenamento em cache e sincronização de dados do componente com o Lightning Data Service