Crear un componente de interfaz de usuario reutilizable con Lightning Web Components

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.

Seguir la ruta marcada por Trail Together

¿Desea contar con la ayuda de un instructor a medida que trabaja en este paso? Eche un vistazo a este vídeo, que forma parte de la serie Trail Together.

(Este clip comienza en la marca del minuto 46:56, en caso de 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 están creados con HTML y JavaScript moderno. Un componente web Lightning (LWC) se ejecuta en el navegador de forma nativa y permite que los desarrolladores personalicen la interfaz de usuario predefinida.

Crear e implementar un componente web Lightning

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

    <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 Lightning básico lightning-map para marcar el conjunto de datos en un mapa. Los componentes básicos contienen muchas funciones. En este ejemplo, no tuvo que escribir marcado HTML para producir una interfaz de usuario de mapa ni codificar JavaScript a fin de integrar con Google Maps.

5. Guarde el archivo.

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

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 Apex HouseService que escribió en la sección anterior para buscar los datos. Este código muestra cómo recuperar datos invocando un método Apex mediante el uso de @wire decorator.

Para permitir que se utilice un método Apex en un componente web Lightning, escríbalo con la anotación @AuraEnabled. Puede importar el método @AuraEnabled en un componente web Lightning como una función (se muestra en la línea 2). Cuando se utiliza con @wire decorator (línea 8), el componente recupera datos mediante el método.

A continuación, vamos a agregar código para transformar los datos como es necesario mediante el componente básico lightning-map. Reemplace el código que aparece después de if (data) { con 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 en el archivo housingMap.js debería tener este aspecto.

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 los cambios en el código para que coincidan con las líneas de la 4 a la 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 atributo de destino está configurado en lightning__HomePage. Esto significa que los administradores tendrán el componente disponible para soltarlo en la página de inicio. Hay destinos adicionales que los administradores pueden agregar aquí a fin de exponer los componentes para otras partes de la interfaz de usuario de Salesforce. A veces, el destino de un componente incluye contexto adicional, como datos de entrada. Un buen ejemplo es un valor de Id. de registro o una página de registro. Los destinos identificados aquí son los que determinan si el componente puede utilizar estos contextos diferentes. Mire cómo otros tipos de destino funcionan en la sección Resources (Recursos).

10. Guarde el archivo.

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

Agregue el componente a la aplicación Home

En Visual Studio Code, pulse Ctrl + Mayús + P en Windows o Comando + Mayús + P en macOS o Linux para abrir la paleta de comandos.
Escriba SFDX.
Seleccione SFDX: Open Default Org (Abrir organización predeterminada).
Se abrirá su Trailhead Playground en una ventana de navegador independiente.
Haga clic en , busque y seleccione Dreamhouse.
Vaya a la ficha Home (Inicio): Haga clic en "Home" (Inicio) en el menú de navegación de la parte superior.
Haga clic en y, a continuación, seleccione Edit Page (Modificar página).
Arrastre el componente web Lightning housingMap desde el área personalizada de la lista de 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).
Haga clic en Save (Guardar) otra vez y haga clic en para volver a la página.
Actualice la página para ver el componente nuevo.

Página de inicio con el componente web Lightning Housing Map.

Crear con componentes web Lightning en tiempos de ejecución gestionados por Salesforce es más rápido debido a lo siguiente:

Se escribe menos código y se obtienen más resultados con acceso a un número de componentes Lightning básicos (lightning-map y lightning-card en el componente Housing Map eran ejemplos de componentes básicos utilizados anteriormente).
La conexión del cliente con el servicio de datos back-end de Apex se simplifica mediante decoradores de JavaScript (por ejemplo, el decorador @wire que utilizamos en el código anterior) y los módulos integrados (@salesforce/apex).

Este es un ejemplo muy sencillo de componente web Lightning. ¿Quiere ver un ejemplo más avanzado de un componente web Lightning? Consulte los componentes involucrados en la creación de la página de propiedades del explorador en la unidad Presentación de la aplicación de ejemplo del módulo de Trailhead Inicio rápido: Explorar la aplicación de ejemplo Dreamhouse. Aquí, utilizamos un componente web Lightning para personalizar la experiencia de usuario de la aplicación por completo.

Página personalizada con componentes web Lightning.

¿Alguna otra opción? Instale y explore la aplicación de ejemplo Dreamhouse completa para obtener más información sobre la creación de una aplicación extremo a extremo en Salesforce Platform.

¿Qué viene a continuación?

Este proyecto le ha proporcionado una descripción general de lo que significa ser un desarrollador que trabaja con capacidades de Salesforce Platform, como los componentes web Lightning y Apex. Sin embargo, esto no es lo único que puede hacer.

Heroku es otro producto que pueden utilizar los desarrolladores si necesitan controlar la escalabilidad vertical y horizontal de los recursos de aplicación. Con el conjunto de productos de Salesforce y Salesforce AppExchange podrá aprender una infinidad de oportunidades.

No está solo en la trayectoria del aprendizaje. Colabore, establezca contactos, cree conexiones y aprenda el desarrollo de Salesforce con otros desarrolladores en el grupo Salesforce Developer de la Trailblazer Community de Salesforce.

¿Necesita ayuda?

Descubrir más