Salesforce Lightning Web Components (LWC) interview questions
This post will talk about Salesforce Lightning Interview Questions & Answers. Here are some scenario-based Salesforce lightning interview questions. Check our Top Salesforce Developer Interview Question post for more questions related to Apex.
The Lightning Frameworks Interview Questions.
Here are scenario-based Salesforce lightning interview questions.
1. How can we extend any component in aura framework?
To make a component extendable we need to set value of ‘extensible’ attribute as ‘true’ of the parent aura component. When a component extends another component it inherits all of the helper methods and attributes.
2. How can you call one JS controller method from another JS controller method in aura?
here is sample code to call another JS method.
({
func1 : function(component, event, helper) {
var func2 = component.get(“c.func2”);
$A.enqueueAction(func2);
},
func2 : function(component, event, helper) {
alert(‘inside func2’);
}
})
3. How do you pass value to the JS controller while using hyperlink?
here is sample code.
<aura:component >
<a href=”javascript:void(0);” onclick=”{!c.func}” data userid=”hello”>Click</a>
</aura:component>
({
func : function(component, event, helper) { var evt = event.currentTarget;
var val = evt.dataset.userid; alert(val);
}
})
4. What are the steps to add a lightning component in a vf page?
- Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
- Create and reference a Lightning app that declares your component dependencies.
- Write a JavaScript function that creates the component on the page using $Lightning.createComponent().
5. How do you de-activate the paste functionality in lightning input?
Here is sample code to deactivate the paste functionality in lightning component.
<aura:component >
<aura:attribute name=”data” type=”String”/>
<div aura:id=”dtag” onpaste=”{!c.handlePaste}”>
<lightning:input name=”inp” label=”Enter Value” value=”{!v.data}”/>
</div>
</aura:component>
JS controller :
({
handlePaste:
function(component, event,
helper) { event.preventDefault();
},
6. How to get the current user name and current user profile name in aura component without using apex
<aura:component >
<aura:attribute name=”currentUser” type=”User”/>
<force:recordData aura:id=”recordLoader” recordId=”{!$SObjectType.CurrentUser.Id}”
fields=”Profile.Name,N ame” targetFields=”{!v.currentUser}”/>
Current User : <strong>{!v.currentUser.Name}</strong>
Current Profile : <strong>{!v.currentUser.Profile.Name}</strong>
</aura:component>
7. Explain data binding in aura
Data binding is two way in aura framework i.e. parent to child component and child to parent component. Consider the below examples:
Parent Component:
<aura:component >
<aura:attribute name=”parentVar” type=”Integer” default=”1″/>
<c:DataBindingChild childVar=”{!v.parentVar}”/>
<br/>
parentVar: {!v.parentVar}
</aura:component>
Child Component:
<aura:component >
<aura:attribute name=”childVar” type=”Integer”/>
<lightning:button label=”change value” variant=”brand” onclick=”{!c.handleClick}”/>
<br/>
childVar: {!v.childVar}
<br/>
</aura:component>
.
({
handleClick : function(component, event, helper) { var childVar = component.get(“v.childVar”);
component.set(“v.childVar”, childVar+1);
}
})
So in this example, the parent component attribute value parentVar is passed to child component attribute childVar. So initially, both the values are 1. Once you click the button, you will see the childVar as well as parentVar is changed to 2. This is because any change made to childVar is reflected back to parentVar. We can think of it like call by reference.
8. Why do we use @AuraEnabled annotation?
The AuraEnabled annotation provides support for Apex methods and properties to be used with the Lightning Component framework.
The AuraEnabled annotation is overloaded, and is used for two separate and distinct purposes.
- Use @AuraEnabled on Apex class static methods to make them accessible as remote controller actions in your Lightning components.
- Use @AuraEnabled on Apex instance methods and properties to make them serializable when an instance of the class is returned as data from a server-side action.
9. Is it possible to use the value of another attribute or any custom label as the default value of one attribute in aura component instead of using hardcode?
Ans: Yes, it is possible. Please find the below example:
<aura:component >
<aura:attribute name=”dataVar1″ type=”Integer” default=”1″/>
<aura:attribute name=”dataVar2″ type=”Integer” default=”{!v.dataVar1}”/>
<aura:attribute name=”dataVar3″ type=”String” default=”{!$Label.c.Test_Custom_Label}”/> dataVar1 : {!v.dataVar1}
<br/>
dataVar2 : {!v.dataVar2}
<br/>
dataVar3 : {!v.dataVar3}
</aura:component>
Output:
dataVar1 : 1
dataVar2 : 1
dataVar3 : Hello world (considering the value of the custom label is ‘Hello world’)
10. How do we restrict an aura component to be used in the record pages of only for particular Sobjects?
We can restrict a lightning component to be used as record pages only for particular objects. We have to specify the same using sfdc:objects and sfdc:object tag in the design file in aura bundle.
11. What are LWC lifecycle hook methods? What is the order in which they are called?
Below are the methods and the sequence in which they get invoked:
- constructor()
- connectedCallback()
- renderedCallback()
- render()
- disconnectedCallback()
- errorCallback(error, stack)
12. Suppose you have written a LWC which has the @wire decorator to get the data from apex. But you are unable to get the data from the server. You checked your apex code but could not figure out the issue. What could be one of the reason?
Check whether you have used cacheable=true along with @AuraEnabled annotation in the apex method.
13. How do you navigate from LWC to VF page?
Navigating to a VF Page from LWC can be done using NavigationMixin.
14. Suppose you are using getRecord in LWC to get any field value from the current record. Now you need to pass the retrieved value to an apex method using wire approach. How can you pass the value?
15. What is the field spanning limit in LWC?
Ans: We can refer to relationship fields upto 5 levels.
16. How do you pass list of Sobject records from LWC to flow?
We can pass list of Sobject records from LWC to flow as well. We need to define the list variable with @api to denote and expose as a public property in the flow. The meta file configuration remains the same i.e. define the property as @salesforce/schema/<SobjectApiName>[].
17. What are the decorators in LWC?
Ans: @api, @track, @wire.
18. How do you pass value from LWC to aura using navigation?
import { LightningElement, track } from ‘lwc’;
import { NavigationMixin } from ‘lightning/navigation’;
export default class NavigateFromLwc extends NavigationMixin(LightningElement) {
@track msg_var;
handleChange(event){
this.msg_var = event.target.value;
}
handleClick(){
this[NavigationMixin.Navigate]({
type : ‘standard component’, attributes : {
componentName : “c navigateToAura”
},
state : {
c orderId : this.msg_var
},
});
}
}
.
<template>
<lightning-input class=”slds-size_2-of-12″ type=”text” onchange={handleChange}></lightning-input>
<lightning-button label=”Navigate to Aura” onclick={handleClick}></lightning-button>
</template>
Aura
<aura:component implements=”lightning:isUrlAddressable, lightning:hasPageReference,
flexipage:availableForAllPageTypes”
access=”global”>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<aura:attribute name=”orderId” type=”String”/>
value using set in init : {!v.orderId}
<br/>
value using pageReference : {!v.pageReference.state.c orderId}
</aura:component>
({
doInit : function(component, event, helper) {
var pageRef = component.get(“v.pageReference”);
// alert(pageRef.state);
var msg = pageRef.state.c orderId; component.set(“v.orderId”,msg);
}
})
19. What are Event.bubbles and Event.composed?
Event.bubbles: A Boolean value indicating whether the event bubbles up through the DOM or not. Defaults to false.
Event.composed: A Boolean value indicating whether the event can pass through the shadow boundary. Defaults to f alse.
20. Name a few LWC target Configs.
lightning AppPage
lightning HomePage
lightning RecordPage
lightning Tab lightning
FlowScreen
21. How to call a controller method in javascript?
var action=component.get(“methodname”)
22. What is the use of do init method?
It will be loaded on loading of lightning application
It is pretty much similar to constructor.
23. What is the use of attribute?
Attribute is like a variable. If you want to store the data
then we should go with attribute.
24. What is bounded expression?
We will able to get the new value.
syntax
{!v.attribute name}
25. What is unbounded expression?
we will not able to get the new value.
syntax
{#v.attributename}
26. What is the use of AuraEnabled annotation?
if you want to access the data in the lightning application
then we should write AuraEnabled annotation
->we will not able to access the data in lightning application without auraEnabled
27. What is the use of global action in the controller?
$A.enqueueAction(action)
It’s used to execute the server side logic
28. can we write void method in lightning?
No
29. How to get the response from callback?
reponse.getReturnValue()
30. How to get the state in controller?
response.getState()
31. Why helper method is a best practice in lightning?
It’s used for reusability
32. What is reusability in lightning?
We will able to access the value from one method to other method.
method1:function(component)
{
var name=’sfdcscenarios’;
this.method2(name);
},
method2:function(name)
{
//reusability
console.log(‘name from method1 is’+name);
}
33. Does it happens in the controller?
No. It will happens in the helper
34. What framework lightning will follow?
aura framework
35. How many tags we have in lightning?
ui tags
Lightning tags
36. What is exends="force:slds"?
It will acquire the properties of lightning design system?
37. What happens if you don't put exends="force:slds" in lightning application?
It will look like normal html file
38. What is v in attribute?
It’s a value provider. If you want to access the value from the attribute then we will
use {!v.attrname} or{#v.attributename}
39. When we should go with unbounded expression?
If you are simply dealing with read operation then we should go with
unbounded expression
40. Does Reusability is possible in the controller?
No
41. What is Lightning component bundle?
component
controller
helper
design
svg
Documentation
style
renderer
42. What is renderer?
If you want to override the standard rendering mechanism in salesforce lightning
then we should go with renderer
43. What are the events in salesforce lightning?
component event
application event
system events
44. Which interface should you use if you want to get the id of the record from the record Detail page?
force:hasRecordId
45. Can we call one component to another component?
yes we can call
46. How to call lightning component in visual force page?
<aura:application access=”GLOBAL” extends=”ltng:outApp”>
<aura:dependency resource=”c:FlipCard”/>
</aura:application>
*Add the <apex:includeLightning /> component to your Visualforce page.
*Reference a Lightning app that declares your component dependencies with $Lightning.use().
*Write a function that creates the component on the Visualforce page with
$Lightning.createComponent().
47. How to pass the parameters in controller?
action.setParams
48. How to Navigate From One Lightning Component to Another Lightning Component?
e.force:navigateToComponent
49. How to go from one lightning page to another lightning page through a click?
var urlEvent = $A.get(“e.force:navigateToURL”);
50. Best practices for lightning?
Do not put so many console logs.
Make the use of Salesforce lightning design system for consistent ui design.
Make the use of Lightning data services to avoid server calls for Dml operations.
Use unbounded expressions if the data across components are not required to be in synch.
Before you decide to use a third-party library in a Lightning component, you should reevaluate if you really need that library. DOM manipulation libraries (like jQuery) and UI libraries (like Bootstrap or jQuery UI) in particular may no longer be needed when working with the Lightning Component Framework.
When possible, use the (sprite-based) Lightning Design System icons (using <lightning:icon> and <lightning:buttonIcon>) instead of custom icons.
Salesforce is slower for users who have debug mode enabled. So, do not enable in Production.
When appropriate consider passing the data in different components(using attributes,events or methods) rather than retrieving the same data in different components.
When making a call to the server limit the columns and rows of the result set. Only select the columns you need.
Set a limit on the query and provide paging mechanisum if needed. Don’t return huge number of rows at once.
consider combining several requests(actions) in a single composite request.
Cache the data when possible.
Caching the data at the client side can significantly reduce the number of server round trips and improve the performance tips. A storable action is a server action whose response is stored in
the in the client cache so that subsequent requests for the same server method with the same set of arguments can be accessed from that cache.
Try to limit number of event handlers in your Lightning component. As you can guess, multiple event handler means your component would be busy in listening event changes resulting in performance overload.
Always try to use a component event instead of an application event, if possible. Component events can only be handled by components above them in the containment hierarchy so their usage is more localized to the components that need to know about them. Application events are best used for something that should be handled at the application level, such as navigating to a specific record. Application events allow communication between components that are in separate parts of the application and have no direct containment relationship.
Use helper methods.
To improve runtime performance, set @AuraEnabled(cacheable=true) to cache the method results on the client. To set cacheable=true, a method must only get data. It can’t mutate data.
51. Where we can use Lightning Components?
We can use Lightning Components in the following places:
Drag-and-drop Components in the Lightning App Builder and Community Builder.
Add Lightning Components to Lightning Pages.
Add Lightning Components to Lightning Experience Record Pages.
Launch a Lightning Component as a Quick Action
Override Standard Actions with Lightning Components
Create Stand-Alone Apps
52. Which interface should you use if you want your component to be available for all pages?
You can use the flexipage:availableForAllPageTypes interface.
53. Which interface should you use if you want to override a standard action?
You will need to use the Lightning:actionOverride interface.
54. Which interface should you use if you want your component to be available only on the record home page?
You will need to use the flexipage:availableForRecordHome interface.
55. Which interface should you use if you want your component to be used a tab?
You will need to use the force:appHostable interface.
56. Which interface should you use if you want your component to be used a quick action?
You will need to use the force:lightningQuickAction interface.
57. How can you call the controller method based on a component load?
“<aura:handler name=”init” value=”{!this}” action=”{!c.doInitialization}”/
58. What are component events?
Component events are events which are fired by child components and handled by the parent
component. We can make use of this event when we need to pass a value from a child
component to parent component.
59. What are application events?
Application events can be fired from any component and can be handled by any component.
They do not require any kind of relationship between the components, but these components
must be a part of a single application.
60. What is force:recordData, and what are its advantages?
force:recordData is a standard controller of a Lightning Component. We can perform an operation such as creating a record, editing a record,deleting a record using force:recordData. If we are using force:recordData, it identifies and eliminates the duplicate request going to the server if they are requesting for the same record data (which in turn improves performance).
61. What are the phases in component events propagation?
There are two phases in component event propagation.
Bubble Phase
Capture Phase
62. What are the phases in application events propagation?
Bubble Phase
Capture Phase
Default Phase
63. How do the bubble phase and the capture phase propagate?
Bubble phase: propagates from Bottom to Top.
Capture phase: propagates from Top to Bottom.
64. What is Aura:method in Salesforce Lightning component?
we can directly call a child component controller method from the parent component controller method using Aura:method. This method is used to pass value from parent component controller to the child component controller.
65. What is Lightning:overlayLibrary in Salesforce Lightning component?
To create a modal box we use Lightning:overlayLibrary.To use Lightning:overlayLibrary in component we need to include tag <lightning:overlayLibrary aura:id=”overlayLib”/> in component, here aura:id is unique local id. Modal has header,body and footer which are customizable.
66. what are the lightning webcomponent bundle?
LWC bundle contains an HTML file, a JavaScript file, and a metadata configuration file and these files are created once we create a Lightning web component.We can also create a .css file for styling purpose and We can also create SVG file for the purpose of displaying icon.
67. What are the types of decorators in lightning web components?
We have 3 Decorators in Lightning Web Components.
1) @api
2) @track
3) @wire
68. Is there any limit on how many component to have in one Application ?
there is no limit.
69. Is Lightning Components replacing Visualforce ?
No.
70. What are the advantages of lightning ?
The benefits include an out-of-the-box set of components, event-driven architecture, and a framework optimized for performance.
Out-of-the-Box Component Set -: Comes with an out-of-the-box set of components to kick start building apps. You don’t have to spend your time optimizing your apps for different devices as the components take care of that for you.
Rich component ecosystem-: Create business-ready components and make them available in Salesforce1, Lightning Experience, and Communities.
Performance – :Uses a stateful client and stateless server architecture that relies on JavaScript on the client side to manage UI, It intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactions of your apps.
Event-driven architecture -: event-driven architecture for better decoupling between components.
Faster development – : Empowers teams to work faster with out-of-the-box components that function seamlessly with desktop and mobile devices.
Device-aware and cross browser compatibility – : responsive design,supports the latest in browser technology such as HTML5, CSS3, and touch events.
71. How can we deploy components to production org ?
we can deploy component by using managed packages, Force.com IDE, Force.com Migration Tool or Change Sets.
72. How we can access Custom Label in Lightning?
Syntax : $A.get(“$Label.namespace.labelName”)
73. How we can use component in the community builder?
Implements “forceCommunity:availableForAllPageTypes” interface on the component.