Skip to main content

Utilizar Lightning Data Service para trabajar con datos

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

  • Cree soluciones que incluyen componentes base lightning-record-*-form.
  • Utilice adaptadores de red de Lightning Data Service (LDS) para leer datos.
  • Utilice funciones de LDS para modificar datos.
Nota

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Si esta es su primera incursión en componentes web Lightning, espere. Realice un paso atrás. Antes de trabajar en este módulo, asegúrese de completar el módulo Fundamentos de los componentes web Lightning y a ruta Aprender a trabajar con JavaScript aquí en Trailhead. El trabajo que haga aquí se construye sobre los conceptos y el trabajo que hace allí.

Trabajar con datos en componentes web Lightning

En componentes web Lightning, existen varias formas de trabajar con datos de Salesforce. Conocer qué solución utilizar para un caso de uso específico le permite redactar menos código, código más sencillo y código más sostenible. El uso de la mejor solución para cada situación también mejora el desempeño de sus componentes y aplicaciones.

En este módulo aprende cuándo y cómo utilizar diferentes soluciones. Revisamos las opciones más sencillas pero menos personalizables primero. Más adelante, consideramos las opciones más complejas y más personalizables.

Trabajar con datos utilizando Lightning Data Service

Lightning Data Service es la forma preferida (y más sencilla) de trabajar con datos de Salesforce. Con Lightning Data Service, los desarrolladores utilizan JavaScript para conectar componentes a datos de Salesforce.

Lightning Data Service también proporciona seguridad realizando llamadas de servidor para proteger extremos de API de interfaz de usuario. El uso de caché compartido del lado del cliente entre todos los componentes, Lightning Data Service maximiza el desempeño. Cuando se almacena un registro en caché, se recupera del almacenamiento de caché, eliminando llamadas innecesarias al servidor.

No dependa de recibir datos de un adaptador de red en un punto específico del ciclo de vida del componente. No siempre se puede acceder a los datos de un adaptador de red en los enlaces de ciclo de vida como connectedCallback() o renderedCallback(). Para obtener más información sobre el ciclo de vida de los datos de servicio de red, consulte Comprender el servicio de red.

Lightning Data Service mantiene los datos coherentes y actualizados entre múltiples componentes y clientes a lo largo del ciclo de vida de las aplicaciones. Si varios componentes utilizan Lightning Data Service para trabajar con un registro, y uno de ellos actualiza el registro, los otros componentes reflejan automáticamente esa actualización.

En las siguientes secciones, destacamos diferentes formas de trabajar con datos de Salesforce utilizando Lightning Data Service.

Leer o modificar datos con componentes base de formulario de registro

La forma más sencilla de trabajar con registros únicos en componentes web Lightning es utilizar los componentes lightning-record-*-form. Estos componentes base utilizan Lightning Data Service en segundo plano y heredan su funciones de caché y sincronización. Cada componente base le proporciona diferentes funciones y niveles de personalización.

  • El componente base lightning-record-form es el más sencillo. Con lightning-record-form, puede especificar un formato y permitir que los administradores configuren campos de formularios de forma declarativa. También puede especificar una lista ordenada de campos para definir de forma programática qué se muestra. lightning-record-form le permite ver y modificar registros.
  • El componente base lightning-record-view-form le permite ver registros.
  • El componente base lightning-record-edit-form le permite modificar registros.

Seleccione lightning-record-view-form o lightning-record-edit-form cuando necesite personalizar el formato de formulario, rellenar previamente valores de campo o cambiar cómo se representan datos de registro.

Este es un ejemplo que utiliza lightning-record-form para crear cuentas.

accountCreator.html

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

accountCreator.js

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

Aspectos destacados de código:

accountCreator.html 

  • Línea 3: Al usar lightning-record-form en el marcado, obtenemos todas las ventajas de seguridad y desempeño que proporciona Lightning Data Service. Cuando lightning-record-form no especifica un recordId, opera en modo edit y crea un registro en el envío.
  • Línea 4: La vinculación de la propiedad object-api-name indica el tipo de objeto que se va a cargar.
  • Línea 5: La vinculación de la propiedad fields indica los campos para mostrar en el formulario.
  • Línea 6: Establecemos handleSuccess como el controlador para el evento success.

accountCreator.js 

  • Línea 3 a 6: Al inicio del archivo, importamos referencias al objeto Cuenta y sus campos. La referencia a objetos y campos de este modo garantiza la integridad referencial. Salesforce verifica que el objeto y los campos existen, evita su eliminación y garantiza que estén incluidos en paquetes y conjuntos de cambios que hacen referencia al componente. La importación de referencias de objeto y campo garantiza que su código de componente aún funciona si se cambio el nombre del objeto o los campos.
  • Línea 10: Definimos el controlador de eventos handleSuccess para el evento success. handleSuccess se ejecuta cuando se realiza la operación de guardado con éxito.
  • Línea 11 a 17: Mostramos un mensaje emergente desencadenando ShowToastEvent, donde event.detail.id es una referencia a la propiedad id del registro recién creado.

