Blog

Top 50+ Salesforce Lightning Interview Questions

• By LearnFrenzy Team
• March 18, 2020
• Salesforce
• 6 Comments
• 14255

Lightning (Salesforce Lightning) is a component-based framework for app development from Salesforce.com that is designed to simplify processes for business users, who typically do not have programming experience.

The Lightning platform allows its users to quickly create and customize applications with drag-and-drop components. By quickly delivering customized and connected applications, your sales, marketing and service teams work more effectively to collaborate and make customers happy.

Lightning Components is a UI framework used to develop web applications for mobile and desktop devices. Our developers use the Lightning Component Framework to create single-page applications with a dynamic and responsive user interface for Lightning platform applications, using the functionality of JavaScript and Apex.

In this blog series, I have tried to cover most of the questions that are frequently asked to a Salesforce Developer in an interview on Salesforce Lightning.

1. What is Lightning Component Framework and What is Aura Framework?

Lightning Component Framework

• Lightning Component framework is a UI framework for developing single page applications for mobile and desktop devices.

• It uses JavaScript on the client side and Apex on the server side.

• Lightning Component framework makes developing apps that work on both mobile and desktop devices far simpler than many other frameworks.

• Lightning component Framework is based on Aura Framework.

Aura Framework

• Aura Framework is design by Salesforce which is open source framework for creating ui components. Available since 1995. Give us ability to create components in 'separation of concerns' fashion. All parts of the component can be developed independently and combined later.

2. What is Lightning App Builder?

Lightning app builder is used to create lightning pages for Salesforce Lightning experience and mobile apps.The Lightning App Builder is a point-and-click tool.Lightning Pages are built using Lightning components which are compact, configurable, and reusable elements that you can drag and drop into regions of the page in the Lightning App Builder.

We can create different types of pages using lightning app builder :

1) App Page

2) Home Page

3) Record Page

3. Lightning component is what type of framework?

Lightning component is a component based framework. It is based on event-driven architecture which allows to communicate between different events.

Lightning events are fired from JavaScript controller actions that are triggered by a user interacting with the user interface.

It can called as a MVCC framework which has two controller, one is client side and other is server side.

4. What are different component bundles in Salesforce Lightning component?

A component bundle contains a component or an app and all its related resources.

Lightning Bundle basically, a collaborative name of the following files:

 Lightning Bundle:

• Component
• Controller JS File (Client-Side JavaScript file)
• Helper JS File (Server-Side JavaScript file)
• Style File (CSS file)
• Documentation
• Renderer
• Design
• SVG (Depreciated)

When you build lightning component you deal with the following component bundles:

 Component: Components are the self-contained and reusable units of an app. File where UI is represented. Showcase stuff contained. Primary file in the resource bundle.

A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you to build apps with sophisticated UIs.

 Controller JS: This is a client-side Controller. A client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions.

It is auto-wired via the naming convention, <ComponentName>Controller.js like: MyFirstAppController.js here MyFirstApp is Component Name.

Each action function takes in three parameters i.e. Component, Event, and Helper.

• Component : The component to which the controller belongs.
• Event : The event that the action is handling.
• Helper : The component’s helper, which is optional. A helper contains functions that can be reused by any JavaScript code in the component bundle.

In the controller we can call function directly from action of component like: {!c.myAction }. We can calls helper function from controller function with helper keyword.

Example :

MyFirstApp.cmp : This is Component of MyFirstApp Bundle

    <ui:button label="My Action" press="{!c.myAction}"/>

MyFirstAppController.js : This is Component Controller of MyFirstApp Component Bundle

({
    myAction : function(component, event, helper) {
        alert("This is my Controller function");
    },
})

Note : we can’t call controller’s function or recursion function itself.

Helper JS: A JavaScript file. Code of controller can be shifted to this file. Helps in making the controller easier to load in the browser. This is called lazy loading design pattern. Heavy code outside that is only invoked when called. This is a best practice method. 

