Aura Component Interview Questions.
1) What is Lightning Component Framework and What is Aura 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 is design by Salesforce which is open source framework for creating ui components.
Value provider:
This value provider enable us to access value of component attribute in component markup and javascript controller.
<aura:component>
<aura:attribute type="string" name="myfirstattribute" default="first text"/>
{!v.myfirstattribute}
Action provider:
This enable us to handle actions,event,handlers for the component.
Ex:<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
In Javascript controller,
({
5) What are Attributes in Salesforce Lightning component?
6) What are collection types in Salesforce Lightning component?
To make our component available for record page and any other type of page, we need to implement the interface flexipage:availableForAllPageTypes
8) What is the use of interface Lightning:actionOverride in Salesforce Lightning component?
Interface force:lightningQuickActionWithoutHeader allow the component to be used as a custom action in Lightning Experience or the Salesforce mobile app. Implementing the force:lightningQuickAction in a component, component interface display in a panel without standard action controls like cancel button.
<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
Syntax:
<aura:attribute name="Anyname" type="String" />
Let see two example:
<c:ChildComp childAttributeName="{!v.parentAttributeName}" /> <!--Bound Expression-->
childAttributeName="{!v.parentAttributeName}" is a bound expression. Any change to the value of the childAttributeName attribute in child component also changes the value of parentAttributeName attribute in parent component and vice versa.
<c:ChildComp childAttributeName="{#v.parentAttributeName}" /> <!--Unbound Expression-->
childAttributeName="{#v.parentAttributeName}" is a Unbound expression. Any change to the value of the childAttributeName attribute in child component has no effect on the value of parentAttributeName attribute in parent component and vice versa.
Following are the supported type where we can navigate,
For more details visit==>Lightning:navigation
For
more details visit==>Lightning:recordForm
information related to that record. The field-level security and sharing are taken into consideration by this component so user will only see the data they have access to.
For more details
visit==>Lightning:recordViewForm
For
more details visit==>Standard
controller of lightning component (force:recordData)
<force:recordData aura:id="someId"
recordId="{!v.recordId}"
layoutType="{!v.layout}"
fields="{!v.fieldsToQuery}"
mode="VIEW"
targetRecord="{!v.record}"
targetFields="{!v.simpleRecord}"
targetError="{!v.error}"
/>
mode can be either EDIT or VIEW.(View for displaying records, edit for creating or updating records)
layoutType specifies the layout (FULL or COMPACT).
fields specifies which fields in the record to query.
target attributes are attributes that force:recordData populates itself.
1) targetRecord is populated with the loaded record
2) targetFields is populated with the simplified view of the loaded record
3) targetError is populated with any errors
recordUpdated.
Sample syntax:
<force:recordData aura:id="forceRecordDataCmp"
recordId="{!v.recordId}"
layoutType="{!v.layout}"
targetRecord="{!v.recordObject}"
targetFields="{!v.recordFieldstoQuery}"
targetError="{!v.recordError}"
recordUpdated="{!c.recordUpdated}" />
For every force:recordData component referencing the updated record, LDS does two things.
- LDS notifies all other instances of force:recordData of the change by firing the recordUpdated event with the appropriate changeType and changedFields value.
- It sets the targetRecord and targetFields attribute on each force:recordData to the new record value. If targetRecord or targetFields is referenced by any UI, this automatically triggers a rerender so that the UI displays the latest data.
For more details visit==>Lightning out in
Salesforce
Sample syntax:
recordEvent.setParams({
For more details
visit==>force:createRecord in lightning
32) Explain force:editRecord event?
Syntax:
For more details
visit==>force:editRecord
in lightning
For more details
visit==>Lightning:datatable
in Salesforce
34) To form a container around a information related to single item or group of item what we need to use in lightning component?
36) you are asked to execute some action when value change is detected in one of the attribute what will you do?
37) You are having a requirement to pass value from child component to parent component which type of event you will use?
38) You are having a requirement to pass value from one component to other component which are not related but a part of same application which type of event you will use?
40) Lightning component is what type of framework?
41) How to use lightning component with Salesforce mobile app?
42) What are the requirement to call a server side controller method from Javascript controller?
43) When CRUD operations can be performed by form-based components like lightning:recordForm, lightning:recordViewForm, lightning:recordEditForm taking field level security into consideration so what is the need of force:recordData?
44) What are different component bundles in Salesforce Lightning component?
A component bundle contains a component or an app and all its related resources.
When you build lightning component you deal with the following component bundles,
- Component
- Components contains markup for component or app.
- The only required resource in a bundle.
- Each bundle contains only one component or app resource.
- Controller
Ex:
Mycontroller.js
- Helper
Ex: Myhelper.js
- Style
Ex: Mycomp.css
- Documentation
Ex: MyComp.auradoc
- Renderer
Ex: MyCompRenderer.js
- SVG
Ex: MyComp.svg
- Design
- App
49) Explain the below javascript controller method?
<aura:event type="COMPONENT" description="Event template" >
51) How to get the above event i.e(Component event) in Javascript controller of the component and how to fire it?
52) How to handle the above event i.e(Component event) in the parent component?
<aura:component >
Javascript controller:
({
Application event:
<aura:event type="APPLICATION" description="Event template" >
<aura:attribute name="storeMessage" type="String"/>
No, It is not necessary to register the application event. It is optional. You can directly fire the event without registering.
54) How to get the above event i.e(Application event) in Javascript controller of the component and how to fire it?
55) How to handle the above event i.e(Application event) in some other component?
<aura:component >
Controller:
({
56) What are the phases available with Component events?
2)Capture phase (Movement is from top to bottom in case of capture phase)
Default phase for the component event is Bubble phase.If we do not specify any phase it is considered as bubble phase in case of component events.
58) If in question 57 If i put phase="capture" in Top comp. How would be the behavior?
59) If in question 57 if i put phase="capture" in both Top and Middle comp. How would be the behavior?
60) If in question 57 if i put phase="capture" in Top comp and phase="bubble" in Middle comp.
How would be the behavior?
61) If in question 57 if i put phase="bubble" in Top comp and no phase in Middle comp.
How would be the behavior?
From Middle component controller
From top component controller
62) If in question 57 if i put phase="bubble" in Middle comp and no phase in Top comp.
How would be the behavior?
From Middle component controller
From top component controller
How would be the behavior?
From top component controller
NOTE:
1)Bubble phase will always moves from bottom to top.
Lightning Web Components Interview Questions.
As of now, we have built a lightning component using the "Aura Components model". we can also build a lightning component using the "Lightning Web Components model". Lightning Web Components are custom HTML elements build using the HTML Elements and modern Javascript. We can build components using any of the models and can place these components on the same lightning page.
For developing LWC we require "Salesforce Extensions for Visual Studio Code" and for deploying LWC from an org we require "Salesforce CLI".
Aura Components make use of own custom component model, custom templates, custom components, etc while LWC is built on web standards and it makes use of web components, templates, custom elements which we have in web standards. Both the Aura component, LWC make use of Security, LDS and Base lightning components.
Important points to note:
1) Aura component and LWC can exist on the same lightning page.
2) Aura component can include LWC
2) What is Scratch org?
Scratch org is a disposable Salesforce org used for development and testing.
Scratch org can be created for a maximum of 30 days after which scratch org gets deactivated. The default duration for Scratch org is 7 days.
3) Explain the Lightning Web Component Bundle?
LWC bundle contains an HTML file, a JavaScript file, and a metadata configuration file
and these files are created once we create a Lightning web component.
We can also create a .css file for styling purpose and We can also create SVG file for the purpose of displaying icon.
4) How to render the HTML file conditionally?
If we want to render HTML conditionally we can make use of if:true={propertyName},if:false={propertyName} in nested template tag.
5) How to iterate over an array in HTML file?
We can make use of for:each directive and iterator directive.
for:each directive:
for:each directive is used to render an array. To render an array add the for:each directive to a nested template tag, for:item is used to access the current item, for:index is used to access the current index.
Iterator directive:
If you have the requirement to access the first and the last element in the list use the iterator directive.
A sample HTML file is as shown below.
.html file
<template>
<!--for:each-->
<b>for:each directive</b>
<template for:each={students} for:item="item" for:index="index">
<p key={item.id}>
{item.Name}
{item.Branch}
</p>
</template>
<!--Iterator directive-->
<b>Iterator directive</b>
<template iterator:it={students}>
<li key={it.value.id}>
{it.value.id}
{it.value.Name}
{it.value.Branch}
</li>
<!--To access the first and the last element use {it.first} and {it.last}-->
</template>
</template>
1) @api
2) @track
3) @wire
- The HTML file is enclosed within the <template> tags.
- It contains the component HTML.
- The JavaScript file defines the behavior of HTML element present in HTML file.
- JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.
- If we want to import a class, function, or variable declared in a module we use the import statement.
- If we want to allow other code to use a class, function, or variable declared in a module we use the export statement.
- The core module in Lightning Web Components is lwc. The import statement imports LightningElement from the lwc module.
constructor()
connectedCallback()
disconnectedCallback()
render()
renderedCallback()
errorCallback(error, stack)
childcompdemo.html
childcompdemo.js
parentcompdemo.html
parentcompdemo.js
lightningapp.app
import { LightningElement, api } from 'lwc';
Parent component can make use of the Public Property.
childcompdemo.html
childcompdemo.js
parentcompdemo.html
parentcompdemo.js
lightningapp.app
childDemoComp.js
parentDemoComp.html
parentDemoComp.js
testApp.app
To call method of child LWC from parent Aura component we will need to decorate the
child LWC method with @api decorator, In AURA component we need to first assign aura id to child
LWC as highlighted in yellow color. Using component.find() we can get the child LWC and
finally call its method as highlighted in AURA component JS file.
parentAuraComp.cmp
<aura:component>
<div>
I am parent Aura Component.
</div>
<c:childLwcComp aura:id="childLwcCompId"></c:childLwcComp>
<lightning:button label="Call Child LWC Comp" variant="brand" onclick="{!c.callChildMethod}" ></lightning:button>
</aura:component>
parentAuraCompController.js
({
callChildMethod : function(component, event, helper) {
var findChildComp=component.find('childLwcCompId');
findChildComp.lwcCompMethodDescription('Hi I am Aura Component Message');
}
})
childLwcComp.html
<template>
<div>
I am child LWC component.
</div>
</template>
childLwcComp.js
import { LightningElement,api } from 'lwc';
export default class ChildLwcComp extends LightningElement {
@api
lwcCompMethodDescription(messageFromAura){
alert('messageFromAura :'+ messageFromAura);
}
}
auraAppForTesting.app
<aura:application>
<c:parentAuraComp></c:parentAuraComp>
</aura:application>
Output:
By using force:hasRecordId interface in Aura component we can get the id of the current record however in LWC it is very easy to get the id of the current record.
In the component’s JavaScript class, we use @api decorator to create a public recordId property.
For more details visit --> How to get record id in lightning web component?
If we want to control when the method invocation should occurs (for example, in response to clicking a button) than we call the method imperatively.
When we call a method imperatively, we receive only a single response.
However with @wire, it delegates control to the framework and results in a stream of values being provisioned.
Let us understand with a simple example,
getAccountDataImperatively.html
<template>
<div >
<lightning-input type="text" label="Enter Account Name" value={accName} onchange={handleChange}> </lightning-input>
<lightning-button variant="base" label="Search Account" title="Search Account" onclick={handleChangeMethod} class="slds-m-left_x-small"></lightning-button>
<p>Displaying Account Information</p>
<template if:true={accountRecord}>
<template for:each={accountRecord} for:item="item" for:index="index">
<p key={item.Id}>
Name: {item.Name}
</p>
</template>
</template>
<template if:true={error}>
Some error occured.
</template>
</div>
</template>
import { LightningElement,track } from 'lwc';
import getAccountRecordMethod from '@salesforce/apex/customAccountController.getAccountRecordMethod';
export default class GetAccountDataImperatively extends LightningElement {
@track accountRecord;
@track error;
@track accName;
handleChange(event){
const userInput = event.target.value;
this.accName= userInput;
}
handleChangeMethod() {
getAccountRecordMethod({
accNameParamInApex : this.accName
})
.then(result => {
this.accountRecord = result;
})
.catch(error => {
this.error = error;
});
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
public with sharing class customAccountController {
public customAccountController() {
}
@AuraEnabled(cacheable=true)
public static List<Account> getAccountRecordMethod(String accNameParamInApex) {
String accNameKey = '%'+accNameParamInApex+'%';
List<Account> accList=[SELECT Id, Name, Industry
FROM Account
Where name Like: accNameKey];
return accList;
}
}
<aura:application>
<c:getAccountDataImperatively></c:getAccountDataImperatively>
</aura:application>
Using lightning/uiRecordApi we can perform operations as mentioned below without using Apex.
1) Create a record
2) Get record data
3) Delete a record
4) Get a field value from record
5) Update a record and etc.
37) How to get information related to an object in LWC?
we can make use of getObjectInfo to get information related to an object
such as fields, apiName etc.
For example please refer: How to use getObjectInfo in Lightning Web Component?
- Scenario Based Interview Questions (Include questions on lightning component as well)
- Interview Questions on Trigger
- Interview Questions on Apex
- Interview Questions on Test Class
Great work, Thanks for sharing!!
ReplyDeleteThanks.
DeleteBest Blog I have ever Read. Best Collection of Questions.
ReplyDeleteThanks a lot
Deletevery good blog
ReplyDeleteThanks a lot
DeleteVery informative. Would like to read more
ReplyDeleteThanks a lot
Deletevery good blog i have ever read
ReplyDeleteThanks a lot
Deletegreat
ReplyDeleteThanks a lot
Deletegreat one
ReplyDeleteThanks a lot
DeleteIs this for any position with Salesforce or only if you will be doing data? Would a Sales canidate be asked these questions?
ReplyDeleteThese questions are related to Salesforce developer interview
Deletecool
ReplyDeleteThanks for Visiting
DeleteYour efforts helps across many people.Very useful material with code example
ReplyDeleteThanks for Visiting
Deletethanks for putting lot of efforts in creating this blog, really helpful and appreciated
ReplyDeleteThanks for Visiting
DeleteGreat set of questions,Thanks very much
ReplyDeleteThanks for visiting.
DeleteThis is one of the best blogs for Salesforce Lightning.
ReplyDeletePlease keep adding more questions and topics on Salesforce Lightning. Atlease add one topic a week and 10 Interview questions on Lightning every week so that it would be of great help to all learners. Thanks again for your valuable time and precious efforts...
Thanks for the appreciation, will try my best.
DeleteAmazing tutorial with clear concept
ReplyDeleteAwesome blog
ReplyDeleteIt's amazing tutorial with examples...Superb
ReplyDeleteReally Good Blog....Thanks for sharing
ReplyDeleteVery good !
ReplyDeleteVery Informative, was glad to find this blog. Thanks for sharing!!
ReplyDeleteThank you so much for such a detailed explanation! Appreciate it!
ReplyDeleteThank you for all your efforts for sharing the best content
ReplyDeleteReally amazing content. Thanks for sharing!!
ReplyDeleteFantastic content , Thanks for sharing .
ReplyDeleteGreat Great content ! Awesome and Thanks !!
ReplyDeleteGood collection of quetions
ReplyDeleteThank you! super collection.
ReplyDeleteGood set of questions and answers are so clearly explained. Thanks a lot.
ReplyDelete