Lightning Interview Questions 2
Lightning Interview Questions 2
Aura is an open source framework developed by Salesforce. It is a component based framework to develop UI
components.
1. Component Event
2. Application Event
Any component can subscribe to an application event, or to a component event they can see.
7. What are different files in an aura component bundle? What are their usage?
There are 8 different files in a component bundle. These files include component markup, css, javascript and
documentation. For ex, let’s say you have component bundle named as “MyCustomComponent”, then the
component files would be:
MyCustomComponent Bundle
| — MyCustomComponent.cmp
| Only required resource in component bundle. Contains markup of the component in xml format.
| — MyCustomComponentController.js
| Client side controller based on javascript to handle events raised by component
| — MyCustomComponentHelper.js
| Contains Javascript functions that can be called from controller file of renderer file. This file mainly
used for writing reusable code.
| — MyCustomComponent.css
| Style for the component. Contain css classes and style definitions
| — MyCustomComponent.auradoc
| Contains description, sample code or reference to your component
| — MyCustomComponentRenderer.js
| Client-side rendering to override default rendering
| — MyCustomComponent.design
| Enables you to design a form that enables business user to set value attributes in your component using
Lightning App Builder.
| — MyCustomComponent.svg
| Custom icon resource
8. What are different JavaScript files in a component bundle?
There are 3 JavaScript files in an Aura Component Bundle, Controller File, Helper File and Renderer File.
Controller file is mainly used to handle events being fired from component markup. Helper file is mainly used to
write reusable code. Renderer file is mainly used to override rendering events of an Aura Component.
9. What are different ways to call a javascript controller method?
Javascript Controller method can be called via:
11. Can we call one javascript controller method from other one?
No, javascript controller method can only be called by component markup.
12. Can we call one helper method from other helper method?
Yes, Helper file methods can be called from controller methods, other helper methods or from renderer file
methods as well. Helper file is designed to put reusable code hence this code can be called from all javascript
resource files.
13. What are different events fired during component rendering lifecycle?
During component rendering, there are several events which gets fired.
Init event – The component service that constructs the components fires the init event to signal that
initialization has completed.
Render event – This event is called when component starts rendering. You can override this either by
handling this event, or by creating custom renderer resource file.
After render – This event is called once rendering is completed.
Read Also: Code By Code – LWC – Chapter 1 – Why Lightning Web Components?
14. What is inheritance in Lightning framework?
Lightning framework allows you to extend another component. When a component extends another component,
we refer to sub and super components in the inheritance hierarchy. This inherits super components properties and
make them available to sub component.
Create a parent component and make it extensible. This will allow your component to be inherited by
other components.
A component event cannot be handled by any component which is below in the component hierarchy or out of
the hierarchy.
Events fired from c:second component cannot be handled by c:thirdComponent since it is out of
component hierarchy. It cannot be handled by c:fourthComponent as well, since it is below
c:secondComponent in component hierarchy.
18. What are the steps to fire and handle a component event?
Create a component event.
Register the component event in the aura component from where you intend to fire it.
Fire the component event using fire() method.
Declare an aura handler in your component where you intend to handle the event.
19. How can you handle the component event?
Component events can be handled either by aura:handler or directly from child component declaration tag. For
example, if c:secondComponent fires a component event named “onBack” than you can handle that directly from
c:firstComponent like below:
Event handlers are invoked in order from the application root down to the source component that fired the event.
Any registered handler in this phase can stop the event from propagating, at which point no more handlers are
called in this phase or the bubble phase.
Source component is the one who is firing the event. Application root here is the top-most component in
component hierarchy.
22. What is bubble phase in component event propagation?
The component that fired the event can handle it. The event then bubbles up from the source component to the
application root. The event can be handled by a component in the containment hierarchy that receives the
bubbled event.
Event handlers are invoked in order from the source component that fired the event up to the application root.
Any registered handler in this phase can stop the event from propagating, at which point no more handlers are
called in this phase.
Source component is the one who is firing the event. Application root here is the top-most component in
component hierarchy.
Read Also – Interview Questions – Lightning Framework – Part 1
23. What is default phase in component event propagation?
Bubble phase is the default phase for component events.
Application events are best used for something that should be handled at the application level, such as navigating to a
specific record. Application events allow communication between components that are in separate parts of the
application and have no direct containment relationship.
4. Which interface we are supposed to implement so that a lightning component can be used as quick action?
We need to implement the following “force: lightningQuickAction” so that we can use the component as a Quick Action
5. Which interface we are supposed to implement so that a lightning component can be used as a Tab?
We need to implement the following “force:appHostable” so that we can use the component as a Tab
2. Next we have to create and refer a Lightning app which is used to the component dependencies.
3. Lastly we need to write a JavaScript function which will finally create the the component on the page using
$Lightning.createComponent()
7. How can we call child component controller method from the parent component controller method?
To call a child component’s controller method, we need to first create a aura:method which is publically accessible,
aura:method is used to communicate down the containment hierarchy i.e. parent to child. Sample code for
implementing the aura method:
Component code
Controller
({
publicmethod: function(cmp, event) {
var params = event.getParam(‘arguments’);
if (params) {
var message = params. str;
console.log(“message: ” + message);
return message;
}
}
})
Calling the cild method from parent controller
({
callchildCompMethod : function(component, event, helper) {
var childCmp = component.find(“childCompName”);
var Result =
childCmp. publicmethod (“message sent by parent component”);
console.log(“Result: ” + Result);
}
})
8. What are the different Lightning component bundles?
a. Component
b. Controller
c. Helper
d. Style
e. Document
f. Design
g. SVG
h. Rendrer
9. How to ensure FLS while working with Lightning Component?
FLS and CRUD are not automatically enforced in the lightning component whenever any object is referenced in the
Apex Controller and the component will display the fields and records for which the users do not have access.
Therefore we should manually enforce the FLS and CRUD in the Apex Controller, or we should try to use Lightning
Data service wherever possible because it takes care of FLS and CRUD for us.
10. How can we use Lightning Components with the Salesforce1 Mobile App ?
For this purpose we need to first make a lightning tab which points to the lightning component we created and then we
have to include that tab in the salesforc1 Mobile Navigation select list and the newly created tab to it.
11. Can we make a Lightning Component that shows up in both the mobile and the desktop user interfaces?
Lightning component is lightning experience ready by default and is also compatible in Salesforce1 App, it has a
responsive layout therefore it adjust its resolution according the screen size and therefore can be used on desktop as
well without writing any separate code.
13. Which parts of Lightning Components are server-side and which are client-side ?
Lightning components have two types of controller, one which uses javascript and responds to the event occurring in
the components at client side and the second controller which is an apex class. Method of apex controller are
accessed by the JavaScript controller methods asynchronously.
14. Can we make one component inherit styles/CSS from a parent component, or must we always define it in
the component ?
Child component inherits the CSS from its aren’t we do not need to specify it for each component
17. Is there any limit on how many component to have in one Application?
There is no limit on number of components defined within an application by salesforce
19. What is Aura? Why do we use the aura: namespace in the code?
Aura is a UI framework for developing dynamic web apps for mobile and desktop devices. Aura provides a scalable
long-lived lifecycle to support building apps engineered for growth.
Aura supports partitioned multi-tier component development that bridges the client and server. It uses JavaScript on
the client side and Java on the server side.
24. Are there any CSS (styles) provided by salesforce.com as part of the supported Lightning Components ?
Salesforce has provided lightning design system as the default css to be used with Lightning component.
27. Can we integrate Lightning components with another framework, such as Angular?
Yes we can integrate lightning with any 3rd party framework.
In this ‘name’ attribute in should be exactly as name attribute in tag in the component which has fired the component.
The ‘action’ attribute of sets the client-side controller action to handle the event. The ‘event’ attribute specifies the
event being handled.
For Handling Application event we write below code
‘Event’ and ‘action’ attribute are same as the component event handling, it is just that we do not include ‘name’
attribute to handle the application event.
Lightning bundles must be under a top-level folder that’s named aura. Each bundle must have its own subfolder under
the aura folder.
A bundle doesn’t have a suffix but definition files can have one of these suffixes
Suffix Component Type
Suffix Component Type
.app Application
.cmp Component
.design Design
.evt Event
.intf Interface
.css Style
.auradoc Documentation
All attributes have a name and a type can be marked required by specifying ‘required=true’and can also have a default
value. It has a naming rule as well:
compEvent.fire();
43. Let’s say that you have an app myApp.app that contains a component myCmp.cmp with a ui:button
component. During initialization, the init() event is fired in what order?
ui:button, ui:myCmp, and myApp.app.
47. What are the different ways to conditionally display markup, and what is the preferred approach?
Using the <aura:if> tag
Use CSS to toggle visibility of markup by calling $A.util.toggleClass(cmp, ‘class’) in JavaScript code.
47. What is $Resource global value provider? Is it possible to obtain a reference to a static resource in
Javascript code?
It lets you reference images, style sheets, and JavaScript code you’ve uploaded in static resources.
48. Let’s say you have several buttons that reuse the same onclick handler. How will you retrieve the name of
the button that fired the event?
Use event.getSource() in the client-side controller to get the button component that was clicked. Call
49. What are the names of interfaces that are added to a Lightning component to allow it to be used as
custom tabs, and to be used in Lightning and Community builder?
‘force:appHostable’ Allows a component to be used as a custom tab in Lightning Experience or the Salesforce app
‘forceCommunity:availableForAllPageTypes’ To appear in Community Builder, a component must implement the
forceCommunity:availableForAllPageTypes interface
50. What is the use of force:hasRecordId interface?
Add the force:hasRecordId interface to a Lightning component to enable the component to be assigned the ID of the
current record.
The recordId attribute is set only when you place or invoke the component in a context of a record. For example, when
you place the component on a record page, or invoke it as an action from a record page or object home. In all other
cases, such as when you create this component programmatically inside another component, recordId isn’t set, and
your component shouldn’t depend on it.
51. What is Lightning Design System (SLDS)?
The Salesforce Lightning Design System (SLDS) component library is actively developed to enable Salesforce
developers to create a uniform look and feel across all Salesforce-related applications while adhering to CSS best
practices and conventions.
FlexiPage
Represents the metadata associated with a Lightning page. A Lightning page represents a customizable screen made
up of regions containing Lightning components.
A Lightning page region can contain upto 25 components.
Lightning pages are referred as FlexiPages in API and referred as Lightning pages elsewhere in SFDC documentation
Q2). How can Lightning Components be used with the Salesforce 1Mobile App?
Lightning components can be used with Salesforce 1Mobile App by creating a custom
Lightning tab which points to our component and includes that tab in our Salesforce 1 Mobile
navigation.
Q3). Can a Lightning Component which shows up in both the Mobile and the
Desktop User Interfaces be made?
Lightning Components can be directly used in Lightning Experience, the Salesforce 1 Mobile
app, template-based communities, and other standalone apps. Additionally, it also includes
Lightning components in a Visualforce page, which allows us to use them in Salesforce
Classic, Visualforce-based communities and Console.
Q5). Which parts of the Lightning Components are server-side and which are on
client-side?
Lightning components make use of JavaScript on the client-side and Apex on the server-side.
Q6). What is the type of different events into Salesforce Lightning Component?
Application Event: The event has a scope which is throughout the lightning App, and any
component which has registered for this event gets a notification.
System Event: These are the events which are fired by the Salesforce system during the
lifecycle of the app.
Component Event: Scope of this falls within the parent component of this event. All the
components declared by the parent will also get notified of this event.
Q7). What is the difference between the component event and the application
event?
Component Events: these are used to when the parent and child need to communicate. They
make use of bubbling and capture, just like it is used in DOM events. A change in a child
component will be communicated to the parent component through the component event.
Application Events: these are basically used for communicating any kind of change in the
component to a larger audience. Any component which has been registered for this event will
get notified.
Application events are best used when something is handled at the application level, like
navigating to a particular record. Application events permit any communication between the
components which are in separate parts of the application and have no direct containment
relationship.
Add the Lightning Components for Visualforce JavaScript library for the targeted page
of Visualforce using the tag.
Next, a Lightning app has to be created and referred to in component dependencies.
Finally, a JavaScript Function needs to be written which will ultimately create the
component on the page by making use of $Lightning.createComponentt()
Q12). Name a few different Lightning Component bundles?
Q14). How can Lightning Components be used in the Salesforce1 Mobile App?
A lightning tab has to be made, which is aimed at the lightning component which has been
created. The tab then has to be included in the salesforce1 Mobile Navigation select list and
the newly created tab for it.
Q19). What is the underlying difference between Visualforce Component and the
Lightning Component?
Visualforce page is created by keeping it at the center of the application, and most of its
calculation is taken up at the server-side. The lightning component, on the other hand, is
created by making use of the component-based framework, and most of the calculations are
performed at the side of the client. It gives a more dynamic and rich customer experience. The
lightning component is built using the mobile-first approach.
Q20). Are there any CSS styles provided by the Salesforce.com which support
the Lightning components?
Salesforce has given the lightning design system as the default CSS which can be used with
the Lightning component.
Q21). Do you think Lightning Components are only directed towards mobile
apps?
Lightning Components are designed with a mobile-first approach, but the responsive design
allows it to give the same experience even over the desktop without the need for writing any
separate lines of code.
Read: Zoho vs. Salesforce - CRM Software Comparison for Small Business
Conclusion
Salesforce Lightning is basically designed to simplify processes for various business users
who typically do not have any kind of programming experience. It has a huge scope, and thus,
the interview preparation needs to be done with a lot of care and seriousness. There are many
aspects which have to be touched. The questions mentioned above if done properly will
definitely give you an edge over other participants. The only part of an interview is the
preparation, which is in your control. As it is said, control the controllable so you should put in
all the efforts to make sure that there is nothing left undone in your preparation and you enter
the interview room loaded with confidence.
Lightning Experience: We can display component in the Lightning Experience using the App
Builder. We can edit the home page, edit a record detail page or create/edit a new app page to include it.
Salesforce1 Mobile app: We can display component in the Salesforce1 Mobile app by creating a
custom Lightning tab that references it and adding that tab in mobile navigation.
Standalone Lightning app: By create a standalone Lightning app (e.g. myapp.app) and include
component in this app. Access Lightning app by URL.
Add Apps to the Lightning Experience App Launcher: Your Lightning Components apps and custom
tabs are available from the App Launcher.
Add Apps to Lightning Experience and Salesforce App Navigation: You can add Lightning
components tabs to an app and they display as items in the app’s navigation bar.
Lightning App Builder and Community Builder : We can display component in template-based (e.g.
Napili) community using the Community Builder. Build custom user interfaces using your own Lightning
components, or those you install from AppExchange, for desktop and mobile devices.
Add Lightning Components to Lightning Pages: A Lightning Page is a custom layout that lets you
design pages for use in the Salesforce mobile app or in Lightning Experience. You can use a Lightning
Page to create an app home page and add your favorite Lightning component, such as the Expenses app
we’ll be creating in this module, to it.
Add Lightning Components to Lightning Experience Record Pages: You can customize Lightning
Experience record pages by adding a Lightning Component.
Launch a Lightning Component as a Quick Action: Create actions using a Lightning component, and
then add the action to an object’s page layout to make it instantly accessible from a record page.
Create Stand-Alone Apps: A standalone app comprises components that use your Salesforce data
and can be used independently from the standard Salesforce environment.
Run Lightning Components Apps Inside Visualforce Pages: Add Lightning components to your
Visualforce pages to combine features you’ve built using both solutions. Implement new functionality using
Lightning components and then use it with existing Visualforce pages.
Run Lightning Components Apps on Other Platforms with Lightning Out: Lightning Out is a feature
that extends Lightning apps. It acts as a bridge to surface Lightning components in any remote web
container. This means you can use your Lightning components inside of an external site (for example,
Sharepoint or SAP), or even elsewhere on the platform such as on Heroku.
Customize Flow Screens: Create a flow to guide your users through a business process. By default,
you can add simple fields like inputs or radio buttons to a flow screen. But with a custom Lightning
component, you can fully customize the look-and-feel and functionality of your screen.
Application events are used to communicate any change in the component to a broader audience.
Any component who has registered for this event will get a notified.
Application events are best used for something that should be handled at the application level,
such as navigating to a specific record. Application events allow communication between
components that are in separate parts of the application and have no direct containment
relationship.
An AuraDefinitionBundle component is a folder that contains definition files. Unlike most other
metadata components, an AuraDefinitionBundle component isn’t a single file, it’s a collection of
files. Each file represents a resource in a bundle, such as markup, applications, code files
(including controllers and helpers), events, documentation, and interfaces.
A bundle doesn’t have a suffix. Definition files can have one of these suffixes:
.app Application
.cmp Component
.design Design
.evt Event
Suffix Component Type
.intf Interface
.css Style
.auradoc Documentation
The AuraEnabled annotation is overloaded, and is used for two separate and distinct purposes.
1. We have to first Add the Lightning Components for Visualforce JavaScript library to your targetted
Visualforce page using the tag.
2. Next we have to create and refer a Lightning app which is used to the component dependencies.
3. Lastly we need to write a JavaScript function which will finally create the the component on the page
using $Lightning.createComponent()
For more details, please refer Use Lightning Components in Visualforce Pages
v is component attribute set which helps to access component attribute values in markup
c is component controller helps us to link with event handlers and action for the component