What are the different Lightning component bundles?
- Component or Application - sample .cmp/.app -
The only required resource in bundle contains markup for the component or
app. Each bundle contains only one app or component resource.
- Controller - .js - Contains client-side
controller methods to handle events in the component.
- Helper - .js - JavaScript functions that can
be called from any JavaScript code in a component’s bundle
- Style- .css - Contains styles for the
component.
- Documentation-. auradoc - A description,
sample code, and one or multiple references to example components
- Design- .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. File required for
components used in Lightning App Builder, Lightning pages, or Community
Builder.
- SVG(Scalable vector graphics)- .svg- Custom
icon resource for components used in the Lightning App Builder
or Community Builder.
- Renderer- .js - Client-side
renderer to override default rendering for a component. When the component
is launching in the browser if we want to implement a different
functionality or behaviour at runtime, we use this.
How to add lightning
component in visualforce page?
Lightning component can be added to
visualforce page using ltng:outApp
How can we
subscribed to an event in lightning component?
Use <aura:handler> in the markup of the
handler component.
What is
aura:registerevent in lightning component?
A component registers that it may fire an
event by using <aura:registerevent>.
What is the use of
implements in lightning component?
implement is used to implement multiple
interface in lightning component. e.g. flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId
What is lightning:
or ui: in any Lightning Component?
lightning: and ui: are two namespaces for
core lightning component. The lightning namespace components are
optimized for common use cases.
How can we extend
any component?
Lighting component can be extended using extensible=”true” attribute in
aura:component
What is the
purpose of a helper file in an Aura Component?
It's always
a best practice to move the complete business logic in Lightning Components to
a helper file and have the controller.js file just as a messenger.
When a component is used (or embedded) multiple times
in another component or when it's
embedded multiple times in any of the lightning entities (Lightning Pages, Lightning
Record Pages etc) then the helper.js file
of the component(though embedded multiple times) is loaded only once which
in-turn will be shared by the components.
So the resources used to load the same file multiple
times is saved and response time can be reduced by a fraction of a second. It
basically enhances the user experience(UX).
what is lightning container?
The lightning:container component
allows you to host content developed with a third-party framework within a
Lightning component. The content is uploaded as a static resource, and hosted
in an iFrame. The lightning:container component
can be used for single-page applications only.
Which type of attribute
we can use in lightning component to store fractional values?
Doubletype.
To form a
container around a information related to single item or group of item what we
need to use in lightning component?
Lightning:card.
How to ensure
field level security while working with lightning components?
Make use of Lightning:recordForm or Standard controller
of lightning component (force:recordData).
How to use
lightning component with salesforce mobile app?
Make a tab for lightning component and include this tab in
Salesforce1 mobile navigation.
Suppose we have a requirement to create an account
using a new button and some default values in the new account screen. How can
we achieve this requirement?
We can make use of force:createRecord;
it is an event that opens a page to create a record for a specific
entity.
createRecord :
function (component, event, helper) {
var
createRecordEvent = $A.get("e.force:createRecord");
createRecordEvent.setParams({
"entityApiName":
"ObjectApiName"
});
createRecordEvent.fire();
}
Is Lightning an MVC framework?
No, it’s a component-based framework.
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 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.
How
to use static resources in Lightning Components/Application?
Using $Resource.yourNamespace__resourceName.
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 }"/>
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.
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.
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.
What is the difference between bound and unbound
expression?
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.
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 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 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.
How to get event source in JavaScript controller?
event.getSource() method is used to identify event
source.
How to set attribute value from JavaScript?
Use
component.set() method to set an attribute value in JavaScript. Example:
<aura:attribute
name=“greeting” type=“String” />
In
JavaScript you can set attribute value like below:
component.set(“v.greeting”,
“Hello World”);
How to get attribute value in JavaScript?
Use
component.get() method to get an attribute value in JavaScript. Example:
<aura:attribute
name=“greeting” type=“String” />
In
JavaScript you can get attribute value like below:
var
gettingValue = component.get(“v.greeting”);
What is component. Find() method and why is it
being used?
component.find()
method is used to find an element from component markup using aura:id. This
method return complete element and can be used to set attribute values of
element or performing any other operations like changing CSS classes etc.
<lightning:input
aura:id=“nameInput” value=“Madhu”/>
In
JavaScript, you can dynamically change the value attribute of above
lightning:input-
var
inputElement = component.find(“nameInput”);
inputElement.set(“v.value”,
“Gaurav”);
Why we use component.getEvent() method?
component.getEvent()
method is used to get a reference of registered component event in component
markup. Once the event is retrieved, same can be fired from JavaScript.
Example:
<aura:registerEvent
name=“onTileSelect” type=“c:TileSelectEvent”/>
You
can get above component event in controller:
var
tileSelectEvent = component.getEvent(“onTileSelect”);
tileSelectEvent.fire();
//fire the event
What are different ways to communicate between
components?
If component hierarchy is same
·
Parent
to Child Communication-
1.
Attributes can
be used to create a binding between parent and child.
2.
Aura
methods can be used if parent component wants to access a function in
child component
Child to
Parent Communication-
1.
Attributes can
be used to create a binding between parent and child.
2.
Component
event can be used to perform functionality in parent component based on an
event in child component.
If
components are in different hierarchy
Application
events is the best solution for this type of communication.
What
is the purpose of <aura: method/> tag ?
This tag is used to send data from the Parent Component to the Child
Component.
What is Flexipage in lightning?
Flexipage represents the metadata associated with a lightning page.
How to call the parent component method from
the child component without using events?
1. Define aura:id of the child component in parent.
2. Define <aura: method> in child component and it
will link to method of child controller.
3. Define a lightning :button on parent component and on
click of this button get the reference of the child component as mentioned in
step 1 & call aura: method as mentioned in step 2
What is Aura definition bundle?
A bundle contains an aura
definition and its related resources. The definition can be a component,
application, event, interface or a token collections.
How can we display loading
spinner in lightning component?
Spinners are CSS loading
indicators that should be shown when retrieving data or performing slow computation. lightning: spinner displays an animated spinner image to indicate that a request
is loading.
What is difference between Visualforce and lightning components?
Visualforce components are
page centric and most of the work is done on server. Lightning is designed from
the component up, rather than having the concept of a page as its fundamental
unit. Lightning component are client side centric which makes them more dynamic
and mobile friendly.
What is SLDS?
Salesforce lightning design
system helps you to build applications with the look and feel of lightning
experience without writing a single line of CSS. SLDS is a CSS framework that
gives you access to the icons, colour palettes, and font that your developers
use to create lightning experience.
What
do you mean by promises?
Promises are used to handle asynchronous operations
in JavaScript. They are easy to manage when dealing with multiple asynchronous
operations where callbacks can create callback hell leading to unmanageable code.
·
A
Promise has four states:
1.
fulfilled: Action related to the promise
succeeded
2.
rejected: Action related to the promise
failed
3.
pending: Promise is still pending i.e.
not fulfilled or rejected yet
4.
settled: Promise has fulfilled or
rejected.
