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