10 Most Important Interview Questions for Salesforce – Aura Components

1. What is difference between the way we implement VF Page and Lightning.

Visualforce Page:
VF page framework follows page-centric model as it sends that request to the Salesforce servers and then reloads the entire page with the new state of the UI(using view state) In VF page most of the processing takes place on the server-side. VF page was developed keeping in mind the desktop websites.

Lightning Component :
Aura Component framework follows App-Centric Model as most of the work is done at client side and call to server is made only when its essentially required like updating records etc. Aura Component framework was built keeping the mobile first approach.

2. What are different files in Aura Component ?

• Component: It contains HTML like markup which is responsible for displaying UI components.
• Controller: It handles the client side events and behaviour for UI components.
• Helper: Helper file is used to write common logic which can be used by different controller methods.
• Style: We can add CSS for UI components in this file.
• Documentation: We can add comments, components description here.
• Renderer: This file contains the default rendering behaviour of a component.
• SVG: We can plae SVG icons here such as the icon which gets displayed before the component name in the Lightning App Builder.
• Design: This component controls which attribute we can expose to tools like the Lightning App Builder. It helps with component re-usability.

3. What are events in Aura components ?

Events are used to provide communication between various components in Aura applications, for example passing arguments etc.

There are diffrent types of events in Aura Components :

System events like init events which are automatically triggered during component life cycles.

Component Events, Application events.

4. What are difference between Component events and Application events in Aura Components?

Component Events :

A component event can either be handled by the component itself or it can be handled by any other component which is present in the hierarchy above the component.For Example, if we have two components say parent and child, and we want to pass paramters from child to parent than, we can use component events for this.

Application Events :

Application events can be fired from any component and they can be handled by any component. No relation is required between the components, but these components must be a part of a single application. These events are essentially a traditional publish-subscribe model.

5. How to include Aura Component inside VF page?

1. Add <apex:includeLightning/> at the beginning of your page
2. Create an aura:application and add dependencies by extending lightning out.

<aura:application access="GLOBAL" extends="ltng:outApp">     <c:demoComp/>
</aura:application>

3. Use Lightning Application inside VF page and create the component inside it.

<apex:page standardController=”Account”>        
    <apex:includeLightning />
    <script>
        $Lightning.use(“c:demoApp”, function() {
            $Lightning.createComponent(
                “c:demoComp”,
                {},
                “test”,
                function(cmp) {
                    console.log(“Component is created!”);
              
                });
            });        
      </script>
</apex:page>

6. What are bound and unbound expression in Aura Components?

There are two ways in which we can use expression in aura components and also pass value to child component attriutes from parent components.

Below is the bound expression. If you pass the value this way, then any change to value in child component is also reflected in the parent ccomponent.

<c:child childAttr="{!v.parentAttr}" />

Below is the unbound expression. If you pass the value this way, then any change to value in child component is not reflected in the parent ccomponent.

<c:child childAttr="{#v.parentAttr}" />

7. What are Aura Methods in Aura Components?

For passing the values from child to parent or executing parent component’s logic based on certain event in child we can use component events.

But lets say, we want to pass paramters to child component from parent or want to execute certain logic of child compoent based on certain events in parent component, we can use Aura Methods for this.

ChildComponent.cmp

<aura:component>
    <aura:method name="childMethod" action="{!c.handleMethod}" access="public">
        <aura:attribute name="firstName" type="String" default="Salesforce"/> 
    </aura:method>
</aura:component>

ChildComponentController.js

({
    handleMethod : function(component, event) {
        var params = event.getParam('firstName');
        if (params) {
			console.log('First Name from parent is #' + params);
        }
    }
})

parentCmp.cmp

<aura:component>  
        <c:ChildComponent aura:id="childCmp"/>
        <lightning:button variant="brand" label="Call Child Method" onclick="{!c.callAuraMethod}" />
</aura:component>

parentCmpController.js

({
    callAuraMethod : function(component, event, helper) {
        var childComponent = component.find("childCmp");
        var message = childComponent.childMethod();
    }
})

8. If we have two components say parent and child in Aura, whose init event is fired first?

Always child init gets fired first. However, if you want to fire parent’s init first you can achieve it.

Check below link for more detailed answer on this:

https://knowledgepredator.com/2020/05/30/aura-init-execution-order/

9. Can We have two methods with same name in Controller.js and helper.js files in Aura Components?

Surprisingly, yes we can have two methods with same name in either controller or helper files. Check below link for more detailed answer on this.

https://knowledgepredator.com/2020/06/08/aura-components-interesting-scenarios/

10. What are different interfaces in Aura Components ?

Lightning Interfaces uses to allow components to be used in different contexts or enable the lightning component to receive extra context data. A Lightning component can use multiple interfaces.

Examples:

flexipage:availableForAllPageTypes – component to be available for all pages.

flexipage:availableForRecordHome – component to be available only on the record home page.

force:lightningQuickAction – component to be used as quick action.

Aura Component : Infinte Loop and Other Scenarios

If you have worked with aura components,you know we have component file, controller.js,helper.js etc. Also we have apex class with aura enabled methods where server side logic is present.

We are going to discuss some interesting stuffs here.

Calling one Controller method from another

Have you ever tried calling one method of controller file from another method in controller file itself ?
You may get into a situation where you may have to do . Definitely it is not the good practice to do it. But who cares, we are going to discuss it anyway.

We will create an aura component, lets name it as DemoBlog. We will add following code to Component and controller files:

DemoBlog.cmp

<aura:component controller="parentApex">
	
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:button variant="brand" label="Scenario 2" title="Brand action" onclick="{! c.sourceControllerMethod}" /> 

</aura:component>

DemoBlogController.js

DemoBlogController.js
({
    doInit : function(component, event, helper) {
        console.log('Inside init method');
        
    },
    sourceControllerMethod : function (component, event, helper){
        var targetMethod = component.get('c.targetControllerMethod')
        $A.enqueueAction(targetMethod);
    },
    targetControllerMethod : function (component, event, helper){
        console.log('target method called');  
    }    
})

We have created a button on click of which we have called a sourceControllerMethod method. Now our aim was to call targetControllerMethod from sourceControllerMethod.
We are accessing the targetControllerMethod using component.get(‘c.targetControllerMethod’).
And then using $A.enqueueAction(targetMethod) we are calling targetControllerMethod.
Now we will add our component into aura application and preview App.

If you click on “Scenario 2” button it will make call to targetControllerMethod evantually and display the console log in it.

So we will move on to our next point.

Infinite Loop Scenario

Have you ever got stuck in infinite loop unintentionally while developing aura components? lets see a situation where you can:

We will create an aura component, lets name it as DemoBlog. We will add following code to Component, Controller, Helper fields and Apex Classes:

DemoBlog.cmp

<aura:component controller="parentApex">
	
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:button variant="brand" label="Infinite Loop" title="Brand action" onclick="{! c.infiniteLoop}" />

</aura:component>

DemoBlogController.js

({
    doInit : function(component, event, helper) {
        console.log('Inside init method');
        
    },
    infiniteLoop : function (component, event, helper){
        alert('infiniteLoop controller method called');  
        helper.handleinfiniteLoop(component,event,helper);
        
    }  
})

DemoBlogHelper.js

({
	  handleinfiniteLoop : function (component, event, helper) {
         alert('into helper method before server call');
         var action = component.get('c.infiniteLoop');
         action.setCallback(this, function(response) {
             var state = response.getState();
             if (state === "SUCCESS") {
                 alert('return from server');
             }
         });
         $A.enqueueAction(action);
    }
})

parentApex

public class parentApex {
    @AuraEnabled
    public static string infiniteLoop(){
        return null;
    }   
}

Now we will add our component into aura application and preview the Application.If you click on “Infinite Loop” button , surprisingly you will notice never stoping alerts of controller and helper methods popping up one after another.

Why ? If you have observed carefully, the name of both controller file method and apex class method is same. (infiniteLoop in above example).
So instead of calling the server side method from helper, it ends up calling controller side method. (Notice the syntax for calling one controller method from another. Quite Similar? ).

So be careful while naming the methods from next time !

Aura Components: Two methods with same name in controller or helper files.

If you have worked with aura components,you know we have component file, controller.js, helper.js etc. Also we have apex class with aura enabled methods where server side logic is present.

We are going to discuss some interesting stuff here !

Have you ever tried having two methods with same name in controller.js file or helper.js file in your aura components?

Do you think salesforce will allow me to save the file in such scenarios ?

Or if it allows, will it give some error on load of component or if that method is called from some where?

Lets check this.

We will create an aura component, lets name it as DemoBlog. We will add following code to Component and controller files:

DemoBlog.cmp

<aura:component controller="parentApex">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
<lightning:button variant="brand" label="Scenario 1" title="Brand action" onclick="{! c.handleClickCtrl}" />
    
</aura:component>

DemoBlogController.js

({
    doInit : function(component, event, helper) {
        console.log('Inside init method');
        
    },
    handleClickCtrl : function (component, event, helper) {
        console.log('Inside handle Click controller first');
    },
    
    handleClickCtrl : function (component, event, helper) {
        console.log('Inside handle Click controller second');
    },
    
})

You will notice we are able to save two functions with same name in controller file.

We have created a button on click of which we have called a handleClickCtrl mtethod. But wait, we have two methods of name handleClickCtrl in controller file. Now we will add our component into aura application and preview the Application. You will notice no error on application loadding !

If you click on Scneario 1 button and observe the console log.You will see the console log statement of second method will be displayed. Again no error !

What do you think is happenig over here. If you will closely observe the format of controller file or helper file in aura component, you will definitely get some idea.

Yes, it is nothing but a json format.
And What happens if you have two keys with same name in JSON string. If you try to access it, it doesn’t give error, moreover, the second key always overrides the first one and if you try to access the key, it will always return value corresponding to second key.

{name: “Demo”, age: 31, city: “New York”,name :”Demo2″} – This is valid JSON.

Similarly, we can have two methods with same name and same paramters in helper.js file also.

Stay tuned for more such interesting scenarios !

Controlling Aura Init execution order in parent-child components

If you have worked with aura components you know we can have one component inside another component. Generally, the outer component is called a parent component and the inner one is called a child component. Also, every component will have a init event which nothing but acts as the constructor for that particular component.This event is automatically fired when an app or component is initialized, prior to rendering.

So our point of discussion here is if we have two components: parent and child inside an application both having init event then which init event is fired first at the time application gets loaded.

Let’s see this with an actual implementation so we’ll go to our developer console and we’ll create two components such that one is inside the other and
place the outer component inside our aura application.

parentAuraCmp.cmp

<aura:component >
    <aura:handler name = "init" value = "{!this}" action = "{!c.doInit}"/>
    <c:childAuraCmp></c:childAuraCmp>   
</aura:component>

parentAuraCmpController.js

({
	doInit : function(component, event, helper) {
		console.log('inside parent Init');
	}
})

ChildAuraCmp.cmp

<aura:component >
	 <aura:handler name = "init" value = "{!this}" action = "{!c.doInit}"/>
</aura:component>

ChildAuraCmpController.js

({
    doInit : function(component, event, helper) {
        console.log('inside child init');
}
})

myApp.app

<aura:application extends = "force:slds">
	<c:parentAuraCmp></c:parentAuraCmp>
</aura:application>

If you preview the myApp.app you will see that child component’s init gets fired first as console log statement of child is displayed first and then parent’s init gets fired and its console log is displayed.

But suppose, I want my parent component’s init method to be executed first and then the child component’s init later. For example, I want to pass some attributes to child component after performing some calculation in my parents init method and that attributes value is used in the child components init method. How can we do that?

It is very easy to handle that, you just have to play with Aura if and conditionally load your child component whenever you feel ready to do it.So let’s implement that.

We will create an attribute with default value as false inside a parent component and wrap child components declaration inside aura if .Now since the default value of this attribute is false that means this component will won’t get instantiate initially now what we’ll do is we’ll make this attribute value as true inside our parent components init method only after all our calculations are performed and we are ready to execute child components init method.

Updated parentAuraCmp.cmp

<aura:component >
    <aura:attribute name = "showChild" type = "Boolean" default = "false"/>
    <aura:handler name = "init" value = "{!this}" action = "{!c.doInit}"/>
    <aura:if isTrue = "{!v.showChild}">
    	<c:childAuraCmp></c:childAuraCmp>
    </aura:if>
</aura:component>

Updated parentAuraCmpController.js

({
	doInit : function(component, event, helper) {
	   console.log('inside parent Init');
           component.set("v.showChild",true);
	}
})

Now, if you will preview the application , console log statement of child is displayed.

This means only when the attribute is made true, child component gets instantiated after which its init gets executed.
This is how we can control the order of execution of init methods in aura components.

If you want to watch demo of this please watch the below video.