Lightning Interview Questions

Today I have created a list of few lightning Interview Questions below. I will keep updating this list with more questions. So keep checking it.

Salesforce Lightning Interview Questions

What is Aura?
Aura framework is the core framework in which Lightning Component framework is built

What is SLDS stands for?
Salesforce Lightning Design System

What is Lightning component framework?
The Lightning Component framework is a UI framework for developing single-page web apps for mobile and desktop devices.

What is use of Lightning component framework?
There are 4 major benefit. they are: Out-of-the-box Components,Rich Component Ecosystem, Fast Development, Device-aware and Cross Browser Compatibility

What are component in Salesforce Lightning?
Components are the functional units of Aura, which encapsulate modular and reusable sections of UI. They can contain other components or HTML markup. The public parts of a component are its attributes and events. Lightning provide out of thr box components in lightning, aura, ui and force namespaces.

Which Framework Lightning Supports?
Lightning Supports component-based framework.

How many types of events available?

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.

You can find more details here.

What is Lightning Bundle?
A component bundle contains a component or an app and all its related resources.

Resource Resource Name Usage See Also
Component or Application sample.cmp or sample.app The only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource. Creating Components aura:application
CSS Styles sample.css Contains styles for the component. CSS in Components
Controller sampleController.js Contains client-side controller methods to handle events in the component. Handling Events with Client-Side Controllers
Design sample.design File required for components used in Lightning App Builder, Lightning pages, Community Builder, or Flow Builder. Aura Component Bundle Design Resources
Documentation sample.auradoc A description, sample code, and one or multiple references to example components Providing Component Documentation
Renderer sampleRenderer.js Client-side renderer to override default rendering for a component. Create a Custom Renderer
Helper sampleHelper.js JavaScript functions that can be called from any JavaScript code in a component’s bundle Sharing JavaScript Code in a Component Bundle
SVG File sample.svg Custom icon resource for components used in the Lightning App Builder or Community Builder. Configure Components for Lightning Pages and the Lightning App Builder

Do we need custom domain to create Lightning components?
No, we can create them without custom domain but to view them we need custom domain

Do we need custom namespaces to develop lightning components?
No, It’s Optional.

Can we access one lightning component inside another lightning component in salesforce?
Yes, we can.

Can we access one JavaScript controller method on another controller method in salesforce lightning component?
No, we cannot access them,

Can we access one JavaScript helper method on another helper method in lightning Component?
Yes, we can access using this keyword.

helperA : function (component, param){
  //do stuff
}

helperB : function (component, params){
  //do stuff, and
  this.helperA(component, params)
}

Can we use external libraries in components?
Yes, the Lightning component supports a third-party library. You can check here for sample code.

How we can enable component for lightning Tabs?
By implementing interface implements=”force:appHostable”.

How we can enable component for lightning Record home page?

Record pages are different from app pages in a key way: they have the context of a record. To make your components display content that is based on the current record, use a combination of an interface and an attribute.

  • If your component is available for both record pages and any other type of page, implement flexipage:availableForAllPageTypes.
  • If your component is designed only for record pages, implement the flexipage:availableForRecordHome interface instead of flexipage:availableForAllPageTypes.
  • If your component needs the record ID, also implement the force:hasRecordId interface.
  • If your component needs the object’s API name, also implement the force:hasSObjectName interface.

How we can enable component for lightning action?
By implementing interface implements=”force:lightningQuickAction”

What are Naming Convention Rule for Salesforce Lightning?

A component name must follow these naming rules:

  • Must begin with a letter
  • Must contain only alphanumeric or underscore characters
  • Must be unique in the namespace
  • Can’t include whitespace
  • Can’t end with an underscore
  • Can’t contain two consecutive underscores

How to use static resources in Lightning Components/Application?
Using $Resource.yourNamespace__resourceName. You can check in more detail here

What are value providers in Salesforce Lightning?
Value providers are a way to access data. Value providers encapsulate related values together, similar to how an object encapsulates properties and methods.

