Trabajar con un único registro

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.

Lo que hará

Los guardaparques de Ursus Park necesitan su ayuda para rastrear osos que merodean en el parque. Ya ingresaron alguna información en Salesforce, pero necesitan que usted les ofrezca una experiencia de aplicación personalizada.

Cómo crear el componente bear location (ubicación del oso)

1. En VS Code, haga clic con el botón secundario en la carpeta lwc y, luego, en SFDX: Create Lightning Web Component (Crear componente web Lightning).
2. Asigne el nombre bearLocation al componente.
3. Modifique el archivo bearLocation.js-meta.xml y sustituya <isExposed>false</isExposed> por estas líneas.

   <isExposed>true</isExposed>
   <targets>
   	<target>lightning__RecordPage</target>
   </targets>
   <targetConfigs>
   	<targetConfig targets="lightning__RecordPage">
   		<objects>
   			<object>Bear__c</object>
   		</objects>
   	</targetConfig>
   </targetConfigs>

   Así, garantiza que su componente solo pueda ubicarse en páginas de registro Bear (Oso).
4. Reemplace el contenido bearLocation.html por el siguiente marcado.

   <template>
   	<lightning-card title={cardTitle} icon-name="standard:address">
   		<lightning-map map-markers={mapMarkers} zoom-level="12"></lightning-map>
   	</lightning-card>
   </template>

   Aspectos destacados del código:
   • Mostramos un componente de tarjeta con un título dinámico en función de la expresión cardTitle.
   • La tarjeta contiene un componente de mapa con marcadores definidos por mapMarkers.
5. Sustituya el contenido de bearLocation.js por el siguiente.

   import { LightningElement, api, wire } from 'lwc';
   import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
   // Set Bear object fields
   const NAME_FIELD = 'Bear__c.Name';
   const LOCATION_LATITUDE_FIELD = 'Bear__c.Location__Latitude__s';
   const LOCATION_LONGITUDE_FIELD = 'Bear__c.Location__Longitude__s';
   const bearFields = [
   	NAME_FIELD,
   	LOCATION_LATITUDE_FIELD,
   	LOCATION_LONGITUDE_FIELD
   ];
   export default class BearLocation extends LightningElement {
     @api recordId;
     name;
     mapMarkers = [];
     @wire(getRecord, { recordId: '$recordId', fields: bearFields })
     loadBear({ error, data }) {
       if (error) {
         // TODO: handle error
       } else if (data) {
         // Get Bear data
         this.name =  getFieldValue(data, NAME_FIELD);
         const Latitude = getFieldValue(data, LOCATION_LATITUDE_FIELD);
         const Longitude = getFieldValue(data, LOCATION_LONGITUDE_FIELD);
         // Transform bear data into map markers
         this.mapMarkers = [{
           location: { Latitude, Longitude },
           title: this.name,
           description: `Coords: ${Latitude}, ${Longitude}`
         }];
       }
     }
     get cardTitle() {
       return (this.name) ? `${this.name}'s location` : 'Bear location';
     }
   }

   Aspectos destacados del código:
   • Importamos un adaptador getRecord que nos permite utilizar Lightning Data Service para recuperar registros sin tener que redactar código Apex.
   • Importamos una función auxiliar getFieldValue para recuperar valores de campo.
   • Confeccionamos una lista de nombres de campo incluidos en el código fuente del objeto Bear__c en la constante bearFields. Tenga en cuenta que este enfoque no es compatible con la integridad referencial. La existencia del objeto y de los campos no se puede verificar en el tiempo de compilación. Esto significa que Bear__c o cualquiera de sus campos pueden eliminarse a pesar de que se utilicen en su código. Utilizamos otro enfoque que es compatible con la integridad referencial en nuestro siguiente componente.
   • La propiedad recordId decorada con @api automáticamente recibe el Id. de registro actual.
   • Utilizamos un decorador @wire en la función loadBear para recuperar datos y errores, y luego transferirlos a la función. @wire está configurado para llamar a la función del adaptador getRecord con algunos parámetros. Esos parámetros son el Id. de registro y la lista de campos de registro que queremos recuperar. Gracias al decorador @wire, se llama a loadBear automáticamente cuando se carga el componente o cuando cambia el Id. de registro.
   • En esta primera versión de nuestro componente no corregimos errores. Por ahora, omitiremos esa parte.
   • Si no hay ningún error, guardamos el nombre del oso y creamos un marcador de mapa con las coordenadas del oso.
6. Implemente el código actualizado en la organización. Haga clic con el botón secundario en la carpeta default (predeterminada) y, luego, en SDFX: Deploy Source to Org (Implementar fuente en organización).

Cómo agregar el componente Bear location (Ubicación del oso) a la página de registro Bear (Oso)

Ahora que implementamos nuestro componente, vamos a agregarlo a una página para verlo.

