Utilizar Lightning Data Service para trabajar con datos

<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 es un ejemplo de decoración de una propiedad. Podemos decorar una función del mismo modo. Esto es útil cuando desea ejecutar cierta lógica en los registros devueltos. Este es el ejemplo anterior (wireGetRecordProperty), adaptado para conectar una función (wiredAccount) en vez de una propiedad.

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);
    }
}

Aspectos destacados de código:

• Línea 8 a 9: En vez de decorar una propiedad, decoramos la función wiredAccount. La función recibe, como un parámetro, un objeto que tiene dos atributos: data (datos) y error. Utilizamos desestructuración ES6 de objeto para desarrollar los atributos del objeto.
• Línea 11 a 17: Como los adaptadores de red de LDS proporcionan no solo un valor único, sino una serie de valores, la función wiredAccount se puede invocar varias veces. Como resultado, una función conectada debe restablecer estados en los que influye. De modo que aquí, en las líneas 11 a 17, si el adaptador de red proporciona nuevos datos, almacenamos los datos en la propiedad data y establecemos la propiedad error como no definido. DE forma alternativa, si existe un error, almacenamos el error en la propiedad error y establecemos la propiedad data como no definido.

En este ejemplo, podemos acceder a la propiedad name (nombre) de la misma manera en la que accedimos en el ejemplo anterior.

Modificar datos con funciones de LDS

Los adaptadores de red de LDS son perfectos para leer datos, pero para crear, actualizar o eliminar registros, necesitamos una función de LDS. Tenga en cuenta que mientras que los adaptadores de red se invocan por el motor Componentes web Lightning, invoca funciones de forma imperativa. Las funciones de LDS notifican el caché de LDS cuando se crean, se actualizan o se eliminan registros. Considere este ejemplo, que utiliza la función de LDS createRecord para crear un registro de cuenta.

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
            });
    }
}

Aspectos destacados de código:

• Línea 2: Importamos la función de LDS createRecord.
• Línea 3 a 4: Importamos el objeto Account y el campo Account.Name (como hicimos en los ejemplos anteriores) para garantizar la integridad referencial.
• Línea 6: Definimos el método handleButtonClick como un controlador de eventos. Responde al evento que se produce cuando un usuario hace clic en un lightning-button en el archivo .html (no mostrado). Cuando se invoca handleButtonClick, invoca la función createRecord de forma imperativa.
• Línea 10: Nuestro controlador de eventos pasa una cadena para el campo Account.Name, que el adaptador necesita crear una nueva cuenta.
• Línea 13: Cuando invocamos una función de LDS de forma imperativa, devuelve un compromiso (un objeto JavaScript que simplifica la realización de llamadas asíncronas).
• Línea 14 a 16: En el método then, definimos qué sucede si se crea la cuenta con éxito.
• Línea 17 a 19: En el método catch, definimos qué sucede si la creación de la cuenta falla.

Nota:  Las funciones de LDS le permiten trabajar únicamente con registros únicos. Aunque puede utilizar varias funciones en el mismo componente (para crear dos tipos diferentes de registros en la misma operación, por ejemplo), cada función se ejecuta en su propia transacción independiente. Por lo tanto, no hay lógica de reversión común. Si necesita que una operación DML combinada sea transaccional, considere el uso de Apex.

Para obtener más información acerca de funciones y adaptadores de red de LDS, y cómo utilizarlos, visite la Guía del desarrollador de componentes web Lightning y el Blog de desarrolladores de Salesforce.

Desarrollar un componente web Lightning que crea cuentas

Ahora que revisamos diferentes formas de trabajar con Lightning Data Service, trabajemos en un ejemplo.

Antes de comenzar

Suponemos que su entorno de desarrollo de Salesforce DX está configurado y está cómodo utilizándolo para crear componentes web Lightning e implementarlos en una organización. Si no está familiarizado todavía con este proceso, complete el proyecto Inicio rápido: Componentes Web Lightning.

Crear un nuevo Trailhead Playground

Para este proyecto, debe crear un nuevo Trailhead Playground. Desplácese al final de esta página, haga clic en la flecha hacia abajo junto a Iniciar y seleccione Crear un Trailhead Playground. Crear un nuevo Trailhead Playground tarda normalmente entre 3 y 4 minutos.

Nota:  Sí, ¡realmente queremos decir un Trailhead Playground completamente nuevo! Si está utilizando una organización o playground existente, pueden surgir problemas para completar los retos.

Obtener su nombre de usuario y contraseña de Trailhead Playground

Vaya a su Trailhead Playground. (Si aún no está abierto, desplácese a la parte inferior de esta página y haga clic en Iniciar.) Si ve una ficha en su organización etiquetada como Obtener sus credenciales de inicio de sesión, ¡excelente! Salte el paso 1. 

