Scribd
Upload
146 views

Salesforce Lightning Web Components Cheat Sheet

Salesforce training

Uploaded by

RajendraPrasad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
146 views

Salesforce Lightning Web Components Cheat Sheet

Salesforce training

Uploaded by

RajendraPrasad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Notes

Lightning Web Component (LWC)


Cheat Sheet
Notes
Lightning Web Component (LWC)
Cheat Sheet

1.Component Structure:

1.HTML File : The HTML file contains the


structure and layout of the component.
Here's a simple example:
Notes

HTML Template Directives:


{{ data }}: Display data.
on:eventName: Handle events.
if:true|false: Conditional rendering.
for:each={array}: Iterate over an
array.

2.JavaScript File : The JavaScript file


contains the logic for the component.
This includes event handling, data
manipulation, and other business
logic.
Notes

3.CSS File: The CSS file contains the


styles for the component.
Notes

4.Metadata File: The metadata file


defines the configuration for the
Lightning Web Component, such as its
name, description, and whether it
should be exposed in the Lightning
App Builder.
Notes
Attributes and Properties:

1.Public Properties:

2.Passing Data:
Notes
Events:

1. Event Handling:
Notes
Notes
Apex Integration:
1.Wire Service:

2.Imperative Apex:
Notes
Advanced Concepts:

1.Lightning Data Service (LDS):


Automatically caches and
manages a record's data.
Use ‘lightning-record-form’ or
‘lightning-record-view-form’.

2.Navigation Service:
Notes

3.LWC Lifecycle Hooks:

𝐂𝐨𝐧𝐬𝐭𝐫𝐮𝐜𝐭𝐨𝐫() : This is the first method


that is called when a component is
created. It is used to initialize the
component's state and set up event
listeners.

𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐞𝐝𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤() : This method is


called when a component is inserted
into the DOM. It is used to perform tasks
that require access to the DOM, such as
setting up timers or making API calls.
Notes
𝐑𝐞𝐧𝐝𝐞𝐫𝐞𝐝𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤() : This method is
called whenever a component's
template is rendered. It is used to
perform tasks that require access to the
DOM, such as manipulating the
component's CSS styles or updating the
component's state.

𝐃𝐢𝐬𝐜𝐨𝐧𝐧𝐞𝐜𝐭𝐞𝐝𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤() : This method is


called when a component is removed
from the DOM. It is used to clean up any
resources that were created in the
connectedCallback() method.

𝐄𝐫𝐫𝐨𝐫𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤() : This method is called


when there is an error in the
component's rendering or in a child
component's rendering. It is used to
handle errors and display error
messages to the user.
Notes
flow diagram of life cycle hook of
LWC
Notes

4.Custom Labels:
Define labels in the Salesforce
Setup and use in the LWC:

You might also like