LIGHTNING AND LWC SCENARIO BASED QUESTIONS
1. When we should use aura: handler in Salesforce lightning component? Can you write Syntex?Ans: 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?Ans: No, we can’t able to access
3. Can we access one javascript helper method on another helper method in lightning Component?Ans: Yes, We can able to access it.
4. How to add a lightning button in Salesforce Lightning?Ans: Use the lighting button tag to add the button in a component. Example: <lightning:button variant=”base” label=”Base” title=”Base action” onclick=”{!c.handleClick}”/>
5. What is LDS IN salesforce lightning?Ans: 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 * A shared cache is used by all standard and custom components * Auto notification to all components * Supports offline in Salesforce 1
6. How to display an alert message in the lightning 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');
}})
7. How to set the value to attribute, can you write a 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)
}
})
8. How to display the data in the 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>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);
}})
Order of execution in lightningstep 1: we can call 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.
9. 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 /> </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/> </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?Ans: 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?Ans: var appEvent = $A.get(“e.c:aeEvent”);15.What is @AuraEnabled(cacheable=true)Ans:If you want to access the data then we should include this annotation to an apex class method.
16. What is wire?Ans: 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?Ans: 1. html 2. javascript files 3. meta data file(.xml)
18. what are the decoraters in lwc ?Ans: @Api @Track @Wire
19.How to call the apex class in lwc?Ans: Import fetchAccounts from ‘@salesforce/apex/AccountDeleteController.fetchAccounts’;
20. How to call the apexclass method in javascript file?Ans: @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?Ans: import { refreshApex } from ‘@salesforce/apex’;
22. What is aura method in lightning?Ans: 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();
}
})
24.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();
}
})
No comments:
Post a Comment