It is auto-wired via the naming convention, Helper.js like: myFirstAppHelper.js here myFirstApp is Component Name. The helper function calls an Apex controller method and queues the action. The Apex method is invoked and data is returned.

A JavaScript callback function is invoked when the Apex method completes. The JavaScript callback function evaluates logic and updates the component’s UI.

Example:

From above example we need to add some statement i.e.

myFirstAppController.js : This is Component Controller of myFirstApp Component Bundle

({
    myAction : function(component, event, helper) {
        //Calling helper function
        helper.myActionHelper(component);
    },
})

myFirstAppHepler.js : This is Component Helper of myFirstApp Component Bundle

({
    
    myActionHelper : function(component, event, helper) {
        alert("This is my Helper function");
    },
})

If we want to reuse function in the component put it into helper. Hepler we can call helper’s function or recursion function itself.

Note : we cannot call Helper’s function directly from action of component like: {!c.myAction}

Style File: A CSS file. Helps in applying unique style for the component. Stylesheets can be applied in 3 different ways - Inline, Internal and External.

Documentation: Helps us create a predefined documentation for all the components that are being developed. This is a best practice.

Renderer: Renderer is client-side Controller. It’s a JavaScript resource that defines the functions for all of the component’s actions. When the component is launching in the browser, if we want to implement a different functionality or behaviour at runtime, we use this.

Example:

myFirstAppRenderer.js : This is Component Renderer of myFirstApp Component Bundle

({
    render : function(component, helper) {
        var ret = this.superRender();
        //Calling Helper function
        helper.myActionHelper(component);
        return ret;
    },
})

Design: Design time/compile time properties of a lightning component. A lightning component can be published multiple times in a page. If we want the behaviour of the component to change with each publish, we use this.

SVG (Scalable Vector Graphics): Give us unique icon/branding to the component.

All these files are used in lightning components to define the functionalities.

5. What are Attributes in Salesforce Lightning component?

Attributes act like a variable to store different types of values.

An aura attribute is like a variable that we use in programming language or in Apex class. These are typed fields and set on a specific instance of a component. These attributes can be used inside the component as expressions and in controller and helper as well.

Types of Attributes:

A: Basic Types:

These are the basic attributes that contain values of primitive types like integer, string, boolean etc.

1. String :- It stores simple text values like color, name etc.
2. Boolean :- It stores boolean values like true or false.
3. Decimal :- It stores values with fractional part. Used to store values like price.
4. Integer :- It stores integer/Number values like quantity etc.
5. Double :- It stores fractional values like price, currency values.
6. Date :- It stores date values in yyyy-mm-dd format.
7. DateTime :- It stores date values with timestamp.
8. Long :- It stores non fractional values with wider range than integer.

B: Collection Types:

Lightning supports the collection type attributes like array, list and map.

1. Array : An array of items of a defined type
2. List: An ordered collection of items.
3. Map: A collection that maps keys to values. A map can’t contain duplicate keys. Each key can map to at most one value. Defaults to an empty object, {}.
4. Set: A collection that contains no duplicate elements. The order for set items is not guaranteed. For example, “[‘Red’, ‘Green’, ‘Blue’]” might be returned as Blue, Green, Red.

Attributes of these types are typically used in iterations in lightning to display data.

C: Object Types:

An attribute can have the type as “Object”. The object is stored in json format.

Example:

 MIND IT !

• So basically in the above sample syntax we have a ‘aura:attribute’ In which, attribute Name is ‘Company‘ and its Type is String. and we are give it default value as ‘Salesforce’.

• Attributes are always declare with aura: namespace.

• In the attribute creation, attribute Name and attribute Type is mandatory properties.

• Apart from name, type, default and description we have some more attributes (properties) of aura:attribute such as:

name : Name of an attribute. [Required/Mandatory]

type : Type of information to be stored. [Required/Mandatory]. 

default : Default value of an attribute.

access : Indicates whether the attribute can be used outside of its own namespace. Possible values are: public (default), and global, and private.

required : Is it required or not – Possible Values: true or false(default)

6. What are collection types in Salesforce Lightning component?

Lightning supports the collection type attributes like array, list and map.

1) Array
2) List
3) Map
4) Set

1. Array : An array of items of a defined type

To define the attribute for storing array values we can write:

• Here we are storing some default values in "ColorArray".
• An array is a collection of the defined data types.
• Setting a default value without square brackets is deprecated and can lead to unexpected behaviour.

2. List : An ordered collection of items.

To define the attribute for storing values in order we can write:

• Here we are storing some default values in "ColorList".
• The list can have duplicates as well.

3. Map : To define the attribute for mapping keys to values.

• Here we are storing some default values in "ColorMap".
• A map cannot have duplicate keys.
• A collection maps keys to values. Each key can map to at most one value. Defaults to an empty object, {}.
• Retrieve values by using cmp.get("v.ColorMap")['1'].

4. Set : A collection that contains no duplicate elements. The order for set items is not guaranteed.

For example, “[‘Red’, ‘Blue’, ‘Green’]” might be returned as Blue, Green, Red.

To define the attribute for Values which are unique.

• Here we are storing some default values in "ColorSet".
• The set cannot have duplicate values.
• Order for the set item is not as it is when values are returned, It may be in the same order or may change.

Attributes of these types are typically used in iterations in lightning to display data.

7. What are value providers in Salesforce Lightning?

Value provider is a way to access data. They are two value providers as v (View) and c (controller).

v (View) Value Provider:  This value provider enables you to access the value of a component’s attribute in the component’s markup.

Example:

In below component the name of the attribute is defined as “Salesforce” String, If no value is specified, it defaults to “World”. Where “v” is the value provider for a component attribute which represent the view.

Component:

    <aura:attribute name="Salesforce" type="String" default="World"/>
    Hello {!v.salesforce}! // Fetching value from attribute.

c (Controller) Value Provider:  This value provider enables you to wire up event handlers and action for the component. Client side controller handles events within a component. It’s a JavaScript resource that defined the functions for all of the components actions.

Example:

In below component the name of the attribute is defined as “text” String, If no value is specified, it defaults to “Just a string” and “v” is the value provider for a component attribute which represent the view. The Lightning framework button wires the onclick attribute in the lightning:button component to the handleClick action in the controller.

Component:

    <aura:attribute name="text" type="String" default="Just a string."/>
    <lightning:button label="Click Me!" onclick="{!c.handleClick}"/>
     {!v.text} // Value provider

A client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions.

In the below Component Controller handleClick function, notice that the first argument to every action is the component to which the controller belongs. One of the most common things you’ll want to do with this component is look at and change its attribute values.

component.get("v.attributeName") returns the value of the attributeName attribute.

component.set("v.attributeName", "attribute value") sets the value of the attributeName attribute.

Component Controller:

({
    handleClick : function(component, event, helper) {
       // using value provider in javascript controller to get attribute value.
        var attributeValue = component.get("v.text");
        console.log("String Value: " + attributeValue);
        var changeStringValue = 'Change the string value';
       //setting some other value in attribute.
        component.set("v.text", changeStringValue); 
    }
})

8. What is the use of $A.enqueueAction(action) and how to call server side action from client side?

$A.enqueueAction(action) adds the server-side controller action to the queue of actions to be executed. All actions that are enqueued will run at the end of the event loop. The actions are asynchronous and have callbacks.

Calling a Server-Side Action

As we know, the application which we are using in salesforce lightning is running on a browser.

Any application which you load that might have some data. That data is not on the client-side machine, it is in the server.

Let's consider the following diagram :

As you can observe in the above diagram, Basically we will write a server-side controller which contains some data.

Then from our client-side controller will call a server-side controller and get the data from it.

When we call a server-side controller i.e (Apex controller) method from a client-side controller i.e (Javascript controller), Apex controller method return results. In the javascript controller, We use action.setCallback which runs after the apex method execution gets completed in the apex controller.

In another way : Server-side controller is nothing but apex class which contains some specific data that you need to take care of.

When we use apex class as a server-side controller we have to use with sharing keyword to respect security in salesforce.

Syntax :

public with sharing class SimpleServerSideController
{
}

Example:

Server Side Controller : SimpleServerSideController.apxc

public with sharing class SimpleServerSideController
{
 @AuraEnabled
 public static String serverEcho (String firstName) 
 {
  return('Hello from the server'+ firstName); 
 }
}

 MIND IT !

Methods inside the server-side controller are static and stateless means they do not maintain state (They don't care who is calling them).

Also, we have to use @AuraEnabled to enable the client and server-side access to the method.

Lightning Component : serverSide.cmp

  <aura:attribute name="firstName" type="string" default="LearnFrenzy"/>
<ui:button label="callServer" press="{!c.echo}"/>

JS Controller : serverSideController.js

({
    "echo" : function(cmp) {
        // create a one-time use instance of the serverEcho action
        // in the server-side controller
        var action = cmp.get("c.serverEcho");
        action.setParams({ firstName : cmp.get("v.firstName") });

        // Create a callback that is executed after 
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                // Alert the user with the value returned 
                // from the server
                alert("From server: " + response.getReturnValue());

                // You would typically fire a event here to trigger 
                // client-side notification that the server-side 
                // action is complete
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        // optionally set storable, abortable, background flag here

        // A client-side action could cause multiple events, 
        // which could trigger other events and 
        // other server-side action calls.
        // $A.enqueueAction adds the server-side action to the queue.
        $A.enqueueAction(action);
    }
})

In the above serverSideController.js Controller we used action.setcallback, which says that the value which we are getting from the server-side controller is correct or not.

Hence we will get three types of response from the server SUCCESS or INCOMPLETE or ERROR.

At last in serverSideController.js Controller we have used $A.enqueueAction(action); which will add server side action to queue.

action.setCallback is use for checking the response coming from action is correct or not if it is SUCCESS, INCOMPLETE, ERROR.

Now check our code so let's create aura application :

Lightning Application: serverSideApp.app

Output :

Click On callServer button

9. List of interfaces in Lightning Component for publishing

A comma-separated list of interfaces that the component implements. An interface defines where Lightning Components are available. The following some of the available interfaces and their importance:

10. What is the use of interface force:hasRecordId and flexipage:availableForAllPageTypes in Salesforce Lightning component?

By using force:hasRecordId interface in lightning component we can assigned the id of the current record to lightning component. This interface adds an attribute named "recordId" to the component. The type of attribute is string and has 18-character Salesforce record ID.

To make our component available for record page and any other type of page, we need to implement the interface flexipage:availableForAllPageTypes

11. What is the use of interface Lightning:actionOverride in Salesforce Lightning component?

Lightning:actionOverride interface Enables a component to be used as an override for a standard action. We can override the View, New, Edit, and Tab standard actions on most standard and all custom components.

The component needs to implement the interface Lightning:actionOverride after which the component appear in the Lightning Component Bundle menu of an object action Override Properties panel.

Example:

 MIND IT !

Hey Guys, I have solved some scenario based questions which i think was really helpful for me, so I thought sharing them would be a help for you all.

So let’s start by solving some requirements below.

Scenario: Override the standard new button action on the contact object.

Solution:

Lightning Component : ContactInformation.cmp

    <aura:attribute name="firstName" type="string"/>
    <aura:attribute name="lastName" type="string"/>

    <lightning:input label="Enter First Name" value="{!v.firstName}"/>
    <lightning:input label="Enter Last Name" value="{!v.lastName}"/>
    <lightning:button label="Add Contact" onclick="{!c.addContact}"/>

JS Controller : ContactInformationController.js

({
    addContact : function(component, event, helper) {
        alert('lightning action override');
        var fName=component.get("v.firstName");
        var lName=component.get("v.lastName");
        var action=component.get('c.insertContact');
        action.setParams({
            
            ParentAccountId:component.get("v.recordId"),
            FirstName:component.get("v.firstName"),
            LastName:component.get("v.lastName")
            
        });
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==="SUCCESS")
            {
                alert('Contact inserted successfully');               
            }
            
        });
        $A.enqueueAction(action);
        
    }
})

Server Side Controller : ContactInformationController.apxc

public class ContactInformationController {
    @AuraEnabled
    public static contact insertContact(string ParentAccountId,string FirstName,string LastName)
    {
        system.debug('Test');
        contact con=new contact();
        con.firstName = FirstName;
        con.lastName = LastName;
        con.accountid = ParentAccountId;
        insert con;
        return con;
        
    }
}

Now, to override the standard new button action Go to >SETUP > OBJECT MANAGER > Buttons, Links, and Actions > Goto New > Click Edit.

Override the Lightning experience and Mobile view with the Lightning component.

12. What is the use of interface flexipage:availableForRecordHome in Salesforce Lightning component?

Interface flexipage:availableForRecordHome make the component available for record pages only.

Example:

 MIND IT !

Hey Guys, I have solved some scenario based questions which i think was really helpful for me, so I thought sharing them would be a help for you all.

So let’s start by solving some requirements below.

Scenario: Make the component available at account detail page to insert contact.

Solution:

We have implemented interface force:hasRecordId to obtain accountId using recordId attribute from account detail page and to make our component available for record page only, we need to implement the interface flexipage:availableForRecordHome.

Lightning Component : ContactInsert.cmp

    
  <aura:attribute name="firstName" type="string"/>
    <aura:attribute name="lastName" type="string"/>
    
    <lightning:input label="Enter First Name" value="{!v.firstName}"/>
    <lightning:input label="Enter Last Name" value="{!v.lastName}"/>
    <lightning:button label="Add Contact" onclick="{!c.addContact}"/>
    

JS Controller : ContactInsertController.js

({
 addContact : function(component, event, helper) {
       
        var fName=component.get("v.firstName");
        var lName=component.get("v.lastName");
        var action=component.get('c.insertContact');  // Calling Apex Controller method
        action.setParams({
          
            ParentAccountId:component.get("v.recordId"),  // Passing parameter

            FirstName:component.get("v.firstName"),

            LastName:component.get("v.lastName")
           
        });
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==="SUCCESS")
            {
                alert('Contact inserted successfully');               
            }
           
        });
        $A.enqueueAction(action);
       
 }
})

Server Side Controller : ContactInsertController.apxc

public class ContactInsertController {
@AuraEnabled
public static contact insertContact(string ParentAccountId,string FirstName,string LastName)
{
    system.debug('Test');
    contact con=new contact();
    con.firstName=FirstName;
    con.lastName=LastName;
    con.accountid=ParentAccountId;
    insert con;
    return con;
   
}
}

Add ContactInsert Component in Account Record Page

Screen Image from Account record page:

13. What is Aura:method in Salesforce Lightning component?

We can directly call a child component controller method from the parent component controller method using Aura:method. This method is used to pass value from parent component controller to the child component controller.

Now let us see the use with simple example,

Lightning Component : Child.cmp

    
    
        <aura:attribute name="param1" type="String" default="Hello"/>
        <aura:attribute name="param2" type="String" default="Salesforce Lightning "/>
    

Lightning Component : ChildController.js

({
    getMessage : function(component, event) {
        //get method paramaters
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            var param2 = params.param2;
            alert(param1 + " " + param2);
        }
    }
})

Lightning Component : Parent.cmp

    
    

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

Lightning Component : ParentController.js

({
    callAuraMethod : function(component, event, helper) {
        //Call Child aura method
        var childComponent = component.find("childCmp");
        var message = childComponent.messageMethod();
    }
})

Output:

14. What is the use of aura:handler init event in Salesforce Lightning component?

This is also called as the constructor of lightning component. The init event is called once the component construction is over.

As an example if I am creating a simple registration page and I want to display some default text value after page load in my input boxes. I can do this by calling the javascript controller method and setting some default value in the attributes.

Basic Syntax:

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

15. What is the use of aura:handler change event in the Salesforce Lightning component?

The change event is called when the value in one of the attribute changes.
As an Example If i am having attribute " Params", on change of attribute "Params" if I want to call javascript method i can do this as:

<aura:attribute name="Params" type="String" />
<aura:handler  name="change" value="{!v.Params}" action="{!c.doinit}"/>

This example updates an attribute value, which fires the aura:valueChange event.

Lightning Component : ChangeEvent.cmp

    <aura:attribute name="amount" type="Decimal"/>
    <aura:handler name="change" value="{!v.amount}" action="{!c.handleValueChange}"/>
    
    

        

            <lightning:input value="{!v.amount}" type="Decimal" label="Enter Amount"/>

            <lightning:button variant="brand" label="Update" onclick="{!c.changeValue}"/>
        
    
    

JS Controller : ChangeEventController.js

({
    changeValue : function(component, event, helper) {
        component.set("v.amount", "9.0");
    },
    
    handleValueChange : function (component, event, helper) {
        alert("Changed amount : " + component.get("v.amount"));
    }
})

Output:

16. What are events in Salesforce lightning?

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events are fired from JavaScript controller actions that are triggered by a user interacting with the user interface.

There are two types of events in the framework:

• Component events are handled by the component itself or a component that instantiates or contains the component.

• Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model.

17. What is component event in Salesforce Lightning component?

Component Events can be handled by same component or a component that instantiates or contains the component. The component events can only be registered in child component and handled by parent component.

Component Event Example:

In below example by using component event, I’m passing the values from a child component to a parent component via event.

Component Event:

Create a sample component type event. Use type=”COMPONENT” in the aura:event tag for a component event. The attribute type is the one that will differentiate Component event from Application event.

    <aura:attribute name="message" type="String" default="Hello Learnfrenzy!!" />

Child Component:

The event is registered in this component by using aura:registerEvent in its markup.

Lightning Component : Child.cmp

    <aura:registerEvent name="sampleCmpEvent" type="c:ComponentEvent" />
    <lightning:button label="Click To Fire Event" variant="brand" onclick="{!c.childComponentEvent}"/>

Child Component JS Controller:

To set the attribute values of event, call event.setParam() or event.setParams().

JS Controller : ChildController.js

({
    childComponentEvent : function(component, event,helper) { 
        //Get the event using registerEvent name. 
        var cmpEvent = component.getEvent("sampleCmpEvent"); 
        //Set event attribute value
        cmpEvent.setParams({"message" : "Welcome "}); 
        cmpEvent.fire(); 
    }
})

Parent Component:

The component event handled by the Parent Component that fired using aura:handler in the markup.

The name attribute in aura:handler must match the name attribute in the aura:registerEvent tag in the Child Component that fires the event.

The action attribute of aura:handler sets the client-side controller action to handle the event.

Lightning Component : Parent.cmp

    <aura:attribute name="eventMessage" type="String"/> 
    <aura:handler name="sampleCmpEvent" event="c:ComponentEvent" action="{!c.parentComponentEvent}"/>
    

        <c:child/>
        
{!v.eventMessage}
 
    

JS Controller : ParentController.js

({
    parentComponentEvent : function(component, event) { 
        //Get the event message attribute
        var message = event.getParam("message"); 
        //Set the handler attributes based on event data 
        component.set("v.eventMessage", message + 'Salesforce');         
    } 
})

Lightning Application:

    <c:Parent/>

Output:

18. What is application event in Salesforce Lightning component?

Application events are used when you need two independent component to communicate with each other i.e. they don’t need to be in the component hierarchy or nested within each other. Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model.

Application Event Example:

In below example by using Application event, I’m passing the values from Notifier component to a Handler Component via event.

Application Event:

Create a sample application type event. Use type=”APPLICATION” in the aura:event tag for an application event. The attribute type is the one that will differentiate Application event from Component event.

    <aura:attribute name="message" type="String" />

Lightning Component : Notifier.cmp

The notifier component registers the application using registerEvent tag and specifying the name of the application event.

<aura:registerEvent name="appEvent"  type="c:ApplicationEvent"/>
  <lightning:button label="Click here to fire an application event" 
                    variant="brand" 
                    onclick="{!c.fireApplicationEvent}" />

JS Controller : NotifierController.js

({
	fireApplicationEvent : function(component, event, helper) 
    {
        // Get the application event by using the
        // e.<namespace>.<event> syntax
        var appEvent = $A.get("e.c:ApplicationEvent");
       //Set event attribute value
       appEvent.setParams({"message" : "Welcome "}); 
       appEvent.fire(); 
    }
})

Handler Component:

The application event handled by the HandlerCmp that fired using aura:handler in the markup.

The action attribute of aura:handler sets the client-side controller action to handle the event.

Lightning Component : Handler.cmp

    <aura:attribute name="messageFromEvent" type="String"/> 
    <aura:handler event="c:ApplicationEvent" action="{!c.handleApplicationEvent}"/>
    

        
{!v.messageFromEvent}
 
    

JS Controller : HandlerController.js

({
    handleApplicationEvent : function(component, event) { 
        //Get the event message attribute
        var message = event.getParam("message"); 
        //Set the handler attributes based on event data 
        component.set("v.messageFromEvent", message + 'LearnFrenzy');         
    }
})

Lightning Application:

    <c:Notifier/>
    <c:Handler/>

Output:

19. What are the basic differences between Component Events and Application Events in Salesforce?

var cmpEvent = ccmp.getEvent("evtName");

var appEvent = $A.get("e.myNamespace:myAppEvent");

20. What is the main advantage of using Component event over application events?

We should always use Component events whenever possible this is because Component events can only be handled by parent components so the components in picture are only those components which needs to know about them.

 MIND IT !

Component events to talk to a parent using the capture and bubbling mechanism, like with DOM events. Usually, one component is interested by the event, like an event aggregator.

Application events to broadcast to other components and not exclusively ancestors. Applications events can talk to many components that can be interested by the event. The broadcast can be boxed to an area of the DOM.

21. What are the phases in component events propagation?

There are two phases in component event propagation.

1. Bubble Phase
2. Capture Phase

22. What are the phases in application events propagation?

There are three phases in application event propagation.

1. Bubble Phase
2. Capture Phase
3. Default Phase

23. How do the bubble phase and the capture phase propagate?

• Bubble phase: propagates from Bottom to Top.
• Capture phase: propagates from Top to Bottom.

24. Explain Bound and Unbound expressions in Salesforce Lightning component?

When we work with components, the first thing we do is declaring the attributes and initialize them. We use expressions for initializing our components. There are two types of expressions, bound and unbound that are used to perform data binding in Lightning Components.

Bound Expression: Bound Expression is represented as {!v.str}. Whenever the value of the string is changed, this expression will reflect the change and also affect the components where it is used, we can say the value change dynamically through this expression.

Unbound Expression: Unbound Expression is represented as {#v.str}. Whenever the value of the string is changed, this expression will not reflect the change, we can say the value remains static through this expression.

Example :

Lightning Component : Expression.cmp

    <aura:attribute name="str" type="string" default="Hello World!"/>
    <ui:outputText value="Enter a string value : "/><ui:inputText value="{!v.str}"/>
    


    <ui:outputText value="{#v.str}"/>
    


    <ui:outputText value="{!v.str}"/>

Lightning Application:

    <c:expression/>

Output:

25. What is lightning:navigation in Salesforce Lightning component?

lightning:navigation component is used to generate salesforce URL from pageReference or generate a pageReference without manually building it.

To navigate we need to define a PageReference object.
The pageReference type generates a unique URL format and defines attributes that apply to all pages of that type. Using v.pageReference we can capture the URL parameters.

Following are the supported type where we can navigate,

• Lightning Component
• Knowledge Article
• Named Page
• Navigation Item Page
• Object Page
• Record Page
• Record Relationship Page
• Web Page

 Let’s learn more about this component.

Methods

It has following two methods :

1. generateUrl : This method is use to generate url for a given page reference. This method used ‘page reference’ as parameter.

2. navigate : This method is used to navigate to specified page reference. This method used two parameters ‘page reference’ and ‘replace’.

#page reference : It is a javascript object that represent reference to a page, providing a well-defined structure that describes the page type and its corresponding values.

The following PageReference properties are supported:

 type : It defines API name of page, for example : for standard object page we use ‘standard__objectPage’ , for record page type we use ‘standard__recordPage’. It is required.

 attributes : It is also required. It defines the value for each attribute to generate pagereference, for example objectApiName, recordId, action.

 state : This property is optional. This property defines parameter of page url to be generated.

It is used to display data from component where we are navigating based on some filters: Ex: Navigating to account page we can use state as,

state: {
    
    filterName: "RecentlyViewedAccounts"
    
}

or

state: {
    
    filterName: "MyAccounts"
    
}

#replace : It is boolean value which indicates whether new page should replace the current page in navigation history. It is optional.

Note :
1. To use this component we must implement “home:availableForDesktop” or “flexipage:availableForAllPageTypes” interface.
2. If we are navigating to component than the component where we are navigating must implement lightning:isUrlAddressable interface.

To Navigate to component sample syntax used is as below:

{ 
    
    "type": "standard__component",
        
        "attributes": {
            
            "componentName": "c__MyLightningComponent" 
            
        }, 
            
            "state": {
                
                "myAttr": "attrValue" 
                
                
            }
    
}

Example:

In this example we are going to generate a navigation link which navigate to standard account list page and a record view page.

Lightning Component : Navigation.cmp

    <aura:attribute name="url" type="String"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.setPagref }"/>
    <lightning:navigation aura:id="navLink"/>
    

         Go to Account  

        <lightning:button label="Navigate to Record view page" 
                          title="Record View Page" 
                          onclick="{!c.goToRecord}" variant="brand"/>
    

JS Controller : NavigationController.js

({
    setPagref : function(component, event, helper) {
        var navLink = component.find("navLink");
        
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                actionName: 'list',
                objectApiName: 'Account',
                
            },
            state: {
                filterName: "MyAccounts"
            }
        };
        
        // Set the URL on the link or use the default if there's an error
        
        navLink.generateUrl(pageReference).then($A.getCallback(function(a) {
            component.set("v.url", a ? a : "#");
        }), $A.getCallback(function(error) {
            component.set("v.url", "#");
        }));
    },
    goToRecord: function(component, event, helper) {
        var navLink = component.find("navLink");
        var pageReference = {
            type: 'standard__recordPage',
            attributes: {
                actionName: 'view',
                objectApiName: 'Contact',
                recordId : '0032w000004V1WHAA0' // change record id. 
            },
        };
        navLink.navigate(pageReference, true);
    }
})

Output

–> Component Output :

–> Url generated by “setPagref”function is : “/lightning/o/Account/list?filterName=MyAccounts ”

–> Navigation url in “goToRecord” function is : “/lightning/r/Contact/0032w000004V1WHAA0/view”

26. What is Lightning:isUrlAddressable interface?

If we are navigating to a component, then the component where we are navigating to must implement lightning:isUrlAddressable interface to navigate there successfully.

27. On load of lightning component you are required to execute some action what you will do to achieve this?

We will use "Init" Event which is also called as the constructor of lightning component.The init event is called once the component construction is over.

Basic Syntax:

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

About The Author

Saurabh Samir - I have been helping aspirants to clear different competitive exams. LearnFrenzy as a team gave me an opportunity to do it on a larger level an reach out to more students. Do comment below if you have any questions or feedback's.