Skip to main content
ƚnase a nosotros en TDX, en San Francisco, o en Salesforce+ los dƭas 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

ComunicaciĆ³n entre elemento secundario y principal

Objetivos de aprendizaje

En este proyecto, alcanzarĆ” los siguientes objetivos:

  • Crear componentes web Lightning que se comuniquen entre ellos.
  • Gestionar la comunicaciĆ³n desde un componente secundario hasta su componente principal.
  • Gestionar la comunicaciĆ³n desde un componente principal hasta un componente secundario.
  • Gestionar la comunicaciĆ³n desde un componente hasta un componente no relacionado.
Nota

Nota

ĀæSu idioma de aprendizaje es espaƱol? Comience el reto en un Trailhead Playground en espaƱol y utilice las traducciones proporcionadas entre parĆ©ntesis para navegar. Copie y pegue solo los valores en inglĆ©s, ya que las validaciones del reto se basan en los datos en inglĆ©s. Si no aprueba el reto en su organizaciĆ³n en espaƱol, le recomendamos que (1) cambie la configuraciĆ³n regional a Estados Unidos, (2) cambie el idioma a inglĆ©s, siga las instrucciones descritas aquĆ­ y, a continuaciĆ³n, (3) vuelva a hacer clic en el botĆ³n Check Challenge (Comprobar el reto).

Consulte la insignia Trailhead en su idioma para obtener mĆ”s informaciĆ³n sobre cĆ³mo aprovechar la experiencia de Trailhead en otros idiomas.

Este proyecto estĆ” pensado para desarrolladores de Salesforce que tengan algo de experiencia con la creaciĆ³n de componentes web Lightning. Si todavĆ­a no domina mucho los componentes web Lightning, le recomendamos completar algunas de las insignias de la ruta Crear componentes web Lightning antes de seguir con este proyecto.

CĆ³mo se comunican los componentes

Cuando varios componentes web Lightning conforman una aplicaciĆ³n, lo habitual es querer que compartan informaciĆ³n entre ellos. La forma en que se comunican los componentes depende de si se relacionan y cĆ³mo lo hacen. Cuando hay un componente dentro de otro, se genera una relaciĆ³n principal-secundario. La comunicaciĆ³n desde un principal a un secundario es distinta de la comunicaciĆ³n desde un secundario a un principal. Y estos tipos de comunicaciĆ³n son distintas a la que se establece entre los componentes no relacionados (componentes en Ć”rboles secundarios de DOM diferentes).

Tipos de comunicaciĆ³n: componentes no relacionados, de componente secundario a principal y de componente principal a secundario.

En este proyecto, vamos a establecer comunicaciones entre componentes que tienen cada uno de estos tipos de relaciĆ³n. 

Antes de comenzar

Se presupone que tiene configurado un entorno de desarrollo de Salesforce DX tiene experiencia utilizĆ”ndolo para desarrollar componentes web Lightning e implementarlos en una organizaciĆ³n. Si todavĆ­a no estĆ” familiarizado con este proceso, complete el proyecto Inicio rĆ”pido: Lightning Web Components antes de continuar con el proyecto.

Crear un nuevo Trailhead Playground

En este proyecto, tendrĆ” que crear un nuevo Trailhead Playground. DesplĆ”cese hasta el final de la pĆ”gina, haga clic en el nombre del Playground y haga clic en Create a Trailhead Playground (Crear un Trailhead Playground). La creaciĆ³n de un nuevo Trailhead Playground suele tardar entre 3 y 4 minutos. 

Nota

SĆ­, Ā”realmente queremos decir un Trailhead Playground completamente nuevo! Si estĆ” utilizando una organizaciĆ³n o playground existente, pueden surgir problemas a la hora de completar los retos.

Obtener el nombre de usuario y la contraseƱa de su Trailhead Playground

Vamos a empezar. Vaya a su Trailhead Playground. Si no estĆ” abierto, desplĆ”cese hasta la parte inferior de esta pĆ”gina y haga clic en Launch (Iniciar). Si ve una ficha en su organizaciĆ³n etiquetada como Obtener sus credenciales de inicio de sesiĆ³n, Ā”excelente! Vaya al primer paso. De lo contrario, en App Launcher (Iniciador de aplicaciĆ³n), busque y abra Playground Starter y siga los pasos.

  1. Haga clic en la ficha Get Your Login Credentials (Obtener sus credenciales de inicio de sesiĆ³n) y anote su nombre de usuario.
  2. Haga clic en Reset My Password (Restablecer mi contraseƱa). Con esta acciĆ³n se envĆ­a un correo electrĆ³nico a la direcciĆ³n asociada a su nombre de usuario.
  3. Haga clic en el vĆ­nculo en el correo electrĆ³nico.
  4. Introduzca una nueva contraseƱa, confƭrmela y haga clic en Change Password (Cambiar contraseƱa).

