Comunicarse con componentes en una aplicación

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 actualizar el componente Bear List (Lista de osos)

Los guardaparques tienen una última solicitud para usted. Quisieran localizar a los osos en un mapa al filtrar la lista de osos. Usted debe crear un componente Bear Map (Mapa de osos) y modificar la lista de osos de modo que envíe eventos al mapa. Comencemos por actualizar nuestra lista de osos.

1. Modifique el archivo bearList.js.
2. Agregue el siguiente código antes de import { NavigationMixin } from 'lightning/navigation';:

   import { publish, MessageContext } from 'lightning/messageService';
   import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';

   La primera importación aporta utilidades desde el Servicio de mensajes Lightning (LMS). Este servicio le permite publicar mensajes en todos los componentes del mismo nivel de una página Lightning mediante un canal de mensajes Lightning.
   La segunda importación es el canal de mensajes Lightning que se incluyó en el proyecto base que recuperamos de GitHub.
3. Sustituya estas dos líneas...

   @wire(searchBears, {searchTerm: '$searchTerm'})
   bears;

   ...por el siguiente código:

   bears;
   @wire(MessageContext) messageContext;
   @wire(searchBears, {searchTerm: '$searchTerm'})
   loadBears(result) {
     this.bears = result;
     if (result.data) {
       const message = {
         bears: result.data
       };
       publish(this.messageContext, BEAR_LIST_UPDATE_MESSAGE, message);
     }
   }

   Aspectos destacados del código:
   • Recuperamos el contexto de mensajes Lightning y lo guardamos en una propiedad messageContext.
   • Utilizamos una función conectada para capturar datos entrantes de la lista de osos y activar un mensaje Lightning BearListUpdate__c personalizado con la lista de registros Bear (Oso).
   • Especificamos searchTerm como parámetro dinámico a nuestro adaptador conectado searchBears para que cada vez que searchTerm cambie, loadBears se vuelva a ejecutar y se active un nuevo mensaje con los nuevos resultados de búsqueda.
   • Utilizamos la función publish que importamos de LMS para activar un mensaje Lightning BearListUpdate__c con la lista de osos.

Cómo crear el componente Bear Map (Mapa 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. Asignar el nombre bearMap al componente.
3. Modifique el archivo bearMap.js-meta.xml y reemplace <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.
   
4. Sustituya el contenido del componente bearMap.html por:

   <template>
   	<article class="slds-card">
   		<lightning-map
   			map-markers={mapMarkers}
   			zoom-level="11"
   			markers-title="Bears">
   		</lightning-map>
   	</article>
   </template>

   Aspectos destacados del código:
   • Mostramos un componente de tarjeta que contiene un mapa.
   • El mapa muestra elementos del conjunto mapMarkers.
5. Sustituya el contenido del componente bearMap.js por:

   import { LightningElement, wire } from 'lwc';
   import { subscribe, unsubscribe, MessageContext } from 'lightning/messageService';
   import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';
   export default class BearMap extends LightningElement {
     mapMarkers = [];
     subscription = null;
     @wire(MessageContext)
     messageContext;
     connectedCallback() {
       // Subscribe to BearListUpdate__c message
       this.subscription = subscribe(
           this.messageContext,
           BEAR_LIST_UPDATE_MESSAGE,
           (message) => {
               this.handleBearListUpdate(message);
           });
     }
     disconnectedCallback() {
       // Unsubscribe from BearListUpdate__c message
       unsubscribe(this.subscription);
       this.subscription = null;
     }
     handleBearListUpdate(message) {
       this.mapMarkers = message.bears.map(bear => {
         const Latitude = bear.Location__Latitude__s;
         const Longitude = bear.Location__Longitude__s;
         return {
           location: { Latitude, Longitude },
           title: bear.Name,
           description: `Coords: ${Latitude}, ${Longitude}`,
           icon: 'utility:animal_and_nature'
         };
       });
     }
   }

   Aspectos destacados del código:
   • Implementamos dos funciones de enlace de ciclo de vida del componente: connectedCallback y disconnectedCallback. Se las llama automáticamente cuando el componente se carga y descarga. Utilizamos estas dos funciones para suscribirnos a nuestro mensaje Lightning BearListUpdate__c personalizado y anular dicha suscripción.
   • Apenas recibimos el mensaje BearListUpdate__c, se llama a la función handleBearListUpdate con la lista de registros Bear (Oso) filtrados. handleBearListUpdate crea una lista de marcadores de mapa que pasan a la propiedad mapMarkers y luego se muestran en nuestro componente Map (Mapa).
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 SFDX: Deploy Source to Org (Implementar fuente en organización).

Cómo agregar el componente Bear Map (Mapa 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 bearMap y arrástrelo a la esquina superior derecha de la página.
4. Haga clic en Save (Guardar) y en Back (Atrás) para volver a la página de inicio y revisar que el mapa se actualice cuando filtre la lista de osos.

Resumen del proyecto

¡Misión cumplida! Los guardaparques ahora pueden rastrear osos fácilmente gracias a usted.

Utilizó todos los conceptos principales de los componentes web Lightning en este proyecto: enlace de datos, expresiones, renderización condicional, Apex imperativo y Apex conectado, composición de componentes y eventos intercomponente.

Aproveche este conocimiento y cree sus propias aplicaciones flexibles con componentes web Lightning. ¡Buena programación!