Lightning and Lwc interview questions
1.How to call a controller method in javascript?
var action=component.get("methodname")
2.what is the use of do init method?
It will be loaded on loading of lightning application
It is pretty much similar to constructor.
3.What is the use of attribute?
Attribute is like a variable. If you want to store the data
then we should go with attribute.
4.What is bounded expression?
We will able to get the new value.
syntax =====
{!v.attribute name}
5.What is unbounded expression?
we will not able to get the new value.
syntax ======
{#v.attributename}
6.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
7.What is the use of global action in the controller?
$A.enqueueAction(action)
It's used to execute the server side logic
8.can we write void method in lightning?
No
9.How to get the response from callback?
reponse.getReturnValue()
10.How to get the state in controller?
response.getState()
11.Why helper method is a best practice in lightning?
->It's used for reusability
12.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);
}
13.Does it happens in the controller?
No. It will happens in the helper
14.what framework lightning will follow?
aura framework
15.How many tags we have in lightning?
ui tags
Lightning tags
16.what is exends="force:slds"?
It will acquire the properties of lightning design system?
17.What happens if you don't put exends="force:slds" in lightning application?
It will look like normal html file
18.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}
19.When we should go with unbounded expression?
If you are simply dealing with read operation then we should go with
unbounded expression
20. does Reusability is possible in controller?
No
21.What is Lightning component bundle?
component
controller
helper
design
svg
Documentation
style
renderer
22.what is renderer?
If you want to override the standard rendering mechanism in salesforce lightning
then we should go with renderer
23.what are the events in salesforce lightning?
component event
application event
system events
24..Which interface should you use if you want to get the id of the record from the record Detail
page?
force:hasRecordId
25. can we call one component to another component?
yes we can call
26.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().
27.how to pass the parameters in controller?
action.setParams
28.How to Navigate From One Lightning Component to Another Lightning Component?
"e.force:navigateToComponent"
29. How to go from one lightning page to another lightning page through a click?
var urlEvent = $A.get("e.force:navigateToURL");
30.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.
30. 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
31. Which interface should you use if you want your component to be available for all pages?
You can use the flexipage:availableForAllPageTypes interface.
32. Which interface should you use if you want to override a standard action?
You will need to use the Lightning:actionOverride interface.
33.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.
34.Which interface should you use if you want your component to be used a tab?
You will need to use the force:appHostable interface.
35.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.
36.How can you call the controller method based on a component load?
"<aura:handler name="init" value="{!this}" action="{!c.doInitialization}"/
37. 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.
38. 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.
39. 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).
40.What are the phases in component events propagation?
There are two phases in component event propagation.
Bubble Phase
Capture Phase
41. What are the phases in application events propagation?
Bubble Phase
Capture Phase
Default Phase
42.How do the bubble phase and the capture phase propagate?
Bubble phase: propagates from Bottom to Top.
Capture phase: propagates from Top to Bottom.
43.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.
44.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.
45. 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.
46.What are the types of decorators in lightning web components?
We have 3 Decorators in Lightning Web Components.
1) @api
2) @track
3) @wire
47. Is there any limit on how many component to have in one Application ?
there is no limit.
48. Is Lightning Components replacing Visualforce ?
No.
49. 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.
50. 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.
51. How we can access Custom Label in Lightning?
Syntax : $A.get(“$Label.namespace.labelName”)
52. How we can use component in the community builder?
Implements “forceCommunity:availableForAllPageTypes” interface on the component.
LIGHTNING AND LWC SCENARIO BASED QUESTIONS
1. When we should use aura:handler in Salesforce lightning component ? can you write
syntex?
in lightning component <aura:handler... > is used for handle standard and custom events
we can create our custom lightning event and also use standard events, standard lightning
event is automatically fired when related event is fire
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
2.Can we access one javascript controller method on another controller method in salesforce
lightning component ?
No, we can’t able to access
3.Can we access one javascript helper method on another helper method in lightning
Component ?
Yes,We can able to access.
4.How to add a lightning button in Salesforce Lightning ?
use lighting button tag to add the button in component.
Example:
<lightning:button variant=”base” label=”Base” title=”Base action” onclick=”{! c.handleClick
}”/>
5. what is LDS IN salesforce lightning?
Use Lightning Data Service to load, create, edit, or delete a record in your component
without requiring Apex code. Lightning Data Service handles sharing rules and field-level
security for you. In addition to simplifying access to Salesforce data, Lightning Data Service
improves performance and user interface consistency.
No need to write any Apex class
No need to write SOQL
Field level security and record sharing is inbuilt
CRUD operation supported
Shared cache is used by all standard and custom components
Auto notification to all components
Supports offline in Salesforce 1
6.how to display success,warning,error,info message lightning page? can you write sample
code?
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
<div>
<lightning:button label="Information"
variant="brand"
onclick="{!c.showInfo}"/>
<lightning:button label="Error"
variant="destructive"
onclick="{!c.showError}"/>
<lightning:button label="Warning"
variant="neutral"
onclick="{!c.showWarning}"/>
<lightning:button label="Success"
variant="success"
onclick="{!c.showSuccess}"/>
</div>
</aura:component>
({
showInfo : function(component, event, helper) {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title : 'Info',
message: 'This is an information message.',
duration:' 5000',
key: 'info_alt',
type: 'info',
mode: 'dismissible'
});
toastEvent.fire();
},
showSuccess : function(component, event, helper) {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title : 'Success',
message: 'This is a success message',
duration:' 5000',
key: 'info_alt',
type: 'success',
mode: 'pester'
});
toastEvent.fire();
},
showError : function(component, event, helper) {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title : 'Error',
message:'This is an error message',
duration:' 5000',
key: 'info_alt',
type: 'error',
mode: 'pester'
});
toastEvent.fire();
},
showWarning : function(component, event, helper) {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title : 'Warning',
message: 'This is a warning message.',
duration:' 5000',
key: 'info_alt',
type: 'warning',
mode: 'sticky'
});
toastEvent.fire();
}
})
7. 1.How to display an alert message in lightnig component can you write sample code?
<aura:component >
<lightning:button label="Submit" variant="brand" onclick="{!c.handleClick}"/>
</aura:component>
({
handleClick : function(component, event, helper) {
alert('ALert message');
}
})
8.How to set the value to attribute , can you write simple example?
<aura:component >
<aura:attribute name="booleanvar" type="boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
value is:{!v.booleanvar}
</aura:component>
({
doInit:function(component,event,helper){
component.set("v.booleanvar",true)
}
})
9. How to display the data in lightning component? can you write the code?
public class contactcontroller {
@AuraEnabled
public static list<contact> condata()
{
list<contact> col=[select id,LastName,Email,Phone from contact ];
return col;
}
}
<aura:component controller="contactcontroller">
<aura:attribute name="conlist" type="list"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr >
<td>
LastName
</td>
<td>
</td>
<td>Phone</td>
</tr>
<aura:iteration items="{!v.conlist}" var="con">
<tr>
<td>
{!con.LastName}
</td>
<td>
{!con.Email}
</td>
<td >
{!con.Phone}
</td>
</tr>
</aura:iteration>
</table>
</aura:component>
({
doInit :function(component, event, helper)
{
var action=component.get("c.condata");
action.setCallback(this,function(response){
var responseval=response.getReturnValue();
var state=response.getState();
console.log('state is'+state);
if(state==='SUCCESS')
{
component.set("v.conlist",responseval);
}
else
{
console.log('unable to process the data');
}
});
$A.enqueueAction(action);
}
})
order of execution in lightning
step 1:
we can calling the controller method in javascript
var action=component.get("c.displayContacts");
step 2:
we can pass the parameters
action.setParams({
});
step 3:
$A.enqueueAction(action) sends the request the server. More precisely, it adds the call to
the queue of asynchronous server calls.
$A.enqueueAction(action);
step 4:
action.setCallback() sets a callback action that is invoked after the server-side action returns.
10..How to display the contact records based on AccountId can you write code lightning?
public class accconbaes {
@AuraEnabled
public static List<Account> displayAccounts()
{
List<Account> acclist=[select Id,Name,Site from Account LIMIT 10];
return acclist;
}
@AuraEnabled
public static List<Contact> displayContacts(String searchkey)
{
System.debug('Value of the AccountId'+searchkey);
List<Contact> conlist=[select Id,AccountId,LastName,Email from Contact where
AccountId=:searchkey];
return conlist;
}
}
<aura:component controller="accconbaes">
<aura:attribute name="acclist" type="list"/>
<aura:attribute name="conlist" type="list"/>
<aura:attribute name="isDisplay" type="boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr>
<td>Action</td>
<td>Id</td>
<td>Name</td>
</tr>
<aura:iteration items="{!v.acclist}" var="acc">
<tr>
<td>
<lightning:input type="radio" name="radioButon" value="{!acc.Id}"
onchange="{!c.showData}"/>
</td>
<td>
{!acc.Id}
</td>
<td>
{!acc.Name}
</td>
</tr>
</aura:iteration>
</table>
<aura:if isTrue="{!v.isDisplay}">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr>
<td>Id</td>
<td>LastName</td>
</tr>
<aura:iteration items="{!v.conlist}" var="con">
<tr>
<td>
{!con.Id}
</td>
<td>
{!con.LastName}
</td>
</tr>
</aura:iteration>
</table>
</aura:if>
</aura:component>
({
doInit : function(component, event, helper) {
var action=component.get("c.displayAccounts");
action.setCallback(this,function(response){
var state=response.getState();
var responseval=response.getReturnValue();
if(state==='SUCCESS')
{
component.set("v.acclist",responseval);
}
else
{
alert('unable to process the request');
}
});
$A.enqueueAction(action);
},
showData:function(component,event,helper){
var currentAccountId=event.getSource().get("v.value");
component.set("v.isDisplay",true);
var action=component.get("c.displayContacts");
action.setParams({
searchkey:currentAccountId
});
action.setCallback(this,function(response){
var state=response.getState();
var responseval=response.getReturnValue();
if(state==='SUCCESS')
{
component.set("v.conlist",responseval);
}
else
{
alert('unable to process the request');
}
});
$A.enqueueAction(action);
}
})
<aura:application extends="force:slds" >
<c:acccon></c:acccon>
</aura:application>
11.Dynamic search in salesforce lightning component,can you write example?
public class accconbaes {
@AuraEnabled
public static List<Account> displayAccounts(String searchkey)
{
String searchword='%'+searchkey+'%';
System.debug('userinput'+searchword);
List<Account> returnlist=new List<Account>();
for(Account acc:[select Id,Name,Site from Account where Name like:searchword])
{
returnlist.add(acc);
}
return returnlist;
}
}
<aura:component controller="accconbaes">
<aura:attribute name="accName" type="String"/>
<aura:attribute name="acclist" type="list"/>
<aura:attribute name="isDisplay" type="boolean" default="false"/>
<lightning:input type="text" label="AccountName" value="{!v.accName}"
onchange="{!c.handleSearch}" style="width:20%;"/>
Records size:{!v.acclist.length}
<aura:if isTrue="{!v.isDisplay}">
<aura:if isTrue="{!v.acclist.length!=0}">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr>
<td>Name</td>
</tr>
<aura:iteration items="{!v.acclist}" var="acc">
<tr>
<td>
{!acc.Name}
</td>
</tr>
</aura:iteration>
</table>
</aura:if>
</aura:if>
</aura:component>
({
handleSearch : function(component, event, helper) {
component.set("v.isDisplay",true);
var action=component.get("c.displayAccounts");
action.setParams({
searchkey:component.get("v.accName")
});
action.setCallback(this,function(response){
var state=response.getState();
var responval=response.getReturnValue();
if(state==='SUCCESS')
{
component.set("v.acclist",responval);
}
else
{
alert('Error in processing the data');
}
});
$A.enqueueAction(action);
}
})
<aura:application extends="force:slds" >
<c:acccon></c:acccon>
</aura:application>
12.How to delete the records with a button in lightning , can you write code?
public class AccountDelController
{
@AuraEnabled
public static List<Account> displayAccounts()
{
List<Account> acclist=[select Id,Name from Account];
return acclist;
}
@AuraEnabled
public static List<Account> deleteAccRecord(String accId)
{
System.debug('AccountId'+accId);
Account acc=[select Id,Name from Account where Id=:accId];
delete acc;
return displayAccounts();
}
}
<aura:component controller="AccountDelController">
<aura:attribute name="acclist" type="list"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr>
<td><b>Id</b></td>
<td><b>Name</b></td>
<td><b>Action</b></td>
</tr>
<aura:iteration items="{!v.acclist}" var="acc">
<tr>
<td>{!acc.Id}</td>
<td>{!acc.Name}</td>
<td>
<lightning:button label="Delete" value="{!acc.Id}" onclick="{!c.handleDelete}"/>
</td>
</tr>
</aura:iteration>
</table>
</aura:component>
({
doInit : function(component, event, helper) {
var action=component.get("c.displayAccounts");
action.setCallback(this,function(response){
var state=response.getState();
var responsval=response.getReturnValue();
if(state==='SUCCESS')
{
component.set("v.acclist",responsval);
}
else
{
alert('unable to process the data');
}
});
$A.enqueueAction(action);
},
handleDelete:function(component,event,helper){
var currentRecordId=event.getSource().get("v.value");
//alert(currentRecordId);
var action=component.get("c.deleteAccRecord");
action.setParams({
accId:currentRecordId
});
action.setCallback(this,function(response){
component.set("v.acclist",response.getReturnValue());
});
$A.enqueueAction(action);
}
})
<aura:application extends="force:slds">
<c:AccountDeleteComponent/>
</aura:application>
13. Events in ligtning can you write component event example?
child to parent (component composition)
step 1:we need to create event
demoEvent
==========
<aura:event type="COMPONENT">
<aura:attribute name="Info" type="String"/>
</aura:event>
childComponent
==============
<aura:component>
//This is the way how we will regitering the event in component
//You can give any name while registering the event but the type should be name of the
event
<aura:registerEvent name="sampleDemo" type="c:demoEvent"/>
<lightning:button label="Submit" onclick="{!c.handleClick}"/>
</aura:component>
({
handleClick:function(component,event,helper)
{
//getting the event properties
var comEvt=component.getEvent("sampleDemo");
//setting the value to the attribute
comEvt.setParams({
"Info":"Welcome to events"
//Info is the attribute name
//welcome to events in the value to the attribute
});
//fire is used to fire the event.
//If you don't fire the event then it won't work
comEvt.fire();
}
})
Parent component:
=================
<aura:component>
<c:childComponent/>
<aura:handler event="sampleDemo" type="c:demoEvent" action="{!c.handleEvent}"/>
</aura:component>
({
handleEvent:function(component,event,helper)
{
//getParam is used to get the value from child component(event attribute)
var val=event.getParam("Info");
alert(val);
}
})
<aura:application>
<c:parentComponent/>
</aura:application>
14.Application Event in salesforce lightning ,can you write syntex?
var appEvent = $A.get("e.c:aeEvent");
15.What is @AuraEnabled(cacheable=true)
If you want to access the data then we should include this annotation to an apex class
method.
16.What is wire?
If you are dealing with apex class methods then we should use wire property
17.How many files will generated when you create a LWC component?
1.html
2.javascript files
3.meta data file(.xml)
18. what are the decoraters in lwc ?
@Api
@Track
@Wire
19.How to call the apex class in lwc?
import fetchAccounts from '@salesforce/apex/AccountDeleteController.fetchAccounts';
20. How to call the apexclass method in javascript file?
@Wire
Imperative method
.then(result=>{
this.records=result;
this.error=undefined;
})
.catch(error=>{
this.error=error;
this.records=undefined;
});
21.How to refresh the page in Lwc?
import { refreshApex } from '@salesforce/apex';
22. what is aura method in lightning?
This enables you to directly call a method in a component’s client side controller instead of
firing and handling a component event.
Using aura method simplifies the code needed for a parent component to call a method on a
child component that it contains.
23.How to call a method in salesforce lightning auramethod?
<aura:component >
<aura:method name="sampleMethod" action="{!c.fireMethod}">
<aura:attribute name="firstName" type="String" default="Naveen"/>
</aura:method>
</aura:component>
({
fireMethod : function(component, event, helper) {
var params=event.getParam("arguments");
if(params){
var param1=params.firstName;
alert('Yes I am in child component'+param1);
}
}
})
<aura:component >
<c:ChildComponent77 aura:id="childComp"/>
<lightning:button label="submit" onclick="{!c.handleClick}"/>
</aura:component>
({
handleClick : function(component, event, helper) {
var childcmp=component.find("childComp");
childcmp.sampleMethod();
}
})
No comments:
Post a Comment