Wednesday, December 14, 2022

LIGHTNING AND LWC SCENARIO BASED QUESTIONS

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

Understanding Wire vs Imperative Apex Method Calls in Salesforce Lightning Web Components (LWC)

Understanding Wire vs Imperative Apex Method Calls in Salesforce Lightning Web Components (LWC) Introduction: Salesforce Lightning Web ...