
Lightning Web Component in Salesforce
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
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)
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)
great and also outstanding blog site. I actually intend to thank you,
for giving us far better details.
My blog post – Corazon
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
These burns are covered by bacitracin ointment, which is reapplied every 6 hours after gently washing the skin viagra vs cialis