Configurar el proyecto

  1. En Visual Studio Code, cree un proyecto de Salesforce DX con el nombre Event Comms.
  2. Autorice su Trailhead Playground.

Comunicarse con un evento personalizado

Vamos a empezar con un escenario sencillo. Un componente secundario envĆ­a un evento personalizado que desencadena una actualizaciĆ³n en el componente principal.

Un componente secundario llamado "controls" estĆ” incluido dentro de un componente principal, el componente "numerator", con el que se comunica en sentido ascendente.

Cuando se envĆ­a un evento, puede elegir entre enviar datos y permitir que el evento aparezca por el DOM. Vamos a empezar con un escenario sencillo. Un componente secundario envĆ­a un evento personalizado que desencadena una actualizaciĆ³n en el componente principal.

ComunicaciĆ³n desde el componente "controls" hasta el componente "numerator"

  1. Cree una pĆ”gina de aplicaciĆ³n Lightning de tres regiones con el nombre Event Comms
    1. En su organizaciĆ³n (su Trailhead Playground), abra Setup (ConfiguraciĆ³n).
    2. En el cuadro Quick Find (BĆŗsqueda rĆ”pida), escriba Lightning App Builder y, a continuaciĆ³n, seleccione Lightning App Builder.
    3. Haga clic en New (Nuevo).
    4. Con App Page (PĆ”gina de aplicaciĆ³n) seleccionado, haga clic en Next (Siguiente).
    5. En Label (Etiqueta), escriba Event Comms y haga clic en Next (Siguiente).
    6. Seleccione Three Regions (Tres regiones) y luego haga clic en Done (Listo).
    7. Haga clic en Save (Guardar), Activate (Activar), Save (Guardar) y Skip and Save (Omitir y guardar).
    8. Haga clic en Back (AtrĆ”s) para salir de Lightning App Builder.
  1. Cree el componente web Lightning principal con el nombre numerator.
    1. En Visual Studio Code, en force-app/main/default, haga clic con el botĆ³n derecho en la carpeta lwc y seleccione SFDX: Create Lightning Web Component (Crear un componente web Lightning).
    2. Escriba numerator como nombre del componente nuevo.
    3. Pulse Enter (Intro) y luego vuelva a pulsar Enter (Intro) para aceptar la carpeta predeterminada force-app/main/default/lwc.
  1. Codifique los archivos del componente "numerator":
    1. En numerator.js, pegue este cĆ³digo dentro de la clase Numerador (Numerador):
        counter = 0;
        handleIncrement() {
          this.counter++;
        }
        handleDecrement() {
          this.counter--;
        }
    2. Guarde el archivo.
    3. Abra numerator.html y agregue este cĆ³digo entre las etiquetas template:
        <lightning-card title="Numerator" icon-name="action:manage_perm_sets">   
          <p class="slds-text-align_center slds-var-m-vertical_medium">
            Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
          </p>
          <!-- controls go here -->
        </lightning-card>
    4. Guarde el archivo.
    5. Para que el componente "numerator" estĆ© disponible en pĆ”ginas de aplicaciĆ³n Lightning, abra numerator.js-meta.xml y sustituya la etiqueta isExposed por estas lĆ­neas:
          <isExposed>true</isExposed>
          <targets>
            <target>lightning__AppPage</target>
          </targets>
    6. Guarde el archivo.
  1. Agregue el componente "numerator" a la aplicaciĆ³n Event Comms:
    1. Haga clic con el botĆ³n derecho en la carpeta lwc y seleccione SFDX: Deploy This Source to Org (SFDX: Implementar este cĆ³digo fuente en la organizaciĆ³n) para implementar la carpeta lwc en la organizaciĆ³n.
    2. Desde App Launcher (Iniciador de aplicaciĆ³n, Iniciador de aplicaciĆ³n) en su Playground, busque y abra Event Comms.
    3. Haga clic en Setup (ConfiguraciĆ³n) y seleccione Edit Page (Modificar pĆ”gina) para abrir la pĆ”gina de la aplicaciĆ³n Event Comms para editarla.
    4. Arrastre el componente numerator (en Custom [Personalizados] en la lista de componentes) a la regiĆ³n izquierda de la pĆ”gina.
    5. Haga clic en Save (Guardar).
    6. Haga clic en Back (AtrĆ”s) para salir de Lightning App Builder.
  1. Cree y codifique el componente secundario con el nombre controls:
    1. Vuelva a Visual Studio Code y cree un componente web Lightning con el nombre controls.
    2. En controls.js, pegue este cĆ³digo dentro de la clase Controls (Controles):
        handleAdd() {
          this.dispatchEvent(new CustomEvent('add'));
        }
        handleSubtract() {
          this.dispatchEvent(new CustomEvent('subtract'));
        }
    3. Guarde el archivo.
    4. Abra controls.html y agregue este cĆ³digo entre las etiquetas template:
        <lightning-card title="Controls" icon-name="action:upload">
          <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small">
              <lightning-button
                label="Subtract"
                icon-name="utility:dash"
                onclick={handleSubtract}>
              </lightning-button>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small">
              <!-- buttons go here -->
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small">
              <lightning-button
                label="Add"
                icon-name="utility:add"
                onclick={handleAdd}
                icon-position="right">
              </lightning-button>
            </lightning-layout-item>
          </lightning-layout>
        </lightning-card>
    5. Guarde el archivo.
  1. Agregue el componente secundario (controls) al componente principal (numerator):
    1. Abra numerator.html y sustituya el comentario controls go here (aquĆ­ van los controles) por el siguiente cĆ³digo:
          <c-controls
            class="slds-show slds-is-relative"
            onadd={handleIncrement}
            onsubtract={handleDecrement}>
          </c-controls>
    2. Guarde el archivo.
  1. Verifique las comunicaciones:
    1. Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms en su organizaciĆ³n de Trailhead Playground.
    2. Haga clic en Add (Sumar) y observe cĆ³mo aumenta el recuento.
    3. Haga clic en Substract (Restar) y observe cĆ³mo disminuye el recuento.

