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 del elemento secundario al principal

Objetivos de aprendizaje

En este proyecto:

  • Creará componentes web Lightning que se comuniquen entre sí.
  • Se comunicará desde un componente secundario con su componente principal.
  • Se comunicará desde un componente principal con un componente secundario.
  • Se comunicará desde un componente con otro no relacionado.
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.

Este proyecto está diseñado para desarrolladores de Salesforce que cuentan con cierta experiencia en la creación de componentes web Lightning. Si aún no se familiarizó con los componentes web Lightning, le recomendamos completar algunas de las insignias de la ruta Crear componentes web Lightning antes de continuar con este proyecto.

Cómo se comunican los componentes

Cuando varios componentes web Lightning integran una aplicación, solemos desear que dichos componentes compartan información. La forma en que nos comunicamos de un componente a otro depende de si estos están relacionados y de qué manera. Un componente dentro de otro crea una relación principal-secundario. La forma en que un elemento principal se comunica con uno secundario es distinta de cómo un elemento secundario se comunica con su principal. Además, estas dos comunicaciones son diferentes de cómo se comunican entre sí los componentes no relacionados (componentes en distintos subárboles del DOM).

Tipos de comunicación: elemento secundario a principal, elemento principal a secundario y componentes no relacionados.

En este proyecto, debe establecer comunicaciones entre componentes de cada una de estas relaciones. 

Antes de comenzar

Suponemos que su entorno de desarrollo de Salesforce DX está configurado, y no tiene problemas en utilizarlo para crear componentes web Lightning e implementarlos en una organización. Si todavía no está familiarizado con este proceso, complete el proyecto Inicio rápido: Componentes web Lightning antes de continuar con este proyecto.

Crear un nuevo Trailhead Playground

Para este proyecto, deberá crear un nuevo Trailhead Playground. Desplácese a la parte inferior de esta página, haga clic en el nombre de la zona de pruebas y, luego, en Create a Trailhead Playground (Crear un Trailhead Playground). Normalmente lleva de 3 a 4 minutos crear un nuevo Trailhead Playground. 

Nota

Sí, ¡realmente queremos decir un Trailhead Playground completamente nuevo! Si está utilizando una organización o playground existente, pueden surgir problemas para completar los retos.

Obtener su nombre de usuario y contraseña de Trailhead Playground

Vamos a empezar. Vaya a su Trailhead Playground. Si aún no está abierto, desplácese a la parte inferior de esta página y haga clic en Launch (Iniciar). Si ve una ficha en su organización etiquetada como Get Your Login Credentials (Obtener sus credenciales de inicio de sesión), ¡excelente! Salte el paso 1. De lo contrario, desde el Iniciador de aplicación (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). Esta acción envía un email a la dirección asociada con su nombre de usuario.
  3. Haga clic en el vínculo en el email.
  4. Ingrese una nueva contraseña, confírmela y haga clic en Change Password (Cambiar contraseña).

Configurar su proyecto

  1. En Visual Studio Code, cree un proyecto de Salesforce DX llamado Event Comms (Comunicaciones de eventos).
  2. Autorice su Trailhead Playground.

Comunicarse con un evento personalizado

Comencemos con un escenario simple. Un componente secundario envía un evento personalizado que desencadena una actualización en el componente principal.

Un componente secundario llamado controls (controles) está contenido en su elemento principal, el componente numerator (numerador), y se comunica con este.

Cuando envía un evento, puede elegir enviar algunos datos y permitir que el evento se propague a través del DOM. Comencemos con un escenario simple. Un componente secundario envía un evento personalizado que desencadena una actualización en el componente principal.

Comunicarse desde el componente controls con el componente numerator

  1. Cree una página de la aplicación Lightning de tres regiones llamada Event Comms (Comunicaciones de eventos):
    1. En su organización (su Trailhead Playground), abra Setup (Configuración).
    2. En el cuadro Quick Find (Búsqueda rápida), ingrese Lightning App Builder (Generador de aplicaciones Lightning) y, luego, seleccione Lightning App Builder (Generador de aplicaciones Lightning).
    3. Haga clic en New (Nuevo).
    4. Con la opción App Page (Página de aplicación) seleccionada, haga clic en Next (Siguiente).
    5. En Label (Etiqueta), ingrese Event Comms (Comunicaciones de eventos) y, luego, haga clic en Next (Siguiente).
    6. Seleccione Three Regions (Tres regiones) y, a continuación, 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 Atrás para salir del Generador de aplicaciones Lightning.
  1. Cree el componente web Lightning principal denominado numerator:
    1. En Visual Studio Code, en el directorio force-app/main/default, haga clic derecho en la carpeta lwc y seleccione SFDX: Create Lightning Web Component (Crear componente web Lightning).
    2. Ingrese numerator como nombre para el nuevo componente.
    3. Presione Intro y, luego, Intro de nuevo para aceptar la ubicación predeterminada force-app/main/default/lwc.
  1. Codifique los archivos del componente numerator:
    1. En numerator.js, pegue el siguiente código en la clase Numerator:
        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 las páginas de la aplicación Lightning, abra numerator.js-meta.xml y sustituya la etiqueta isExposed por las siguientes 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 (Comunicaciones de eventos):
    1. Haga clic con el botón derecho en la carpeta lwc y seleccione SFDX: Deploy This Source to Org (Implementar esta fuente en la organización) para implementar la carpeta lwc en su organización.
    2. Desde el Iniciador de aplicación (Iniciador de aplicación) en su zona de pruebas, busque y abra Event Comms (Comunicaciones de eventos).
    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 (Comunicaciones de eventos) con el fin de realizar modificaciones.
    4. Arrastre el componente numerator, en Custom (Personalizar) en la lista Components (Componentes), hasta la región izquierda de la página.
    5. Haga clic en Save (Guardar).
    6. Haga clic en Atrás para salir del Generador de aplicaciones Lightning.
  1. Cree y codifique el componente secundario llamado controls:
    1. Regrese a Visual Studio Code y cree un componente web Lightning llamado controls.
    2. En controls.js, pegue el siguiente código en la clase Controls:
        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) en el componente principal (numerator):
    1. Abra numerator.html y sustituya el comentario controls go here (los controles van aquí) 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, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos) en la organización de su Trailhead Playground.
    2. Haga clic en Add (Sumar) para que el recuento aumente.
    3. Haga clic en Subtract (Restar) para que el recuento disminuya.

