Gian Vallejos

A Lightning Web Component in Salesforce is a framework to build custom components, using HTML and modern Javascript, to run efficiently and save resources in our apps.

Types of Lightning Web Component in Salesforce

• UI Component: Custom components that users can interact with via interfaces, buttons, forms, etc.
• Service Component (Library): Serves a helper library, however, is created to have variables or functions that can be shared between components.

Contents for Lightning Web Component in Salesforce

HTML File

• Every UI Component must have an HTML file.
• The root tag should be <template>.
• Convention name is <component>.html, for example, mainComponent.html.
• When a component renders, the <template> tag is replaced with the name of the component with “c” at the begining, as default namespace.

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

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

Javascript File

• A Javascript file is required in any type of Lightning Web Component.
• Follows the naming convention <component>.js, for example, mainComponent.js
• The class name must be written in Camel Case such as: class MainComponent.
• We can import a class, function or variable declared in a module using the import keyword.
• Javascript files in Lightning web components are ES6 or ES2015 (ECMAScript) modules.
• Every component that has UI must have the code below:

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

export default MainComponent;

• A custom component should extends the class LightningElement as the code above.
• The export default keywords allows to use this class by other components.
• A javascript file can contain: Private properties, event handlers and Public API (via public properties and methods using @api)
• Fields defined in a Lightning web component class are reactive. Meaning, if the value of a field changed in the controller, the component automatically rerenders.
• Use the decorator @track to detect any changes made to its properties or elements in an object or array.

Configuration File

• Configuration file is required for every component.
• Defines the metadata for the component. Also, includes the design configuration.
• Naming as <component>.js-meta.xsml. For example, 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

• Name convention as <component>.css. For example, mainComponent.css.
• Uses standard CSS.
• Does not override other styles on other parts of a page, only scoped to the component.
• Only once CSS per Lightning web component.
• Custom Aura tokens are created to style Aura components and can be used as variables for css. (See the code example)

<!--- 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);
}

• Can create a Lightning Web Component that contains only a CSS and configuration file and, then imported by another Lightning Web Component that needs it.
• To import a CSS Module, use @import statement. For example: @import “c/mainComponent”

SVG Icon

• A custom icon can be defined for the custom component including an SVG file.
• It’s naming convention is <component>.svg such as mainComponent.svg.
• Only one SVG file is allowed per Lightning web component.
• The SVG file is added to the top-level component folder.
• SVG icon is visible in Lightning App Builder and Experience Builder.

Tests for Lightning Web Component in Salesforce

• Component tests for Lightning Web Component are run using Jest.
• Jest is a third-party testing framework used to test Javascript code.
• Create a folder __tests__ on the component folder to contain all the test files.
• The convention name recommended is <component>.test.js such as testMainComponent.test.js
• Jest tests are created locally and run independently of Salesforce.

Access to Resources from Lightning Web Component in Salesforce

• Static Resources can be imported using @salesforce/resourceUrl.
• Content Asset Files can be imported using @salesforce/contentAssetUrl.
• Custom Labels used for implementing multilingual features can be imported using @salesforce/label.
• In addition, can import Internationalization Properties using @salesforce/i18n scoped module.
• User Information can be imported using @salesforce/user.
• Form Factor of the device is accessed by importing @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";
}

Checking User Permissions in Lightning Web Component in Salesforce

• The scoped modules @salesforce/userPermissions and @salesforce/CustomPermission are used to check permissions in Lightning Web Component.
• To check a user permission:

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

• To check custom permissions:

//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>

Considerations When Using Lightning Web Component Model

• A Lightning Web Component cannot contain an Aura Component.
• In addition, the methods loadScript and loadStyle available through the platformResourceLoader module is used to load Javascript and CSS files respectively.
• Finally, unlike Aura Components, Javascript and CSS files referencing takes place in the controller instead of the template.

Learn More

• 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

If you want to learn more about Salesforce go to Lightning Component Framework

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