Professional Documents
Culture Documents
LWC Present
LWC Present
PAGE 2
Visualforce VS Aura
PAGE 3
Aura VS LWC
PAGE 4
Web Components
- a new browser feature that provides a standard component model for the Web
❖ Custom Elements: The HTML elements with custom templates, tag names like and behaviours are made
with a set of JavaScript APIs.
❖ Shadow DOM : is a standard that encapsulates the internal document object model (DOM) structure of a
web component.
❖ HTML templates: User-defined templates in HTML are rendered only when called upon
❖ ES Modules: ES Modules specification defines the inclusion and reuse of JS documents in a standard
based, modular, performant way
PAGE 5
The 2014 Webstack
PAGE 6
The 2019 Webstack
PAGE 7
The 2019 Webstack - Lightning Web Components
PAGE 8
The Webstack transformation
PAGE 9
Coexistence and interoperability of AURA and LWC
PAGE 10
Why do you go for LWC instead of existing Aura Components?
- Better Performance : render faster than aura components
- More Standards, less proprietary : LWC has built-in browser security features from Web Components
Standards
- Easy to Learn: takes the form through native web standards, no added abstraction layer like Aura
Framework or any other framework, we only need standard JavaScript to develop
- Faster loading sites: is faster in loading the developed components than Aura Components and is
lightweight framework which is built on web standards
- Easier to ramp for developers : No additional framework is needed to learn in order to develop LWC and
hence transition for the developers is a lot easier.
- Better security, better testing and better browser compatibility: With LWC, CSS, Script and DOM
Isolation are better and has more limited event scope
PAGE 11
Coexistence and interoperability of AURA and LWC
- Aura components and Lightning web components can coexist on the same page
- Aura components can include Lightning web components
- Aura components and Lightning web components share the same base Lightning components.
- Aura components and Lightning web components share the same underlying services (Lightning Data
Service, User Interface API, etc.).
PAGE 12
Supported browsers for salesforce LWC
PAGE 13
Supported Javascript for salesforce LWC
Lightning Web Components JavaScript support includes
- ES6 (ECMAScript 2015)
- ES7 (ECMAScript 2016)
- ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
- ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)
PAGE 14
Supported Salesforce Experience and tools
- Custom Tabs
- Lightning Experience - Utility Bars
- Salesforce App - Flows
- Lightning Communities - Embedded Service Chat
- Lightning App Builder - Gmail and Outlook integration
- Experience Builder - Unlocked Packages
- Standalone Apps - Unmanaged Packages
- Lightning Components for Visualforce - Change Sets
- Lightning Out - Metadata API—LightningComponentBundle
- Tooling API—LightningComponentBundle,
LightningComponentResource
PAGE 15
Set up development environment for lightning web component
➢ Sign up for salesforce Account (if does not have)
➢ Enable My Domain in Your Development Org
➢ Enable Debug Mode in Your Development Org
➢ Install a Code Editor
➢ Visual studio code
➢ Salesforce Extension Pack
➢ Set Up Linting
➢ Install the Salesforce CLI
➢ SFDX Commands
PAGE 16
Enable My Domain
➢ to better manage login and authentication
➢ can include your company name in your URL
➢ customize your login page, change the color scheme, add your own content on the right side of the
login page
➢ Work in multiple Salesforce orgs at the same time
➢ Set custom login policy to determine how users are authenticated
My Domain is required to use many Salesforce features, including
➢ Single sign-on (SSO) with external identity providers
➢ Social sign-on with authentication providers, such as Google and Facebook
➢ Lightning components in Lightning component tabs, Lightning pages, the Lightning App Builder, or
standalone apps
PAGE 17
Enable Debug Mode
➢ enable debug mode To make it easier to debug JavaScript code
➢ framework JavaScript code isn’t minified and easier to read and debug.
➢ Only enable debug mode for users who are actively developing or debugging JavaScript.
Setup ➔ Debug Mode ➔ Locate User and Enable it
PAGE 18
Install Code Editor
➢ Install a Code Editor
➢ Visual studio code https://code.visualstudio.com/
➢ Salesforce Extension Pack https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-
vscode
PAGE 19
Install Salesforce CLI
➢ Access all salesforce tools https://developer.salesforce.com/tools
➢ Install Salesforce CLI - is a powerful command line interface that simplifies development and build automation when
working with your Salesforce organization
➢ Set and verify path for CLI
PAGE 20
Setup DevHub and Scratch Org
DevHub: Main salesforce org that create and manage scratch org
Enable Devhub Setup➔Dev Hub➔Enable
Authorize dev hub :
1- Sfdx: authorize dev hub
2- sfdx force:auth:web:login -d -a LWC -HUB
Scratch Org:
- are temporary Salesforce Orgs where developers will build source code and configure an application
- Is fully configurable allowing developers to emulate different editions with different feature
- Source driven and disposable deployment of salesforce code and metadata
- sfdx create a default scratch org
- sfdx open default org
PAGE 21
Scratch Org VS Sandbox
- Scratch Org do not replaces Sandboxes
- Scratch org are not permanent and they don't include any production data
- Scratch orgs compliment sandboxes
PAGE 22
Create Lightning Web Component and Its Folder Structure
- Folder: componentName
- componentName.html
- componentName.Js
- componentName.js-meta.xml
- componentName.css
- componentName.svg
PAGE 23
Folder and File Naming Conventions
Must begin with a lowercase letter
Must contain only alphanumeric or underscore characters
Must be unique in the namespace
Can’t include whitespace
Can’t end with an underscore
Can’t contain two consecutive underscores
Can’t contain a hyphen (dash)
PAGE 24
Component Files
HTML File
-Naming convention is componentName.HTML
- should have root tag as <template>
JavaScript File
Every UI component must include a JavaScript file with at least this code.
Naming convention pascal case.
PAGE 25
Component Files
Configuration file
- defines the metadata values for the component
- <component>.js-meta.xml
PAGE 27
Component test
PAGE 28
Component CSS Files
- Use standard CSS syntax to style Lightning web components
- Use Lightning Design system to style lightning web component
- Naming convention myComponent.css
- A component can include one css file
- Each component can have only one style sheet
- Component can not share the style sheet
different way you can apply styles to lightning web components
- Using Lightning Design System
- Custom CSS style sheet
- Style the host element
- Using Aura design token
* A parent can’t reach into a child to style elements inside its shadow DOM
PAGE 29
Style Using Lightning Design system
- includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design
language, and best practices
- automatically included for Lightning Components running in the Lightning Experience and Salesforce S1
mobile application
PAGE 30
Style the Host Element
- use the standard :host selector to style the host element
- can select a custom element from inside its shadow DOM
- only if the selector given as the function's parameter matches the shadow host
- CSS styles applied to the host element don’t affect child components or parent components
- To style the host element, use the :host selector.
PAGE 31
Fields, Properties and Attributes
- Field and property are interchangeable term
- In JavaScript referred as property and in HTML refered as attribute
- Property names in JavaScript are in camel case while HTML attribute names are in kebab case
- All fields in a Lightning web component class are reactive
- Public properties are reactive. Decorate with @api
- field contains a primitive data type are reactive
- Object created with {} and annonated with @track are reactive
- Arrays created with [] and annonated with @track are recative
PAGE 32
Property and Attribute Names
- Property names in JavaScript are in camel case while HTML attribute names are in kebab case
- Ex: Javascript property: courseName same in html attribute refer as course-name
- Do not use a leading uppercase character in a public property name because HTML attributes in a template
cannot contain uppercase characters
- Ex: donot use @api CourseName as propertyname\
- Don’t start a property name with on,aria,data
- Don’t use reserved words as property name – slot,part,is
PAGE 33
Public Properties
- Property names in JavaScript are in camel case while HTML attribute names are in kebab case
- Public properties are reactive
- Import @api decorator from lwc
PAGE 34
Public Properties
- owner component that uses a component in its markup can access the component’s public properties via
DOM properties.
PAGE 35
Conditional Render using if:true
- Using if:true|false directive to nested <template> tag.
PAGE 36
How to Iterate multiple items in LWC
- Using for:each directive or the iterator directive to iterate over collection
- Must use a key directive to assign a unique Id to each item. Key is used for performance optimization and
not reflected in DOM
PAGE 37
How to Iterate multiple items in LWC
Use of iterator directive gives control to add special behaviors on first and last element
Properties of iterator:
value – items in the list
index- index of the item in the list
first – Boolean indicating first element of the collection
last – Boolean indicating last element of the collection
PAGE 38
How to fetch Inputs in Lightning Web Components
- Using property
- Using getters
- Using querySelector
- Using querySelectorAll
PAGE 39
Component Composition
- Using property
- Using getters
- Using querySelector
- Using querySelectorAll
PAGE 40
Access Custom Label in LWC
- Custom labels are custom text values
- can create up to 5,000 custom labels for your organization, and
they can be up to 1,000 characters in length
- Import labels from the @salesforce/label
PAGE 41
Access Static Resource in LWC
- Static resources allow you to upload content that you can
reference in a Visualforce page, Aura, apex,LWC.
- Resources can be archives (such as .zip and .jar files), images,
stylesheets, JavaScript, and other files.
- Import static resources from the @salesforce/resourceURL
PAGE 42
Access Current user information in LWC
- Import id / isGuest from the @salesforce/user
PAGE 43
LWC Navigation services
- Use navigation service ‘lightning/navigation’ To Navigate in LEX, Lightning communities, salesforce app
- Navigation service uses a pagereference instead of URL.
- Pagerefrence is a Javascript object describing pageType,its attributes and the state of the page
- Lightning navigation not supported in lightning out or lightning component for visualforce
1- Navigate to object Home
2- Navigate to list view
3- Navigate to New Record
4- Navigate to View Record
5- Navigate to edit record
6- Navigate to related list
7- Navigate to Tab
8- Navigate to files Home
9- Navigate to chatter
PAGE 44
How to use Lightning navigation?
Step1
import lightning/navigation
Step2
Apply NavigationMixin function in component base class / Extend NavigationMixin in Javascript class
Step 3
Create Javascript pageReference object – describing page type, its attribute and state of the page
Step 4
Dispatch/Fire the navigation service – [NavigationMixin.Navigate](pageReference,[replace])
Note: If you are navigating to Lightning Component from LWC, you need to implement
the lightning:isUrlAddressable interface in your Lightning Component PAGE 45
How to use Lightning navigation?
PAGE 46
Lightning navigation to Object Home
Type:
Standard__objectPage
Attributes:
actionName: home – is a required attribute
objectApiName: Api name of standard/custom object
PAGE 47
Lightning navigation to Object Home
Type:
Standard__objectPage
Attributes:
actionName: home – is a required attribute
objectApiName: Api name of standard/custom object
PAGE 48
Lightning navigation to Object list view
Type:
Standard__objectPage
Attributes:
actionName: home – is a required attribute
objectApiName: Api name of standard/custom object
PAGE 49
Lightning navigation to New Record Page
Type:
Standard__objectPage
Attributes:
actionName: new – is a required attribute
objectApiName: Api name of standard/custom object
PAGE 50
Lightning navigation to View/Edit Record Page
Type:
Standard__recordPage
Attributes:
actionName: view – is for viewing the record/ edit is for editing the record
objectApiName: Api name of standard/custom object
PAGE 51
Lightning navigation to Web page type
Type:
Standard__webPage
Attributes:
url: url of the page to navigate
PAGE 52
Lightning navigation to Chatter
Type:
Standard__webPage
Attributes:
url: url of the page to navigate
PAGE 53
How to access salesforce Data in LWC?
- Use Lightning Data Service to access salesforce data
- Use Base Lightning Component to Work with salesforce records
- Use Wire service to Get Salesforce Data
- Use Apex Methods in LWC
- Use API from Apex
- Use of Continuation to make long running call outs
PAGE 54
How to Use Apex to access salesforce Data
Step1:
Import methods from apex classes into javascript classes using ES6 import
import apexMethod from ‘@salesforce/apex/Namespace.className.ApexMethodName’;
Step 2:
- Call apex methods as functions into component by calling either via the Wire service or imperatively
- Three way to call apex method
1- Wire a Property
2- Wire a Function
3- call a method imperatively
- Apex Method must be static and either global or public and Annonated with @AuraEnabled
PAGE 55
How to Use Apex to access salesforce Data
What type of Apex class /Method can be used in LWC?
- Method must be Static
- Method must be either global or public
- Must be annotated with @AuraEnabled
What Parameter can be used in Method?
- supported parameter are
- Primitive
-subject (standard/custom)
- Apex
- collection
PAGE 56
How to Use Apex to access salesforce Data
Client side caching
- Use @AuraEnabled(cacheable=true)
- method must only get data and can not change the data
- use refreshApex() to query server for updated data and refresh cache
PAGE 57
How to Use Apex to access salesforce Data
Apex Wire Method to Property:
step1
Import apex method to Javascript class
* Method annotated with @AuraEnabled(cacheable=true)
step2
use wire service @wire to a javascript property using below syntax
PAGE 58
How to Use Apex to access salesforce Data
Apex Wire Method to Property/Function:With Dynamic Input
step1
Import apex method to Javascript class
* Method annotated with @AuraEnabled(cacheable=true)
step2
use wire service @wire to a javascript property/Function using below syntax
PAGE 59
How to Use Apex to access salesforce Data
Lets Practice: Apex Wire Method to Property/Function:With Dynamic Input
PAGE 60
How to Use Apex to access salesforce Data
Lets Practice : Apex Wire Method to Property
PAGE 61
How to Use Apex to access salesforce Data
Apex Wire Method to Function:
step1
Import apex method to Javascript class
* Method annotated with @AuraEnabled(cacheable=true)
step2
use wire service @wire to a javascript property using below syntax
PAGE 62
How to Use Apex to access salesforce Data
Lets Practice:Apex Wire Method to Function
PAGE 63
How to Use Apex to access salesforce Data
Call an Apex Method Imperatively
- To call a method not annotated with cacheable=true
- Can perform DML too
- Control when the invocation occurs
- Can work with objects not supported by User interface API( task,event etc)
- https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_get_started_supported_objects.htm
- To call method from javascript that not extends LightningElement
PAGE 64
How to Use Apex to access salesforce Data
Call an Apex Method Imperatively
Syntax:
PAGE 65
How to Use Apex to access salesforce Data
Lets practice: Call an Apex Method Imperatively
PAGE 66
How to access salesforce Data in LWC?
- Use Lightning Data Service to access salesforce data
- Use Base Lightning Component to Work with salesforce records
- Use Wire service to Get Salesforce Data
- Use Apex Methods in LWC
- Use API from Apex
- Use of Continuation to make long running call outs
PAGE 67
Lightning Data service
• No SOQL, No Apex, No DML
• Supported objects with User Interface API
• Cached and shared across the component
• Use Wire adapter and functions in the lightning/ui*Api modules
• Powers base component
• Lightning-record-edit-form
• Lightning-record-form
• Lightning-record-view-form
PAGE 68
Lightning Data service
LDS
(Base Component/Wire
adapter)
Supported UI API
PAGE 69
Work With Record Using Base Component
- Load a record
Customize Form layout
- Edit a Record
Customize Form layout/predefined field
PAGE 70
Work With Record Using Base Component
- Create a record
* Implement LDS , Not Required Apex to create, take care FLS and sharing
PAGE 71
Work With Record Using Base Component
- Create a record
* Implement LDS , Not Required Apex to create, take care FLS and sharing
PAGE 72
Work With Record Using Base Component
- View a record
- Mode:
- View :outfield with inline editing
- Read-only : only output field
* Implement LDS , Not Required Apex to create, take care FLS and sharing
PAGE 73
Work With Record Using Base Component
- View a record
PAGE 74
Work With Record Using Base Component
- Edit a record
PAGE 75
How to Show Toast Notification?
Popup to alert users of a success/error/warning/information.
PAGE 76
@Salesforce Modules
Add functionality to LWC in runtime
- @salesforce/apex => import apex method
@salesforce/client/formfactor – large,medium,small
@salesforce/contentAssetURL => import content asset file
PAGE 77
@Salesforce Modules
Add functionality to LWC in runtime
@salesforce/client/formfactor – large,medium,small
PAGE 78
@Salesforce Modules
Add functionality to LWC in runtime
@salesforce/schema => import reference to Salesforce object and fields
PAGE 79
@Salesforce Modules
Add functionality to LWC in runtime
@salesforce/User => import current user id
PAGE 80
@Salesforce Modules
Add functionality to LWC in runtime
@salesforce/resourceURL => import static resource to LWC
PAGE 81
Use wire service adapter to access data
- Use LDS wire adapter with @wire in Javascript class
- Built on top of User interface API and available in lightning/ui*Api module
- Immutable stream of data to the component
- Dynamic binding with $
- Terminology – request/fetches=>provision
Steps:
Step1: import adapter to Javascript class
PAGE 82
Use wire service adapter to access data
- Use LDS wire adapter with @wire in Javascript class
- Built on top of User interface API and available in lightning/ui*Api module
- Immutable stream of data to the component
- Dynamic binding with $
- Terminology – request/fetches=>provision
Steps:
Step1: import adapter to Javascript class
PAGE 83
Use wire service adapter to access data
Different Adapter:
PAGE 84
Use wire service adapter to access data
Different Adapter:
Step1:
Step2:
PAGE 85
Use wire service adapter to access data
Different Adapter:
Step1:
Step2:
PAGE 86
Use wire service adapter to access data
Different Adapter:getRecord
PAGE 87
COMPONENT COMMUNICATION THROUGH EVENTS
1- Communication using Method in LWC (Parent to child)
2- Custom event Communication in LWC (Child to Parent)
3- Publish Subscriber model in LWC ( Components not related)
PAGE 88
COMPONENT COMMUNICATION USING METHOD (Parent to child)
PAGE 89
COMPONENT COMMUNICATION USING METHOD (Parent to child)
Step 1:
Create a public properties/method in child component which will be available to parent
use @api
Step 2:
- Find child component in parent
- Access child method/properties in parent component
PAGE 90
COMPONENT COMMUNICATION USING METHOD (Parent to child)
PAGE 91
Custom Event Communication(Child to Parent)
-custom event to communicate from child to parent
PAGE 92
Custom Event Communication(Child to Parent)
PAGE 93
Custom Event Communication(Child to Parent)
Step 1: Create Event
- Use CustomEvent() constructor to create an event . Pass custom event name and detail of the event
- Event Name:
- No Uppercase letter, No spaces, No underscores to separate words
- Do not prefix event name with string on
Syntax:
PAGE 94
Custom Event Communication(Child to Parent)
Step 3: Handle event
2 ways to listen event
- declarative via html markup
* declare the listener in markup in the template of owner component
* define the handler function in the javascript file
- javascript using addEventListener method
* define both listener and the handler function in javascript file
Event Propagation:
event bubbling and event capturing
bubbles: true/false
composed: true/false
PAGE 95
Custom Event Communication(Child to Parent)
PAGE 96
Communicate Between Components(not in the same DOM TREE)
- Publish subscriber pattern
- Components on a single page
- Lightning message channel
- Within a single lightning page or across multiple pages
- Works between LWC, AURA and VF pages
PAGE 97
Communicate Between Components(not in the same DOM TREE)
- Publish subscriber pattern
- One component publishes an event
- Another component subscribe to receive and handle the event
- Every component that subscribes the event will receive the event
Component 1 Component 2
Publisher Subscriber
PAGE 98
[email protected]
Email Id
Email Message
Send
PAGE 99