Si necesita más personalización de la que proporcionan los componentes lightning-record-*-form, puede invocar Lightning Data Service directamente utilizando un adaptador de red o una función de JavaScript. 

Leer datos con adaptadores de red de LDS

Los adaptadores de red de LDS son otra forma de trabajar con datos de Salesforce. Utilice un adaptador de red para leer datos de Salesforce (registros) y metadatos (detalles de formato, campos en un objeto, etc). Para utilizarlos, decore una propiedad o función con @wire y especifique el adaptador de red.

Los adaptadores de red de LDS comprueban el almacenamiento de caché de LDS primero, y solicitan datos del servidor solo según sea necesario. Los adaptadores reaccionan para cambiar y actualizar datos en consecuencia. Por ejemplo, cuando el valor de parámetro cambia, u otros componentes modifican datos en el caché de Lightning Data Service, un adaptador proporciona los nuevos datos a la propiedad o función conectada.

Revisemos un ejemplo que utiliza el adaptador de red getRecord.

wireGetRecordProperty.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 WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
    get name() {
        return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD);
    }
}

Aspectos destacados de código:

  • Línea 2: Importamos el adaptador getRecord y la función getFieldValue.
  • Línea 3: Al igual que hicimos en el ejemplo de accountCreator, importamos una referencia al campo Account.Name. (En la línea 6, utilizamos esto para indicar al adaptador de red getRecord qué campos recuperar).
  • Línea 5: Cuando el componente wireGetRecordProperty se coloca en una página de registro, @api recordId permite al componente principal (FlexiPage) pasar el Id. del registro actual al componente.
  • Línea 6: Para conectar la propiedad de cuenta, aplicamos el decorador @wire y especificamos el adaptador de red para llamar (getRecord), así como los parámetros que necesita el adaptador (recordId y fields).
  • Línea 7: El adaptador de red proporciona una transmisión de valores a la propiedad account, que se establecerá varias veces. Si se recupera un registro, se almacena en account.data. Si la recuperación de registro falla, el error se almacena en account.error.
  • Línea 6 a 7: La primera vez que se asigna un valor a la propiedad recordId, el adaptador de red obtiene los datos del servidor y los almacena en el caché de LDS para un acceso futuro. Al pasar el parámetro recordId como una cadena con un prefijo $, hacemos que recordId sea reactivo. Cada vez que el valor de recordId cambia, el adaptador de red obtiene nuevos datos, ya sea desde el almacenamiento de caché o desde el servidor. Si otro componente modifica el registro almacenado en caché, el adaptador de red proporciona el nuevo valor del registro a la propiedad account.
  • Línea 8 a 10: se define un captador para la propiedad del nombre. La función getFieldValue proporciona acceso a los valores de campo de los datos devueltos.

En este ejemplo, la propiedad del nombre se puede recuperar en el archivo HTML de la siguiente manera:

wireGetRecordProperty.html

<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, lo almacenamos 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 objetoAccount 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 (Iniciador de aplicación), busque y abra Playground Starter y siga los pasos. Si no ve la aplicación Playground Starter, consulte Buscar el nombre de usuario y la contraseña de su Trailhead Playground en la Ayuda de Salesforce.

  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: Create Project (SFDX: Crear proyecto).
      Si no lo ve en la lista, escriba SFDX:Create Project (SFDX: Crear proyecto) y presione Enter (Intro).
    4. Acepte la plantilla estándar.
    5. Para le nombre de proyecto, ingrese workingWithDataInLWC y luego pulse Enter (Intro).
    6. Seleccione una ubicación para el nuevo proyecto y luego haga clic en Crear proyecto.
  1. 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 Enter (Intro).
    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.
  1. 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 Enter (Intro).
    3. Pulse Entrar de nuevo para aceptar el directorio predeterminado.
  1. 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.
  2. 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>
  3. Guarde los tres archivos: accountCreator.html, accountCreator.js y accountCreator.js-meta.xml.
  4. 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.
  5. Si su Trailhead Playground ya no está abierto, ábralo. (En la paleta de comandos, seleccione (o ingrese) SFDX: Abrir organización predeterminada.
  6. En su Trailhead Playground, haga clic en Configuración y luego seleccione Configuración.
  7. En el cuadro Quick Find box (Búsqueda rápida), ingrese Lightning App Builder (Generador de aplicaciones Lightning) y luego seleccione Lightning App Builder (Generador de aplicaciones Lightning).
  8. 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 Working with Data (Trabajo con los datos), y luego haga clic en Next (Siguiente).
    4. Para formato, seleccione Encabezado y Barra lateral izquierda.
    5. Haga clic en Listo.
  1. Arrastre el componente accountCreator a la barra lateral de la página.
  2. Guarde la página.
  3. Activar la página: Mantenga el nombre de aplicación predeterminado (Trabajo con los datos) y haga clic en Guardar.
  4. Cuando se solicite agregar la página al menú de navegación, haga clic en Finalizar.
  5. Abrir la nueva página: En la búsqueda de Iniciador de aplicación, ingrese work y luego seleccione Working with Data (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

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios