Desarrollar un componente de interfaz de usuario reutilizable con componentes web Lightning

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.

Seguir la ruta juntos

¿Desea seguir el proceso con un experto a medida que realiza este paso? Eche un vistazo a este video, que forma parte de la serie Trail Together.

(Este clip comienza en la marca del minuto 46:56, en caso que desee volver atrás y ver el comienzo del paso de nuevo).

Introducción

Los componentes web Lightning son elementos HTML personalizados que utilizan los estándares de Componentes web y se desarrollan con lenguaje HTML y JavaScript moderno. Se ejecuta un componente web Lightning (LWC) de forma nativa en el navegador y permite que los desarrolladores personalicen la interfaz de usuario lista para usar.

Crear e implementar un componente web Lightning

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).
Asigne el nombre housingMap al componente web Lightning y seleccione el directorio main/default/lwc.
Verá lo siguiente: un archivo HTML, uno JavaScript, uno XML de metadatos y uno test.js.
En el archivo HTML, housingMap.html, copie y pegue el código siguiente.

    <template>
  <lightning-card title="Housing Map">
    <!-- Explore all the base components via Base component library
    (https://developer.salesforce.com/docs/component-library/overview/components)-->
      <lightning-map map-markers={mapMarkers}> </lightning-map>
  </lightning-card>
</template>

Utilizamos un componente web Lightning lightning-map para trazar el conjunto de datos en un mapa. Los componentes base abarcan muchas funcionalidades. En este ejemplo, no era necesario escribir un marcador HTML para producir una interfaz de usuario de mapa ni redactar tanto código JavaScript para la integración con Google Maps.

5. Guarde el archivo.

6. En el archivo JavaScript, housingMap.js, copie y pegue el código siguiente.

import { LightningElement, wire } from "lwc";
import getHouses from "@salesforce/apex/HouseService.getRecords";
export default class HousingMap extends LightningElement {
    mapMarkers;
    error;
    @wire(getHouses)
    wiredHouses({ error, data }) {
        if (data) {
        console.log(data);
    }
  }
}

El componente web Lightning invoca la clase de Apex HouseService que redactó en la sección anterior para recopilar los datos. Mediante este código, se muestra cómo recuperar datos al invocar un método Apex a través del uso del decorador @wire.

Para permitir que se utilice un método Apex en un LWC, debe incluirlo en la anotación @AuraEnabled. Puede importar el método @AuraEnabled al LWC como una función (como se muestra en la línea 2). Cuando se lo utiliza con el decorador @wire (línea 8), el componente recupera datos mediante el método.

A continuación, deberá agregar código para transformar los datos según se lo precise para el componente base lightning-map. Reemplace el código que le sigue a if (data) { por las siguientes líneas.

// Use JavaScript Map function to transform the Apex method response wired to the component into the format required by lightning-map
          this.mapMarkers = data.map((element) => {
                return {
                    location: {
                        Street: element.Address__c,
                        City: element.City__c,
                        State: element.State__c
                    },
                    title: element.Name
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.mapMarkers = undefined;

El código final del archivo housingMap.js debería verse de la siguiente manera.

import { LightningElement, wire } from "lwc";
import getHouses from "@salesforce/apex/HouseService.getRecords";
export default class HousingMap extends LightningElement {
    mapMarkers;
    error;
    @wire(getHouses)
    wiredHouses({ error, data }) {
        if (data) {
         // Use JavaScript Map function to transform the Apex method response wired to the component into the format required by lightning-map
          this.mapMarkers = data.map((element) => {
                return {
                    location: {
                        Street: element.Address__c,
                        City: element.City__c,
                        State: element.State__c
                    },
                    title: element.Name
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.mapMarkers = undefined;
        }
    }
}

Guarde el archivo.

En el archivo XML, housingMap.js-meta.xml, realice cambios en el código para que coincida con las líneas del 4 al 7.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
 <apiVersion>59.0</apiVersion>
 <isExposed>true</isExposed>
  <targets>
 <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Tenga en cuenta que el conjunto de atributos de destino se encuentra configurado como lightning__HomePage. Esto significa que los administradores tendrán a disposición el componente para colocarlo en la página de inicio. Existen destinos adicionales que los desarrolladores pueden agregar aquí para exponer los componentes de otras partes de la interfaz de usuario de Salesforce. A veces, el destino de un componente incluye contexto adicional, como datos de entrada. Un ejemplo óptimo sería un valor de Id. de registro en una página de registro. Los destinos aquí identificados determinan si su componente puede utilizar estos diferentes contextos. Para saber cómo funcionan otros tipos de destinos, consulte la sección Recursos.

10. Guarde el archivo.

11. Haga clic derecho y seleccione SFDX: Deploy Source to Org (Implementar fuente en organización).

Agregar el componente al inicio de la aplicación

En Visual Studio Code, abra la Paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS/Linux).
Ingrese SFDX.
Seleccione SFDX: Open Default Org (Abrir organización predeterminada).
Esta acción abre su Trailhead Playground en otro navegador.
Haga clic en , busque Dreamhouse y selecciónelo.
Vaya a la ficha Home (Inicio): En el menú de navegación superior, haga clic en Home (Inicio).
Haga clic en y, luego, seleccione Edit Page (Modificar página).
Arrastre el componente web Lightning housingMap desde el área personalizada de la lista Lightning Components (Componentes Lightning) hasta la parte superior del lienzo de la página.
Haga clic en Save (Guardar).
Haga clic en Activate (Activar).
Haga clic en Assign as Org Default (Asignar como predeterminado de la organización).
Haga clic en Save (Guardar).
Vuelva a hacer clic en Save (Guardar) y, a continuación, haga clic en para volver a la página.
Actualice la página para ver el nuevo componente.

Página de inicio en la que se visualiza el componente web Lightning Housing Map (Mapa de viviendas).

El desarrollo con componentes web Lightning en un tiempo de ejecución gestionado por Salesforce es más rápido debido a lo siguiente:

Debe redactar menos código para lograr más resultados mediante el acceso a una gran cantidad de componentes Base Lightning. lightning-map y lightning-card en el componente Housing Map (Mapa de viviendas) fueron los ejemplos de componentes Base que utilizamos antes.
La conexión en el lado del cliente hasta el servicio de datos de Apex de backend se simplifica mediante los decoradores de JavaScript (por ejemplo, el decorador @wire que utilizamos en el código anterior) y los módulos integrados (@salesforce/apex).

Este fue un ejemplo muy simple de un LWC. ¿Desea ver un ejemplo más avanzado de un componente web Lightning? Observe los componentes involucrados en el desarrollo de la página del explorador de propiedades en la unidad Conocer la aplicación de muestra del módulo de Trailhead Quick Start: Explore the Dreamhouse Sample App (Inicio rápido: Explore la aplicación de muestra de Dreamhouse). Allí, utilizamos un componente web Lightning para personalizar de manera completa la experiencia de los usuarios de la aplicación.

Página personalizada desarrollada con componentes web Lightning.

¿Desea obtener otra opción? Instale y explore la Aplicación de muestra Dreamhouse completa para obtener más información sobre cómo desarrollar una aplicación de extremo a extremo en Salesforce Platform.

¿Qué viene a continuación?

Este proyecto le proporcionó una perspectiva general de la experiencia de los desarrolladores que trabajan con capacidades de Salesforce Platform como LWC y Apex. Sin embargo, puede hacer mucho más.

Heroku es otro producto que nuestros desarrolladores pueden utilizar si deben controlar por completo el escalamiento vertical y horizontal de los recursos de las aplicaciones. Gracias al conjunto de productos de Salesforce y Salesforce AppExchange, cuenta con oportunidades ilimitadas de aprendizaje.

No necesita realizar su recorrido de aprendizaje a solas. Colabore, forme redes, genere conexiones y aprenda sobre el desarrollo de Salesforce con otros desarrolladores de manera global en el Grupo para desarrolladores de Salesforce en la Trailblazer Community de Salesforce.

¿Necesita ayuda?

Descubrir más