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

El reto práctico para esta insignia está localizado al japonés, español (LATAM) y portugués (Brasil). Para cambiar el idioma de su Trailhead Playground, siga estas instrucciones. Puede que la localización esté desactualizada. Si no aprueba el reto con las instrucciones localizadas, cambie el idioma a inglés y la configuración local a Estados Unidos, y vuelva a intentarlo.

Consulte la insignia Trailhead en su idioma para aprender a aprovechar la experiencia traducida de Trailhead.

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 siguen 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}/></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 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.

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 Finalizar.
Haga clic en Atrás en la esquina superior izquierda para salir de 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.