The value providers for a component are v (view) and c (controller).

v A component’s attribute set. This value provider enables you to access the value of a component’s attribute in the component’s markup. Component Attributes
c A component’s controller, which enables you to wire up event handlers and actions for the component Handling Events with Client-Side Controllers

List of Global value providers ?

  • $globalID
  • $Browser
  • $ContentAsset
  • $Label
  • $Locale
  • $Resource

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_source.htm?search_text=value%20providers

How we can access Custom Label in Lightning?
Syntax : $A.get(“$Label.namespace.labelName”)

How to add a lightning button in Salesforce Lightning?
use the lightning button tag to add the button in the component.
Example:
<lightning:button variant="base" label="Base" title="Base action" onclick="{! c.handleClick }"/>

Where can we use lightning component in LEX

  • Lightning Pages and Lightning App Builder
  • Lightning Community builder
  • Lightning Flow
  • In Visualforce

What is Lightning Container

Upload an app developed with a third-party framework as a static resource, and host the content in an Aura component using lightning:container. Use lightning:container to use third-party frameworks like AngularJS or React within your Lightning pages.

The lightning:container component hosts content in an iframe. You can implement communication to and from the framed application, allowing it to interact with the Lightning component. lightning:container provides the message()method, which you can use in the JavaScript controller to send messages to the application. In the component, specify a method for handling messages with the onmessage attribute.

What is Lightning Locker?

Lightning Locker is a powerful security architecture for Lightning components. Lightning Locker enhances security by isolating Lightning components that belong to one namespace from components in a different namespace. Lightning Locker also promotes best practices that improve the supportability of your code by only allowing access to supported APIs and eliminating access to non-published framework internals.

How we can access apex method in Lightning

@AuraEnabled helps to access methods in Lightning.

var action = component.get(actionName);
action.setParams({ v : val });
action.setCallback(this, function(response) {
     console.log(response.getReturnValue());
});
$A.enqueueAction(action);

Why do we use @AuraEnabled annotation?

  • Use @AuraEnabled on Apex class static methods to make them accessible as remote controller actions in your Lightning components.
  • 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

Why do we use $A.enqueueAction(action)?

It adds the server-side controller action to the queue of actions to be executed. Rather than sending a separate request for each individual action, the framework processes the event chain and batches the actions in the queue into one request. The actions are asynchronous and have callbacks.

 What is Lightning Data Service in Salesforce Lightning?
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.

At the simplest level, you can think of Lightning Data Service as the Lightning components version of the Visualforce standard controller

Lightning Data Service is available through several base components. To create a form for working with records, use lightning:recordForm, lightning:recordEditForm, or lightning:recordViewForm. If you need more customization than those components allow, consider the force:recordData component.

force:recordData doesn’t include any UI elements; it’s simply logic and a way to communicate to the server. Here are the components that use Lightning Data Service.

lightning:recordForm

Display, create, or edit records

lightning:recordViewForm

Display records with lightning:outputField

lightning:recordEditForm

Create or edit records with lightning:inputField

force:recordData

Display, create, edit, or delete records with granular customization

Which chrome extension helps us to debug lightning applications?
Salesforce Lightning Inspector. The Salesforce Lightning Inspector is a Google Chrome DevTools extension that enables you to navigate the component tree, inspect component attributes, and profile component performance. The extension also helps you to understand the sequence of event firing and handling.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/inspector_intro.htm

How we can validate code using Salesforce CLI

Salesforce DX includes a code analysis and validation tool usable via the Salesforce CLI. Use force:lightning:lint to scan and improve your code during development. Validation using the Salesforce CLI doesn’t just help you avoid Lightning Locker conflicts and anti-patterns. It’s a terrific practice for improving your code quality and consistency, and to uncover subtle bugs before you commit them to your codebase.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/validation_with_sfdx.htm

Difference between bound and unbound expressions.
Bound expression {!expression}: Any change to the value of the childAttr attribute in c:child also affects the parentAttr attribute in c:parent and vice versa. When we use a bound expression, a change in the attribute in the parent or child component triggers the change handler in both components.