Ahora tenemos un componente secundario (controls) que enviar un evento add (sumar) al componente principal (numerator), desencadenando asĆ­ la funciĆ³n handleIncrement en el componente principal (numerator).

Diagrama que se corresponde con la descripciĆ³n anterior.

Enviar datos con el evento personalizado

Ahora vamos a hacer que el componente secundario envĆ­e datos con el evento al componente principal. La empresa quiere multiplicar el recuento. Vamos a ofrecerle mĆ”s de una opciĆ³n. Una opciĆ³n es usar un evento personalizado para enviar datos del secundario al principal.

  1. Agregue botones de multiplicaciĆ³n y una funciĆ³n de multiplicaciĆ³n al componente secundario (controls):
    1. Abra controls.html y sustituya el comentario buttons go here (aquĆ­ van los botones) dentro de la segunda etiqueta lightning-layout-item por el siguiente cĆ³digo:
            <lightning-button
              label="2"
              data-factor="2"
              icon-name="utility:close"
              onclick={handleMultiply}>
            </lightning-button>
            <lightning-button
              label="3"
              data-factor="3"
              icon-name="utility:close"
              onclick={handleMultiply}>
            </lightning-button>
    2. Guarde el archivo.
    3. Abra controls.js y agregue esta funciĆ³n handleMultiply despuĆ©s de la funciĆ³n handleSubstract:
        handleMultiply(event) {
          const factor = event.target.dataset.factor;
          this.dispatchEvent(new CustomEvent('multiply', {
            detail: factor
          }));
        }
      FĆ­jese en que enviamos el evento onclick a la funciĆ³n handleMultiply y esta envĆ­a el valor de data-factor del botĆ³n a event.target.dataset.factor. DespuĆ©s enviamos el valor de factor junto con el nuevo evento personalizado (multiply) al componente principal (numerator).
    4. Guarde el archivo.
  1. Actualice el componente principal (numerator):
    1. Abra numerator.html y agregue este atributo a la etiqueta c-controls:
      onmultiply={handleMultiply}
    2. Guarde el archivo.
    3. Abra numerator.js y agregue esta funciĆ³n handleMultiply despuĆ©s de la funciĆ³n handleDecrement:
        handleMultiply(event) {
          const factor = event.detail;
          this.counter *= factor;
        }
      AquĆ­, la funciĆ³n handleMultiply obtiene el evento onmultiply enviado y utiliza sus datos (event.detail) para actualizar el recuento (counter).
    4. Guarde el archivo.
  1. Verifique las comunicaciones:
    1. Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la aplicaciĆ³n Event Comms.
    2. Haga clic en Add (Sumar) y observe cĆ³mo aumenta el recuento.
    3. Haga clic en X 2 y observe cĆ³mo se multiplica el recuento por dos.
    4. Haga clic en X 3 y observe cĆ³mo se multiplica el recuento por tres.

El componente "controls" envĆ­a datos (data-factor) a su componente principal (numerator) junto el evento personalizado multiply.

Diagrama que se corresponde con la descripciĆ³n anterior.

Permitir que aparezcan eventos personalizados

