Gian Vallejos

Comparte la información a tus amigos

Un Lightning Web Component (LWC) en Salesforce es un framework para construir componentes personalizados, usando HTML y Javascript moderno, para que nuestras aplicaciones funcionen de manera eficiente y ahorren recursos.

Tipos de Lightning Web Components

• UI Component: Son componentes personalizados con los que los usuarios pueden interactuar a través de interfaces, botones, formularios, etc.
• Service Component (Library): Sirve como librería auxiliar, es decir, está creado para tener variables o funciones que se pueden compartir entre componentes.

Contenido para Lightning Web Component

HTML File

• Todo componente UI debe tener un archivo HTML.
• La etiqueta raíz debe ser <template>.
• El nombre convencional es <component>.html, por ejemplo, mainComponent.html
• Cuando un componente se renderiza, la etiqueta <template> es remplazada, predeterminadamente, con el nombre del componente con la letra “c” al principio.

<!-- Code -->
<template>
  <h1>Hello World</h1>
</template>

<!-- Rendered -->
<c-main-component>
  <h1>Hello World</h1>
</c-main-component>

Javascript File

• Se requiere de un archivo Javascript para cualquier tipo de Lightning Web Component.
• Persigue el nombre convencional <component>.js, por ejemplo, mainComponent.js.
• El nombre de la clase debe escribirse en Camel Case como: class MainComponent.
• Podemos importar una clase, función o variable declarada en un módulo usando la palabra clave “import”
• Los archivos Javascript en LWC son módulos ES6 o ES2015 (ECMAScript).
• Todo componente que tiene UI debe tener el código a continuación:

import {LightningElement} from 'lwc';
class MainComponent extends LightningElement { 
  //code here 
}

export default MainComponent;

• Un componente personalizado puede extender la clase LightningElement como en el código anterior.
• Las palabras clave export default permite usar esta clase mediante otros componentes.
• Un archivo Javascript puede contener: Propietarios privados, controladores de eventos y APIs Públicos (a través de propiedades públicas y métodos usando @api).
• Los campos definidos en una clase Lightning Web Componente son reactivos. Es decir, que si el valor del archivo cambia en el controlador, el componente se renderiza automáticamente.
• Usa el decorador @track para detectar cualquier cambio hecho a sus prioridades o elementos de un objeto o array.

Configuración File

• Se requiere del archivo de configuración para cada componente.
• Define la metadata del componente. Además, incluye el diseño de la configuración.
• Nombrarlo como <component>.js-meta.xsml. Por ejemplo, mainComponent.js-meta.xml.

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

CSS FILE

• Podemos nombrarlos como <component>.css. Por ejemplo: mainComponent.css.
• Utiliza CSS estándar.
• No anula los estilos de otras partes de la página, solo se aplica al componente.
• Se require sólo de un CSS por LWC.
• Los Custom Aura Tokens brindan estilo a los Aura components y se pueden utilizar como variables para CSS. (Ver el código de ejemplo)

<!--- MyAuraTokens.tokens -->
<aura:tokens>
  <aura:token name="myBaseFontNames" value="Helvetica, Arial" />
  <aura:token name="myBaseFontColor" value="#222222" />
</aura:tokens>

/* myLightningWebComponent.css */
.bodyClass {
  font-family: var(--c-myBaseFontNames);
  color: var(--c-myBaseFontColor);
}

• Podemos crear un Lightning Web Component que contenga solo un CSS y un archivo de configuración. Luego podemos importarlo por medio de otro LWC que lo necesite.
• Para importar un Modulo CSS, podemos usar la declaración @import. Por ejemplo: @import “c/mainComponent”

SVG Icon

• Para definir un ícono personalizado debemos incluir un archivo SVG en el componente.
• Su nombre convencional es <component>.svg como mainComponent.svg.
• Solo un archivo SVG es permitido por cada Lightning web Component.
• El archivo SVG es adicionado a la carpeta de componentes de nivel superior.
• SVG Icon es visible en Lightning App Builder y Experience Builder.

Pruebas para Lightning Web Component en Salesforce

• Las pruebas para Lightning Web Componente se ejecutan usando Jest.
• Jest es un framework para pruebas externo que se usa para probar nuestro código Javascript
• Podemos crear una carpeta __tests__ en los archivos del componente para guarda todos los datos de prueba.
• El nombre convencional recomendado es <component>.test.js como testMainComponent.test.js.
• Las pruebas Jest son creadas localmente y se ejecutan independientemente de Salesforce.

Acceso a Recursos de Lightning Web Component en Salesforce

• Para importar Recursos Estáticos (Static Resources) se debe usar @salesforce/resourceUrl.
• Los archivos de activos (assets) pueden ser importados usando @salesforce/contentAssetUrl.
• Las etiquetas personalizadas usadas para implementar multi-lenguajes pueden ser importadas usando @salesforce/label.
• Adicionalmente, se puede importar propiedades de internalización usando el módulo de ámbito @salesforce/i18n.
• La información del usuario puede ser importada usando @salesforce/user.
• Para acceder al Form Factor del dispositivo se puede importar @salesforce/client/formFactor.

//Using a static resource in lwc

import { LightningElement }
import staticGVallejos from "@salesforce/resourceUrl/gvallejosLWC";

class MainComponent extends LightningElement {
  imgGVallejos = staticGVallejos + "/gvallejosLWC/images/gVallejos.png";
}

Permisos de usuario de un Lightning Web Component

• Para comprobar permisos en Lightning Web Component podemos usar los módulos de alcance @salesforce/userPermissions y @salesforce/CustomPermission.
• Si queremos verificar el permiso de un usuario, podemos escribir el siguiente código:

import canCustomizeReports from '@salesforce/userPermission/CreateCustomizeReports';

• En el siguiente código vemos como se pueden verificar los permisos personalizados:

//component.js
import { LightningElement } from 'lwc';
import hasViewGoogleSlides from '@salesforce/customPermission/ViewGoogleSlides';

export default class App extends LightningElement {
  get isViewButtonVisible () {
    return hasViewGoogleSlides;
  }
  openGoogleSlides(e) { ... }
}

<!-- component.html -->
<template>
  <template if:true={isViewButtonVisible}>
    <lightning-button label="View Content" onclick={openGoogleSlides}></lightning-button>
  </template>
</template>

Consideraciones al Usar el Modelo Lightning Web Component

• Un Lightning Web Component no puede contener un Aura Component.
• Adicionalmente, los métodos loadScript y loadStyle disponibles a través del módulo platformResourceLoader son usados para cargar archivos Javascript y CSS respectivamente.
• Finalmente, a diferencia de los Aura Components, las referencias de los archivos Javascript y CSS, se realizan en el controlador, en lugar de en el template.

Más Información

• Introducing Lightning Web Component
• Define a Component
• Data Binding in a Template
• Component JavaScript File
• Configuration File Tags
• Create a CSS Style Sheet for a Component
• Access Static Resources, Labels, Internationalization Properties, User IDs, and Form Factors

Si quieres aprender más sobre Salesforce puedes ir a Lightning Component Framework

Si quieres saber cómo hacer un lightning web component paso por paso, puedes ver el siguiente video Aprende a crear una aplicación para ver los casos de COVID-19 que hay en tu país

Comparte la información a tus amigos