Lightning Web Component

Lightning Web Component en Salesforce

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

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

Leave a Comment