Los dos botones de multiplicaciĆ³n han sido todo un Ć©xito. Ahora la empresa quiere mĆ”s opciones para multiplicar. Vamos a hacer que sea fĆ”cil agregar todos los botones que quieran. Vamos a agregar otro componente web Lightning para los botones. Para permitir las comunicaciones, vamos a usar la opciĆ³n de propagaciĆ³n de eventos. La propagaciĆ³n permite que el evento personalizado del componente de botĆ³n se propague al Ć”rbol de DOM.

  1. Cree un componente con el nombre button (botĆ³n):
    1. Cree un componente web Lightning con el nombre button (botĆ³n).
    2. En button.js, pegue este cĆ³digo dentro de la clase Button (BotĆ³n):
        @api label;
        @api icon;
        handleButton(event) {
          this.dispatchEvent(new CustomEvent('buttonclick',{
            // bubbles: true
          }));
        }
    3. Importe el decorador api desde el mĆ³dulo lwc.
      import { LightningElement, api } from 'lwc';
    4. Guarde el archivo.
    5. Abra button.html y agregue este cĆ³digo entre las etiquetas template:
        <lightning-button
          label={label}
          data-factor={label}
          icon-name={icon}
          onclick={handleButton}>
        </lightning-button>
    6. Guarde el archivo.
  1. Convierta el componente "button" en un componente secundario del componente "controls":
    1. Abra controls.html y elimine el lightning-layout-item que contiene dos etiquetas lightning-button.
    2. En su lugar, pegue el siguiente cĆ³digo:
          <lightning-layout-item flexibility="auto" padding="around-small" onbuttonclick={handleMultiply}>
            <template for:each={factors} for:item="factor">
              <c-button
                key={factor}
                label={factor}
                data-factor={factor}
                icon="utility:close">
              </c-button>
            </template>
          </lightning-layout-item>
      Observe que hemos trasladado la llamada a la funciĆ³n handleMultiply al controlador onbuttonclick en lightning-layout-item. Esto nos permite ahorrarnos tener que agregar un controlador en todos los botones, por lo que se genera un cĆ³digo mĆ”s limpio de forma mĆ”s rĆ”pida.
    3. Guarde el archivo.
    4. Abra controls.js y agregue esta propiedad factors en la clase Controls (Controles):
        factors = [0,2,3,4,5,6];
    5. Guarde el archivo.
  1. Verifique las comunicaciones:
    1. Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
    2. Haga clic en Add (Sumar) y observe cĆ³mo aumenta el recuento.
    3. Haga clic en X 2 y verĆ” que no ocurre nada. ĀæPor quĆ©? De forma predeterminada, un evento personalizado no se propaga pasando por el host.

      [Texto alternativo: Evento personalizado que no pasa por su contenedor.]
      Para que el evento (buttonclick) se propague a lightning-layout-item, tenemos que agregar bubbles:true en CustomEvent.
    4. Abra button.js y quite el comentario (elimine las barras // de delante) bubbles:true.

      [Texto alternativo:: Ahora, el evento personalizado se propaga pasando por su contenedor.]
    5. Guarde el archivo y vuelva a llevar a cabo la implementaciĆ³n.
    6. Actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
Nota

Es posible que tenga que actualizar la pƔgina un par de veces para obtener los cambios desde la memoria cachƩ y empezar a trabajar en la pƔgina.

    1. Ahora haga clic en Add (Sumar) para definir el recuento en 1.
    2. Haga clic en X 2 y observe cĆ³mo se multiplica el recuento por dos.
    3. Haga clic en X 6 y observe cĆ³mo se multiplica el recuento por seis.
    4. Haga clic en X 0 y observe se restablece el recuento en cero.
    5. Pruebe con los siguientes clics: Add (Sumar), X 2, X 5, X 2, Add (Sumar), X 2. O bien: Add (Sumar), X 3, X 2, X 2, Subtract (Restar), X 2, Subtract (Restar), X 2. TambiĆ©n puede probar con otra combinaciĆ³n.

PĆ³ngase a prueba (es opcional, no vamos a revisar el cĆ³digo)

Agregue una segunda instancia del componente "button" (botĆ³n) en el componente "controls" (controles) para crear botones de divisiĆ³n que aparezcan en el componente "numerator".

Resumen

En este paso, ha establecido la comunicaciĆ³n desde un componente secundario a su principal mediante un evento personalizado. Ha enviado el evento con y sin datos, y ha visto cĆ³mo afecta la propagaciĆ³n a las comunicaciones de componente secundario a componente principal. En el siguiente paso, vamos a centrarnos en las comunicaciones de componente principal a secundario.

Recursos

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 otro diferente.

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantarĆ­a conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

MĆ”s informaciĆ³n Continuar para compartir comentarios