Implementar archivos de componentes web Lightning

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Configurar archivos de componentes web Lightning para mostrarlos en una organización.
Implementar sus archivos en una organización.
Verificar el comportamiento del componente en un entorno de una organización.

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y copie y pegue los valores en español (LATAM). 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.

Configurar archivos de componentes web Lightning para utilizarlos en una organización

Cree el componente de bicicleta que se mencionó en la unidad Crear componente Lightning y aplíquelo en su organización.

No vamos a definir ningún estilo propio, de modo que no necesitaremos un archivo CSS.

Los archivos que necesita para enviar este componente a una organización:

bikeCard.html
bikeCard.js
bikeCard.js-meta.xml

Estos son los pasos.

Continúe en el proyecto bikeCard.
En force-app/main/default, haga clic con el botón derecho en la carpeta lwc y seleccione SFDX: Crear componente web Lightning.
Ingrese bikeCard como nombre para el nuevo componente.
Presione Enter (Intro) y, luego, Enter (Intro) de nuevo para aceptar la opción predeterminada force-app/main/default/lwc.
Verá el siguiente código en VS Code en \force-app\main\default\lwc\bikeCard:

Los componentes web Lightning cumplen los estándares web. El estándar HTML recomienda que los nombres de elementos personalizados con varias palabras incluyan un guion. Sin embargo, la plataforma Salesforce no permite el uso de guiones en los nombres de archivos ni de carpetas del componente. De modo que, en este caso, utilizamos las convenciones de nomenclatura de camel case.

Copie y reemplace el contenido de los archivos bikeCard.html, bikeCard.js y bikeCard.js-meta.xml.
bikeCard.html

<template>
  <div>
    <div>Name: {name}</div>
    <div>Description: {description}</div>
    <lightning-badge label={material}></lightning-badge>
    <lightning-badge label={category}></lightning-badge>
    <div>Price: {price}</div>
    <div><img src={pictureUrl} alt={name}/></div>
  </div>
</template>

bikeCard.js

import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
  name = 'Electra X4';
  description = 'A sweet bike built for comfort.';
  category = 'Mountain';
  material = 'Steel';
  price = '$2,700';
  pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
}

bikeCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Bike Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Guarde sus archivos.

El archivo de configuración del componente

El archivo que nos falta por tratar es el archivo de configuración del componente con la extensión .js-meta.xml. Este archivo suministra metadatos para Salesforce, incluida la configuración de diseño para componentes pensados para su uso en el Generador de aplicación Lightning.

Los archivos que forman un componente, incluido el archivo de configuración.

Aún no abordamos los archivos de configuración porque estuvimos jugando en LWC.studio. Ahora que va a empezar a utilizar el contenido dentro de una organización, debe incluir un archivo de configuración.

Fíjese que todos los componentes del repositorio de bicicletas eléctricas tienen este archivo de configuración. Aquí se incluye un ejemplo del repositorio de bicicletas eléctricas:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>57.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Product Card</masterLabel>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    <target>lightningCommunity__Page</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__RecordPage">
      <objects>
        <object>Product__c</object>
      </objects>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Obligatorio:

apiVersion vincula el componente a una versión de API de Salesforce.
isExposed (true [verdadero] o false [falso]) Si isExposed es false (falso), el componente no está expuesto al Generador de aplicación Lightning ni a Experience Builder.

Para permitir el uso del componente en el Generador de aplicación Lightning o en Experience Builder, establezca isExposed como true (verdadero) y defina al menos un <target> (destino), que es un tipo de página Lightning.

Opcional:

targets (destinos) especifica los tipos de páginas Lightning a las que se puede agregar el componente en el Generador de aplicación Lightning.
targetConfigs le permite especificar un comportamiento específico para cada tipo de página Lightning, por ejemplo, los objetos que admiten el componente.

Consulte la documentación para ver la lista completa de la sintaxis admitida.

Mostrar un componente en una organización

Hay dos maneras de mostrar un componente web Lightning en la interfaz de usuario.