1. En su organización, vaya a la ficha Bears (Osos) y abra cualquier registro.
2. Haga clic en Setup (Configuración) () y seleccione Edit Page (Modificar página).
3. En Custom Components (Componentes personalizados), busque su componente bearLocation y arrástrelo a la parte superior de la columna de la derecha.
4. Haga clic en Save (Guardar).
5. Como esta es la primera vez que modificamos la página de registro Bear (Oso) estándar, debemos activar la página actualizada de modo que nuestros usuarios puedan ver lo que hicimos. Haga clic en Activate (Activar).
6. Haga clic en la ficha App Default (Predeterminado de la aplicación).
7. Haga clic en Assign as Org Default (Asignar como predeterminado de la aplicación).
8. Marque Ursus Park.
9. Haga clic en Next (Siguiente), Next (Siguiente) y en Save (Guardar).
10. Haga clic en Back (Atrás) para volver a la página de registro Bear (Oso) y revise su trabajo.

¡Bien hecho! Ahora podemos ver el oso en el mapa. Sigamos personalizando la página de registro Bear (Oso).

Cómo crear el componente Bear Supervisor (Supervisor del oso)

A cada guardaparque se le asigna la supervisión de determinados osos. Si ven a un oso haciendo algo indebido, los empleados del parque deben poder comunicarse rápidamente con el supervisor correspondiente. Para que esto sea posible, deberá agregar una tarjeta Bear Supervisor (Supervisor del oso) en la página de registro Bear (Oso).

1. En VS Code, haga clic con el botón secundario en la carpeta lwc y, luego, en SFDX: Create Lightning Web Component (Crear componente web Lightning).
2. Asigne el nombre bearSupervisor al componente.
3. Modifique el archivo bearSupervisor.js-meta.xml y sustituya <isExposed>false</isExposed> por estas líneas.

   <isExposed>true</isExposed>
   <targets>
   	<target>lightning__RecordPage</target>
   </targets>
   <targetConfigs>
   	<targetConfig targets="lightning__RecordPage">
   		<objects>
   			<object>Bear__c</object>
   		</objects>
   	</targetConfig>
   </targetConfigs>

   Así, podrá ubicar su componente en las páginas de registro Bear (Oso).
4. Sustituya el contenido de bearSupervisor.html por:

   <template>
   	<lightning-card title="Supervisor" icon-name="standard:people">
   		<div class="slds-var-m-around_medium">
   			<!-- Show supervisor when bear is loaded -->
   			<template if:true={bear.data}>
   				<lightning-record-form
   					object-api-name="Contact"
   					record-id={supervisorId}
   					layout-type="Compact">
   				</lightning-record-form>
   			</template>
   			<!-- Data failed to load -->
   			<template if:true={bear.error}>
   				<div class="slds-text-color_error">
   					An error occurred while loading the bear record
   				</div>
   			</template>
   		</div>
   	</lightning-card>
   </template>

   Aspectos destacados del código:
   • Utilizamos una directiva if:true para renderizar de manera condicional al supervisor una vez que se hayan cargado los datos del oso.
   • Mostramos una vista compacta del registro del supervisor (Contacto) con lightning-record-form.
   • Utilizamos una directiva if:true y la propiedad error para renderizar de manera condicional un mensaje de error si no podemos cargar el registro Bear (Oso).
5. Sustituya el contenido de bearSupervisor.js por:

   import { LightningElement, api, wire } from 'lwc';
   import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
   // Import Bear object fields
   import SUPERVISOR_FIELD from '@salesforce/schema/Bear__c.Supervisor__c';
   const bearFields = [SUPERVISOR_FIELD];
   export default class BearSupervisor extends LightningElement {
   	@api recordId; // Bear Id
   	@wire(getRecord, { recordId: '$recordId', fields: bearFields })
     bear;
   	get supervisorId() {
   		return getFieldValue(this.bear.data, SUPERVISOR_FIELD);
   	}
   }

   Aspectos destacados del código:
   • Importamos el campo Bear__c.Supervisor__c mediante la importación de un esquema, en lugar de usar una cadena fijada en el código fuente como hicimos anteriormente en el componente Bear Location (Ubicación del oso). El mayor beneficio de este enfoque es que garantiza la integridad referencial.
   • Recuperamos el registro Bear (Oso) con el decorador @wire y el adaptador getRecord.
   • Exponemos una expresión supervisorId. La expresión utiliza la función getFieldValue para recuperar el valor del campo de supervisor.
6. Implemente el código actualizado en la organización. Haga clic con el botón secundario en la carpeta default (predeterminada) y, luego, en SDFX: Deploy Source to Org (Implementar fuente en organización).

Cómo agregar el componente Bear Supervisor (Supervisor del oso) a la página de registro Bear (Oso)

Vamos a agregar nuestro nuevo componente a la página de registro Bear (Oso).

1. En su organización, vaya a una página de registro Bear (Oso); para ello, haga clic en la ficha Bears (Osos) y, luego, en cualquier oso. Desde la página de registro Bear, haga clic en Setup (Configuración) () y seleccione Edit Page (Modificar página).
2. En Custom Components (Componentes personalizados), busque el componente bearSupervisor y arrástrelo debajo del componente bearLocation.
3. Haga clic en Save (Guardar) y, luego, en Back (Atrás) para volver a la página de registro y revisar su trabajo.

Así finaliza este paso. Vimos cómo los componentes web Lightning pueden gestionar registros únicos con el adaptador @wire. Ahora, veamos las listas de registros.