Trabajar con listas de registros

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.

Cómo crear el componente Bear List (Lista de osos)

Los guardaparques quieren ver el directorio de osos directamente desde la página de inicio. Se le asignó la tarea de implementar esa lista de osos.

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 bearList al componente.
3. Modifique el archivo bearList.js-meta.xml y sustituya <isExposed>false</isExposed> por estas líneas.

   <isExposed>true</isExposed>
   <targets>
   	<target>lightning__AppPage</target>
   	<target>lightning__RecordPage</target>
   	<target>lightning__HomePage</target>
   </targets>

   Así podrá ubicar su componente en cualquier tipo de página en el Generador de aplicación Lightning.
4. Sustituya el contenido de bearList.html por:

   <template>
   	<lightning-card title="Bears" icon-name="utility:animal_and_nature">
   		<div class="slds-card__body slds-card__body_inner">
   			<!-- Start bear list -->
   			<template if:true={bears}>
   				<lightning-layout multiple-rows="true" pull-to-boundary="small">
   					<template for:each={bears} for:item="bear">
   						<lightning-layout-item key={bear.Id} size="3" class="slds-var-p-around_x-small">
   							<!-- Start bear tile -->
   							<lightning-card title={bear.Name} class="bear-tile">
   								<div class="slds-var-p-horizontal_small bear-tile-body">
   									<div class="slds-media">
   										<div class="slds-media__figure">
   											<img src={appResources.bearSilhouette} alt="Bear profile" class="bear-silhouette"/>
   										</div>
   										<div class="slds-media__body">
   											<p class="slds-var-m-bottom_xx-small">{bear.Sex__c}</p>
   											<p class="slds-var-m-bottom_xx-small">{bear.Age__c} years old</p>
   											<p class="slds-var-m-bottom_xx-small">{bear.Height__c} cm</p>
   											<p class="slds-var-m-bottom_xx-small">{bear.Weight__c} Kg</p>
   										</div>
   									</div>
   								</div>
   							</lightning-card>
   							<!-- End bear tile -->
   						</lightning-layout-item>
   					</template>
   				</lightning-layout>
   			</template>
   			<!-- End bear list -->
   			<!-- Data failed to load -->
   			<template if:true={error}>
   				<div class="slds-text-color_error">
   					An error occurred while loading the bear list
   				</div>
   			</template>
   		</div>
   	</lightning-card>
   </template>

   Aspectos destacados del código:
   • La etiqueta template (plantilla) con las directivas for:each y for:item se utiliza para iterar los registros bears (osos). Cada elemento de iteración se transfiere a la propiedad bear.
   • Cada iteración de la plantilla se marca con un atributo key (clave) especial. key debe tener un valor único en el contexto de la iteración. Este es el Id. de cada oso en nuestro componente.
5. Sustituya el contenido de bearList.js por:

   import { LightningElement } from 'lwc';
   import ursusResources from '@salesforce/resourceUrl/ursus_park';
   /** BearController.getAllBears() Apex method */
   import getAllBears from '@salesforce/apex/BearController.getAllBears';
   export default class BearList extends LightningElement {
   	bears;
   	error;
   	appResources = {
   		bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`,
   	};
   	connectedCallback() {
   		this.loadBears();
   	}
   	loadBears() {
   		getAllBears()
   			.then(result => {
   				this.bears = result;
   			})
   			.catch(error => {
   				this.error = error;
   			});
   	}
   }

   Aspectos destacados del código:
   • Importamos el adaptador ursusResources, que nos da acceso a un recurso estático asociado a nuestra aplicación. Utilizamos este adaptador para crear un objeto appResources que expone la dirección URL de imagen con la silueta de un oso en la plantilla.
   • Importamos el adaptador getAllBears, que nos permite interactuar con el método Apex BearController.getAllBears(). La clase BearController se agrupa en el código que implementó al comienzo de este proyecto. El método getAllBears muestra el resultado de una consulta que recupera todos los registros Bear (Oso).
   • Implementamos la función connectedCallback, que nos permite ejecutar el código después de cargar el componente. Utilizamos esta función para llamar a la función loadBears.
   • La función loadBears llama al adaptador getAllBears. El adaptador llama a nuestro código Apex y muestra una promesa de JS. Utilizamos la promesa para guardar los datos obtenidos en la propiedad bears o para reportar errores. La recuperación de datos con este método se denomina Apex imperativo.
6. Cree un nuevo archivo bearList.css en el directorio bearList y pegue el siguiente código en el archivo.

   .bear-tile {
   	display: block;
   	border: 1px solid #d2955d;
   	border-radius: .25rem;
   	background-color: #fae8d2;
   }
   .bear-silhouette {
   	height: 100px;
   }

   Estas reglas de CSS agregan bordes a nuestras tarjetas de osos y establecen la altura de la imagen con la silueta de un oso.
7. Implemente el código actualizado en la organización. Haga clic con el botón secundario en la carpeta default (predeterminada) y, luego, en SFDX: Deploy Source to Org (Implementar fuente en organización).

Cómo agregar el componente Bear List (Lista de osos) a la página de inicio de la aplicación

Vamos a agregar el nuevo componente a la página de inicio de la aplicación.

1. En su organización, desde el Iniciador de aplicación (), busque y seleccione Ursus Park.
2. Haga clic en Setup (Configuración) () y seleccione Edit Page (Modificar página).
3. En Custom Components (Componentes personalizados), busque el componente bearList y arrástrelo a la esquina superior izquierda de la página.
4. Haga clic en Save (Guardar) y luego en Back (Atrás) para volver a la página de inicio y revisar su trabajo.

Utilizar Apex conectado

Ahora, vamos a explorar una nueva forma de recuperar la lista de osos. Utilizaremos Apex conectado en lugar de Apex imperativo.

1. Modifique bearList.html y reemplace <template if:true={bears}> por <template if:true={bears.data}>.
2. Reemplace <template for:each={bears} for:item="bear"> por <template for:each={bears.data} for:item="bear">.
3. Reemplace <template if:true={error}> por <template if:true={bears.error}>. En este punto, la plantilla es casi igual a la de Apex imperativo. Ahora accedemos a la lista de osos mediante una llamada a bears.data en lugar de solo a bears y también recuperamos errores con bears.error en lugar de solo con error.
4. Sustituya el contenido de bearList.js por:

   import { LightningElement, wire } from 'lwc';
   import ursusResources from '@salesforce/resourceUrl/ursus_park';
   /** BearController.getAllBears() Apex method */
   import getAllBears from '@salesforce/apex/BearController.getAllBears';
   export default class BearList extends LightningElement {
   	@wire(getAllBears) bears;
   	appResources = {
   		bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`,
   	};
   }

   Simplificamos significativamente el código JS al decorar nuestra propiedad bears con Apex conectado. Toda la información que necesitamos ahora proviene de esta única línea: @wire(getAllBears) bears;
