Lightning Web Components

Lightning Web Component in Salesforce

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

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

Comparte la información a tus amigos

5 Comments

  1. Very nice post. I just stumbled upon your blog
    and wished to say that I have really enjoyed surfing
    around your blog posts.
    After all I’ll be subscribing to your rss feed and I hope you write
    again very
    soon!

    Also visit my web blog; xt_blog (Dennis)

  2. Oh my goodness! Awesome article
    dude! Thank you, However I am going through problems with your RSS.
    I don’t understand the reason why I can’t join it. Is there anybody else getting
    the same RSS problems?
    Anyone that knows the answer can you kindly respond?
    Thanks!!

    Here is my homepage; click here (Christal)

  3. great and also outstanding blog site. I actually intend to thank you,
    for giving us far better details.

    My blog post – Corazon

  4. This blog is definitely rather handy since I’m at the moment creating an internet floral website – although I am only starting out therefore it’s really fairly small, nothing like this site. Can link to a few of the posts here as they are quite. Thanks much. Zoey Olsen

    https://www.zoritolerimol.com