Salesforce Lightning Interview Questions & Answers

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,Name" 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.

1. Use @AuraEnabled on Apex class static methods to make them accessible as remote controller actions in your Lightning components.

2. 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.

The Lightning Web Components Interview Questions

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:

1. constructor()
2. connectedCallback()
3. renderedCallback()
4. render()
5. disconnectedCallback()
6. 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 false.

20. Name a few LWC targetConfigs.

lightning__AppPage
lightning__HomePage
lightning__RecordPage
lightning__Tab
lightning__FlowScreen

Summary

I hope this Salesforce Lightning Interview questions & answers will help you to clear your coding interview.