Unbound expression {#expression}: Any change to the value of the childAttr attribute in c:child doesn’t affect the parentAttr attribute in c:parent and vice versa. Data updates behave as you would expect in JavaScript. Primitives, such as String, are passed by value, and data updates for the expression in the parent and child are decoupled.

Objects, such as Array or Map, are passed by reference, so changes to the data in the child propagate to the parent. However, change handlers in the parent aren’t notified. The same behavior applies for changes in the parent propagating to the child.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_data_binding.htm

Why we use of THIS CSS class?
All top-level elements in a component have a special THIS CSS class added to them. This, effectively, adds namespacing to CSS and helps prevent one component’s CSS from overriding another component’s styling. The framework throws an error if a CSS file doesn’t follow this convention.

What is aura:if tag and uses ?
aura:if evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered. 

<aura:component>
    <aura:if isTrue=”{!v.truthy}”>
           True
           <aura:set attribute=”else”>
           False
           </aura:set>
    </aura:if> 
 </aura:component>

How to handle navigation in lightning component?
Use lightning:navigation component to navigate to a given pageReference or to generate a URL from a pageReference.

How we can use component in the community builder?
Implements “forceCommunity:availableForAllPageTypes” interface on the component.

What is the basic difference between Application Event and Component Event?

The major difference between application and component event is that component event is used in the child to parent components and application event can be used throughout the application and any component can handle the application event.

Which interface need to implement so that you can use the lightning component as Tab like custom object and VF page.

force:appHostable

Can we use Lightning Component into VF page? If yes how?

Yes, using lightning out the functionality of the salesforce lightning component.

How can we call child component controller method from the parent component controller method?

Yes, we can call using aura methods.

utils.cmp

<aura:method name="util1" action="{!c.callUtilMethod}" description="Calls util1">
    <aura:attribute name="aParam" type="String" />
  </aura:method>
main.cmp
<aura:component>
  <c:utils aura:id="utils" />
  <!-- ... -->
</aura:component>
mainController.js
({
  someMethod: function(c,e,h) {
    var retVal = c.find("utils").util({ aParam: "Hello World" });
  }
})
Or we can extend the component
BaseCmp
BaseCmp.cmp
<aura:component extensible="true">
</aura:component>
BaseCmpHelper.js
({
    helperMethod1: function() {
        // do stuff here
    }
})
________________________________________
ChildCmp
________________________________________
ChildCmp.cmp
<aura:component extends="c:BaseCmp">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
</aura:component>
ChildCmpController.js
({
    init: function(component, event, helper) {
        helper.helperMethod1();
    }
})

How to ensure FLS while working with Lightning Component?

Lightning Data Services already ensures Field Level Security and we can also use the Apex using isAccessible, isCreateable, isDeleteable, isCreateable and etc methods of Schema class. We cannot validate them in JS controller so we do this in APEX if have written our custom code.

What is the Difference between Lightning tags and Force tags and UI tags?

A lightning tag has inbuilt SLDS we do not need to put extra effort to improve the look and feel, We can handle bad input and provide user validations. The lightning namespace components are optimized for common use cases. Beyond being equipped with the Lightning Design System styling, they handle accessibility, real-time interaction, and enhanced error messages.

force tags work as apex:inputField tags work on the VF page. For example, if we are using forceInputField for the picklist field then it will show the input in picklist format with the respected values. It also supports the lookup/master input fields

UI tags are like html tag with no css support. They are the base component picked from aura library. SF recommends using Lightning tag for now.

Why we should use Component event instead of Application Event?

Application Event can be handled by any component so they might conflict with other components. Also, as they are globally available so sensitive data can be compromised. Also most of work is easily doable using component event.

Are Lightning component tags case-sensitive?

Yes

How you can test Lightning component

You can use Jasmine Lightning Test Service.

So did you like the Lightning Interview Questions list, do you want me to add any topic here, let me know in comments. All the best 🙂

%d bloggers like this: