Scenario Based - LWC and Lightning - Interview
Scenario Based - LWC and Lightning - Interview
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
2.Can we access one javascript controller method on another controller method in salesforce
lightning component ?
3.Can we access one javascript helper method on another helper method in lightning
Component ?
Example:
<lightning:button variant=”base” label=”Base” title=”Base action” onclick=”{! c.handleClick
}”/>
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.
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>
({
}
})
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?
<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>
Email
</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);
}
})
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?
}
}
<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);
}
})
}
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);
}
})
12.How to delete the records with a button in lightning , can you write code?
<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>
childComponent
==============
<aura: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"/>
({
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>
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)
@Api
@Track
@Wire
@Wire
Imperative method
.then(result=>{
this.records=result;
this.error=undefined;
})
.catch(error=>{
this.error=error;
this.records=undefined;
});
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.
</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();
}
})