Configure el componente para admitir varios tipos de FlexiPage (inicio, inicio de registro, etc.) y, a continuación, agréguelo a una FlexiPage utilizando el Generador de aplicación Lightning. Este es el método más sencillo y el que utilizaremos en esta unidad.
También se puede crear una ficha que apunte a un componente Aura que contenga su componente web Lightning. En el repositorio puede ver las partes necesarias.

Implementar sus archivos

Ahora debe implementar los archivos del componente en su organización.

Autentíquese en su organización con SFDX: Autorizar una organización desde la paleta de comandos en VS Code. Cuando el sistema lo solicite, acepte el proyecto predeterminado y pulse Entrar para aceptar el alias predeterminado. Si se le solicita que permita el acceso, haga clic en Permitir.
Haga clic con el botón derecho en la carpeta force-app/main/default y seleccione SFDX: Deploy This Source to Org.

Permitir que se muestren imágenes de bicicletas eléctricas

Las imágenes que usamos están alojadas en un sitio de Amazon AWS. Para permitir que las imágenes se muestren en nuestra aplicación, necesitamos agregar la URL a la lista de sitios de confianza.

Para abrir su organización, utilice SFDX: Abrir organización predeterminada desde la paleta de comandos en VS Code.
En Setup (Configuración), ingrese trusted urls (URL de confianza) en el cuadro Quick Find (Búsqueda rápida) y luego seleccione Trusted URLs (URL de confianza).
Haga clic en New Trusted URL (Nueva URL de confianza).
Para API Name (Nombre de API) ingrese ebikes (bicicletas eléctricas).
Para URL, ingrese https://s3-us-west-1.amazonaws.com.
Para Description (Descripción), ingrese Allow ebike images to display (Permitir que se muestren imágenes de bicicletas eléctricas).
Deje seleccionado Active (Activo).
Asegúrese que se seleccione img-src (imágenes).
Haga clic en Guardar.

Crear una nueva página para su componente

Dado que ajustamos el archivo de configuración de su componente para permitir que se utilice en el Generador de aplicación Lightning, utilice la interfaz de usuario para crear una aplicación y agréguele su componente.

Para abrir su organización, utilice SFDX: Abrir organización predeterminada desde la paleta de comandos en VS Code.
En Setup (Configuración), ingrese Lightning App Builder (Generador de aplicación Lightning) en el cuadro Quick Find (Búsqueda rápida) y, luego, seleccione Lightning App Builder (Generador de aplicación Lightning).
Haga clic en Nuevo.
Seleccione Página de aplicación y haga clic en Siguiente.
Asígnele la etiqueta Bike Card (Tarjeta de bicicleta) y haga clic en Next (Siguiente).
Seleccione Una región y haga clic en Listo.
En el Generador de aplicación Lightning, desplácese por la lista de componentes hasta que vea su componente Bike Card.

Ahora puede arrastrarlo hasta la página. Guarde la página y actívela, y el componente Bike Card aparecerá en la página asignada.

Arrastre el componente Bike Card a la parte superior del diseño de página hasta que aparezca la bicicleta.
Haga clic en Guardar.
Haga clic en Activar.
Mantenga seleccionado Activar para todos los usuarios. Y, si quiere, puede cambiar el nombre o el icono de su aplicación.
Haga clic en Guardar. Se le solicita agregar su página a los menús de navegación, pero no es necesario hacerlo. Aún puede llegar a su página en este entorno.
Haga clic en Skip and Save (Omitir y guardar).
Haga clic en para salir del Generador de aplicaciones Lightning.
Desde el Iniciador de aplicación (), encuentre y seleccione Bike Card.
Ábralo y vea cómo funciona su componente en la interfaz de usuario.

Ya está, una reluciente bici nueva. Envió un componente a una organización, lo vio en la página y puede verificarlo en la interfaz de usuario.

En la siguiente unidad, construirá un componente interactivo con gestión de eventos y lo implementará en su organización para probarlo.

¿Necesita ayuda?

Descubrir más