Skip to main content
ƚnase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regƭstrese ahora.

Comunicarse con componentes en una aplicaciĆ³n

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.

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 (Iniciador de aplicaciĆ³n), busque y seleccione Ursus Park.
  2. Haga clic en Setup (ConfiguraciĆ³n) (Engranaje de 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.

Registros Bear (Oso) filtrados en Bear Map (Mapa 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!

Verificar paso

+100 puntos

CompletarĆ” esta/este proyecto en su propia organizaciĆ³n de prĆ”cticas. Haga clic en Iniciar para empezar a trabajar, o haga clic en el nombre de su organizaciĆ³n para seleccionar una diferente.

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