Comunicarse con componentes en una aplicaciĆ³n
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.
- Modifique el archivo
bearList.js
. - Agregue el siguiente cĆ³digo antes de
import { NavigationMixin } from 'lightning/navigation';
: 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. - Sustituya estas dos lĆneas...
- 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 conectadosearchBears
para que cada vez quesearchTerm
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 LightningBearListUpdate__c
con la lista de osos.
...por el siguiente cĆ³digo: Aspectos destacados del cĆ³digo: - Recuperamos el contexto de mensajes Lightning y lo guardamos en una propiedad
CĆ³mo crear el componente Bear Map (Mapa de osos)
- 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).
- Asignar el nombre
bearMap
al componente. - Modifique el archivo
bearMap.js-meta.xml
y reemplace<isExposed>false</isExposed>
por estas lĆneas. AsĆ podrĆ” ubicar su componente en cualquier tipo de pĆ”gina.
- Sustituya el contenido del componente
bearMap.html
por: Aspectos destacados del cĆ³digo:- Mostramos un componente de tarjeta que contiene un mapa.
- El mapa muestra elementos del conjunto
mapMarkers
.
- Sustituya el contenido del componente
bearMap.js
por: Aspectos destacados del cĆ³digo:- Implementamos dos funciones de enlace de ciclo de vida del componente:
connectedCallback
ydisconnectedCallback
. Se las llama automƔticamente cuando el componente se carga y descarga. Utilizamos estas dos funciones para suscribirnos a nuestro mensaje LightningBearListUpdate__c
personalizado y anular dicha suscripciĆ³n. - Apenas recibimos el mensaje
BearListUpdate__c
, se llama a la funciĆ³nhandleBearListUpdate
con la lista de registros Bear (Oso) filtrados.handleBearListUpdate
crea una lista de marcadores de mapa que pasan a la propiedadmapMarkers
y luego se muestran en nuestro componente Map (Mapa).
- Implementamos dos funciones de enlace de ciclo de vida del componente:
- 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.
- En su organizaciĆ³n, desde el Iniciador de aplicaciĆ³n (
), busque y seleccione Ursus Park.
- Haga clic en Setup (ConfiguraciĆ³n) (
) y seleccione Edit Page (Modificar pƔgina).
- En Custom Components (Componentes personalizados), busque el componente bearMap y arrƔstrelo a la esquina superior derecha de la pƔgina.
- 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!