De lo contrario, desde el Iniciador de aplicación (), busque y abra Playground Starter y siga los pasos. Si no ve la aplicación Playground Starter, consulte Encontrar el nombre de usuario y la contraseña de su Trailhead Playground en la Ayuda de Trailhead.

1. Haga clic en la ficha Obtener sus credenciales de inicio de sesión y anote su nombre de usuario.
2. Haga clic en Restablecer mi contraseña. Esta acción envía un email a la dirección asociada con su nombre de usuario.
3. Haga clic en el vínculo en el email.
4. Ingrese una nueva contraseña, confírmela y haga clic en Cambiar contraseña.

¿Está listo para la práctica? ¡Vamos a ello!

En este ejercicio, agrega un componente web Lightning a su proyecto y luego impleméntelo en su Trailhead Playground. 

1. Crear un nuevo objeto:
   1. Abra Visual Studio Code.
   2. Abrir la paleta de comandos: Haga clic en Ver | Paleta de comandos.
   3. En la paleta de comandos, seleccione SFDX: Crear proyecto.
      Si no lo ve en la lista, escriba SFDX:Create Project (SFDX: Crear proyecto) y presione Intro.
   4. Acepte la plantilla estándar.
   5. Para le nombre de proyecto, ingrese workingWithDataInLWC y luego pulse Entrar.
   6. Seleccione una ubicación para el nuevo proyecto y luego haga clic en Crear proyecto.
2. Autorizar su Trailhead Playground:
   1. En la paleta de comandos, seleccione (o ingrese) SFDX: Autorizar una organización.
   2. Seleccione Producción: login.salesforce.com y pulse Entrar.
   3. Para alias, ingrese lwc_and_salesforce_data y luego pulse Entrar.
   4. Utilice su nombre de usuario y contraseña de Trailhead Playground para iniciar sesión.
   5. Cuando inicie sesión en su Trailhead Playground, déjelo abierto y vuelva a Visual Studio Code.
3. Crear un componente web Lightning:
   1. En el panel Explorador, haga clic con el botón derecho en la carpeta lwc y seleccione SFDX: Crear componente web Lightning.
   2. Para el nombre de componente, ingrese accountCreator y pulse Entrar.
   3. Pulse Entrar de nuevo para aceptar el directorio predeterminado.
4. Sustituya los contenidos de sus archivos accountCreator.html y accountCreator.js con el código proporcionado en la sección Leer o modificar datos con componentes base de formulario de registro anteriormente en esta unidad.
5. Para hacer que este componente esté disponible en páginas de aplicación en una organización, sustituya los contenidos de su archivo accountCreator.js-meta.xml con 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. Guarde los tres archivos: accountCreator.html, accountCreator.js y accountCreator.js-meta.xml.
7. Implemente los archivos de proyecto en su Trailhead Playground. (Haga clic con el botón derecho en la carpeta accountCreator y seleccione SFDX: Implementar fuente en organización.
8. Si su Trailhead Playground ya no está abierto, ábralo. (En la paleta de comandos, seleccione (o ingrese) SFDX: Abrir organización predeterminada.
9. En su Trailhead Playground, haga clic en y luego seleccione Configuración.
10. En el cuadro Búsqueda rápida, ingrese Generador de aplicaciones Lightning y luego seleccione Generador de aplicaciones Lightning.
11. Crear una página Lightning:
    1. Haga clic en Nuevo.
    2. Seleccione Página de aplicación y haga clic en Siguiente.
    3. Para etiqueta, ingrese Trabajo con los datos, y luego haga clic en Siguiente.
    4. Para formato, seleccione Encabezado y Barra lateral izquierda.
    5. Haga clic en Finalizar.
12. Arrastre el componente accountCreator a la barra lateral de la página.
13. Guarde la página.
14. Activar la página: Mantenga el nombre de aplicación predeterminado (Trabajo con los datos) y haga clic en Guardar.
15. Cuando se solicite agregar la página al menú de navegación, haga clic en Finalizar.
16. Abrir la nueva página: En la búsqueda de Iniciador de aplicación, ingrese work, y luego seleccione Trabajo con los datos.

Eso es todo. Tiene un componente web Lightning que utiliza lightning-record-form para crear registros de cuenta en la página Trabajo con los datos. El uso de Lightning Data Service es una forma de trabajar con datos de Salesforce en componentes web Lightning. En la siguiente unidad, obtendrá información acerca de cómo utilizar Apex para trabajar con datos.

Recursos

• Guía del desarrollador de componentes web Lightning: Lightning Data Service
• Guía del desarrollador de componentes web Lightning: Trabajar con registros utilizando componentes base
• Guía del desarrollador de componentes web Lightning: Utilizar el servicio de red para obtener datos
• Blog: Almacenamiento en caché y sincronización de datos de componentes con Lightning Data Service