Ahora, contamos con un componente secundario (controls) que envía un evento add (sumar) al componente principal (numerator), que desencadena la función handleIncrement en el componente principal (numerator).

Diagrama correspondiente a la descripción anterior.

Enviar datos con el evento personalizado

Ahora, hagamos que el componente secundario envíe algunos datos con el evento al elemento principal. El negocio desea multiplicar el recuento. Le ofreceremos más de una opción. Utilizamos un evento personalizado para pasar datos del elemento secundario al principal.

  1. Agregue botones y una función de multiplicación al componente secundario (controls):
    1. Abra controls.html y sustituya el comentario buttons go here (los botones van aquí) 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 luego de la función handleSubtract:
        handleMultiply(event) {
          const factor = event.target.dataset.factor;
          this.dispatchEvent(new CustomEvent('multiply', {
            detail: factor
          }));
        }
      Tenga en cuenta que pasamos el evento onclick a la función handleMultiply, que obtiene el botón data-factor mediante event.target.dataset.factor. Luego, pasamos 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 luego de la función handleDecrement:
        handleMultiply(event) {
          const factor = event.detail;
          this.counter *= factor;
        }
      Aquí, se le pasa el evento onmultiply a la función handleMultiply, y esta 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, luego, actualice la aplicación Event Comms (Comunicaciones de eventos).
    2. Haga clic en Add (Sumar) para que el recuento aumente.
    3. Haga clic en X 2 para que el recuento se multiplique por 2.
    4. Haga clic en X 3 para que el recuento se multiplique por 3.

El componente controls pasa datos (data-factor) a su elemento principal (numerator) junto con el evento personalizado multiply.

Diagrama correspondiente a la descripción anterior.

Permitir que los eventos personalizados se propaguen

Los dos botones de multiplicación fueron exitosos. Ahora, el negocio desea más opciones de multiplicación. Facilitemos que se puedan agregar tantos botones como sea necesario. Agregaremos otro componente web Lightning para los botones. Para permitir que las comunicaciones se lleven a cabo, utilizará la propagación de eventos, que permite que el evento personalizado del componente de botón se propague en el árbol del DOM.

  1. Cree un componente llamado button:
    1. Cree un componente web Lightning denominado button.
    2. En button.js, pegue el siguiente código en la clase Button:
        @api label;
        @api icon;
        handleButton(event) {
          this.dispatchEvent(new CustomEvent('buttonclick',{
            // bubbles: true
          }));
        }
    3. Importe el decorador api del 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. Haga que el componente button sea el elemento secundario del componente controls:
    1. Abra controls.html y elimine 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 movimos la llamada de función handleMultiply al controlador onbuttonclick en lightning-layout-item. Esto nos evita tener que agregar un controlador en cada botón, lo que genera un código más nítido y rápido.
    3. Guarde el archivo.
    4. Abra controls.js y agregue esta propiedad factors en la clase Controls:
        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, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
    2. Haga clic en Add (Sumar) para que el recuento aumente.
    3. Haga clic en X 2 y observe que no sucede nada. ¿Por qué? De forma predeterminada, un evento personalizado no se propaga por fuera del host.

      [Texto alternativo: el evento personalizado no va más allá de su contenedor].
      Para permitir que el evento (buttonclick) se propague a lightning-layout-item, agregamos bubbles:true en CustomEvent.
    4. Abra button.js y quite la marca de comentario (primero elimine //) bubbles:true.

      [Texto alternativo: el evento personalizado ahora se propaga por fuera de su contenedor].
    5. Guarde el archivo y vuelva a implementarlo.
    6. Actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
Nota

Puede que deba actualizar la página un par de veces para que pasen las actualizaciones por la memoria caché y que funcionen en la página.

    1. Ahora, haga clic en Add (Sumar) para establecer el recuento como 1.
    2. Haga clic en X 2 para que el recuento se multiplique por 2.
    3. Haga clic en X 6 para que el recuento se multiplique por 6.
    4. Haga clic en X 0 para restablecer el recuento desde cero.
    5. Intente hacer clic de la siguiente manera: Add (Sumar), X 2, X 5, X 2, Add (Sumar) y X 2. O bien: Add (Sumar), X 3, X 2, X 2, Subtract (Restar), X 2, Subtract (Restar) y X 2. O bien, pruebe su propia combinación.

Desafíese (opcional, no comprobaremos este código).

Agregue una segunda instancia del componente de botón button en el componente de controles para crear botones de división que se muestren en el componente de numerador.

Resumen

En este paso, estableció la comunicación de un componente secundario con su elemento principal mediante un evento personalizado. Pasó el evento con y sin datos, y observó cómo la propagación afecta las comunicaciones del elemento secundario al principal. En el próximo paso, facilitará las comunicaciones del elemento principal al 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 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