Gian Vallejos

Comparte la información a tus amigos

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

Comparte la información a tus amigos