5. Implemente el código actualizado en la organización y observe que se comporta de la misma forma que con Apex imperativo.

Especificar parámetros en las llamadas de Apex

La cantidad de habitantes en Ursus Park está aumentando. Los guardaparques desean poder filtrar la lista de osos para buscarlos rápidamente. Agreguemos una barra de búsqueda a nuestra lista de osos para ayudarlos.

1. Modifique bearList.html y agregue el siguiente código después de la etiqueta <template if:true={bears.data}>.

   <lightning-input type="search"
   	onchange={handleSearchTermChange}
   	variant="label-hidden"
   	class="slds-var-m-bottom_small"
   	label="Search"
   	placeholder="Search for bears"
   	value={searchTerm}>
   </lightning-input>

   Se agregará un campo de entrada de búsqueda. Cuando el valor cambia, llamamos a la función handleSearchTermChange.
2. Agregue el siguiente código tras la etiqueta de cierre </lightning-layout>.

   <!-- No bears found -->
   <template if:false={hasResults}>
   	<div class="slds-align_absolute-center slds-var-m-vertical_small">
   		This is beary disturbing, we did not find results...
   	</div>
   </template>

   Se agregará un mensaje que indica que no se encontraron resultados. Este mensaje solo se muestra cuando la expresión hasResults es falsa.
3. Sustituya el contenido de bearList.js por:

   import { LightningElement, wire } from 'lwc';
   import ursusResources from '@salesforce/resourceUrl/ursus_park';
   /** BearController.searchBears(searchTerm) Apex method */
   import searchBears from '@salesforce/apex/BearController.searchBears';
   export default class BearList extends LightningElement {
   	searchTerm = '';
   	@wire(searchBears, {searchTerm: '$searchTerm'})
   	bears;
   	appResources = {
   		bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`,
   	};
   	handleSearchTermChange(event) {
   		// Debouncing this method: do not update the reactive property as
   		// long as this function is being called within a delay of 300 ms.
   		// This is to avoid a very large number of Apex method calls.
   		window.clearTimeout(this.delayTimeout);
   		const searchTerm = event.target.value;
   		// eslint-disable-next-line @lwc/lwc/no-async-operation
   		this.delayTimeout = setTimeout(() => {
   			this.searchTerm = searchTerm;
   		}, 300);
   	}
   	get hasResults() {
   		return (this.bears.data.length > 0);
   	}
   }

   Aspectos destacados del código:
   • Agregamos una propiedad reactiva searchTerm y la especificamos como un parámetro de nuestra llamada de Apex conectado en searchBears.
   • La función handleSearchTermChange se utiliza para reaccionar a cambios en el valor del campo de entrada de búsqueda. Introducimos intencionalmente una demora de 300 milisegundos cuando actualizamos la propiedad reactiva searchTerm. Si una actualización está pendiente, la cancelamos y volvemos a programar una nueva en 300 ms. Esta demora reduce la cantidad de llamadas de Apex cuando el usuario está escribiendo las letras para formar una palabra. Cada nueva letra desencadena una llamada a handleSearchTermChange, pero, idealmente, solo se llama a searchBears cuando el usuario termina de escribir. Esta técnica se denomina debouncing.
   • Exponemos la expresión hasResults para comprobar si nuestra búsqueda nos muestra osos.
4. Implemente el código actualizado en la organización y compruebe que la búsqueda funcione con o sin resultados.

Así finaliza este paso. Vimos cómo gestionar listas de registros con Apex imperativo y luego con Apex conectado, y aprendimos cómo especificar parámetros en nuestras llamadas de Apex. El código de nuestro componente creció de manera significativa en el proceso, así que, ahora, vamos a dividirlo en subcomponentes para que sea más fácil de mantener.