1.

Aura-Lightning
__________________________________________________________________-

1. create domain name for your org :

setup

|-----Adminster

|--------Domain Management

|--------------MyDomain

a. Enter Domain Name

b. Check availabilty

c. Register

4. Click on login button to test the connection

5. Deploy to users so that users can login using this domain url

2. create package : This is optional ,but if you want to provide lightning apps to

the external system or if you want to provide this

lightning application as Appexchange product then

Package creation is a must

====================================================================================

Lishtning Application

====================================================================================

1. Steps to create lightning Application

UserName

|----Developer Console

|---File

|--Lightning App

1
 |---App name

Note : All the lightning applications will have an extention of .app

Ex: <aura:application>

This is a test application

</aura:applicaiton>

2. <aura: applicaiton >

1. Every lightning application will start and end with <aura:applicaiton> component .

2. Arributes :

a.access :

1.indicates whether this app can be extended by another app outside

of a namespace.

2.possible values : global and public

b.controller:

1.This is will take name of the Apex class whose functionalities are used

in this application..

2.If you create namespace : :namespace.className.

3.if you dont create namespace : classname

c.extends:

1. Lighning application can extend another lightning applicaiton.

2. Name of the the application we want to extend should be given as exends

2
 d.extensible:

1.Indicates whether this app can be extended by another app.

2.possible values : true /false

e. implements:

1.It will take the list of interfaces that the application want to

implements.

2.Ex : implements ="one,two,three"

Note : App can implement more than one interface

=====================================================================================
==

Component :

=====================================================================================
==

1.<aura:component> :

a. Components are the functional units of Aura,

b. These components encapsulate modular and reusable sections of UI.

c. They can contain other components or HTML markup.

Syntax:

<aura:component>

<!-- Optional component attributes here -->

<!-- Optional HTML markup -->

</aura:component>

d.Attributes :

3
1.access :

a.indicates whether this component can be extended by another app outside

of a namespace.

b.possible values : global and public

2.controller :

a.This is will take name of the Apex class whose functionalities are

used in this Component.

b. If you create namespace : :namespace.className.

c.if you dont create namespace : classname

3. extends :

a.name of the component which need to be extended .

4. extensible:

a.Indicates whether this componnent can be extended by another component.

b.possible values : true /false

5. implements :

a.It will take the list of interfaces that the component want to implements.

Ex : implements ="one,two,three"

Note : Componnet can implement more than one interface

e. Steps to create aura: componet

4
 UserName

|---Developer console

|--File

|--Lightning Componet

|---Component Name

Example : capital1.cmp

<aura:component >

<h1> This is a line one </h1>

<h2> This is line two</h2>

<h3> This is line three</h3>

</aura:component>

f. How to invoke the component in the application ;

1. if the you have created any namespace then is should be called using namespace

<namespace: componentName >

Ex: if namespace : capitalInfosol

component name is : example1

<capitalinfosol : example1>

2. if you dont have the namespace then it will be called using defualt namespace i.e c

<c: example1>

Example : one .app

5
 <aura:application >

This is a test app

<c:capital1></c:capital1>

</aura:application>

=====================================================================================
=======================

Example 1 : Create an application with multiple components

=====================================================================================
=======================

a . Create a new component : student

<aura:component >

<h1> Iam new Student </h1>

<div> This is a test component</div>

</aura:component>

b. create a new component studentAddress

<aura:component >

<div>

Ameerpet <br/>

SRNagar <br/>

Hyd <br/>

TG <br/>

</div>

</aura:component>

c. Create new Application : app2

<auar: application >

<c:student />

6
 <c:studentAddress />

</aura:application>

=====================================================================================
==========

Example 2: Applying CSS on component

=====================================================================================
=========

1. create a Component : csscomp.cmp

<aura:component >

<h1> This is line one </h1>

<div class="red"> This is red</div>

<div class="green"> This is green</div>

<div class="blue"> This is blue</div>

</aura:component>

2. Style : Click on Style button on the right side wizard

:Then it creates csscomp.css

.THIS {

background-color:yellow;

padding-top : 40px;

padding-left :40px;

.THIS.red {

background-color: red;

7
 .THIS.blue {

background-color: blue;

.THIS.green {

background-color: green;

3. Application : capital3

<aura: application>

<c:csscomp> </c:csscomp>

<aura :application>

=====================================================================================
================

Creating attributes for a component

=====================================================================================
==============

<aura:attribute>

aura:attribute is used to create an attribute on an app, interface, component, or event.

Attributes :

a. access :Indicates whether the attribute can be used outside of its own namespace.

b. name :Required. The name of the attribute.

c. type :Required. The type of the attribute.

Possible values (Date,DateTime,Decimal,Double,Integer ,Long ,string

,Boolean )

8
 d. defualt : Value that should be assingned to the attribue if no values are assigned to it

e. description : A summary of the attribute and its usage

f. required : Specified wheather attribute value need to be required to run this component.

Example :

<aura: attribue name="empName" type="String" defualt="capitalinfo" required="true" />

Examples :

<aura:component >

<aura:attribute name="empName" type="string" />

<aura:attribute name="salary" type="Decimal" required="true" />

<aura:attribute name="city" type="string" default="Hyd" />

<aura:attribute name="phones" type="String[]" description="This contains all

phone numbers of account" />

</aura:component>

How to read the values of attributes in the component / appliation

1. we get the values of the atrributes using {! v.attributeName}

Ex : {! v.empName }

Ex :{! v.salary}

Ex :{! v.city}

Ex :{! v.phone}

Example : How to pass the values of the component from application .

a. Create a new Component :employee.cmp

9
 <aura:component >

<aura:attribute name="name" type="string" required="true"/>

<aura:attribute name="exp" type="Decimal" />

<aura:attribute name="City" type="String" default="Hyd" />

<div>

Employee Name : {! v.name} <br/>

Employee Exp : {! v.exp} <br/>

Employee City :{! v.city}

</div>

</aura:component>

b. create style for the component : employee.css

.THIS {

padding-top: 40px;

padding-left:80px;

color: blue;

c. Create an application : capital.4

<aura:application >

<c:employee name="Satish Myla" exp="3.4" />

</aura:application>

=====================================================================================
===============

<aura:handler>

a. This component is used to intialize the values /attributes in the component /application

10
 b. This event istriggered on app or component for initialization.

c. This event is automatically fired when an app or component is has initializations prior

to rendering.

Attributes :

a .name: It should be alwasys "init" only

b. value: This should be assined {! this}

c. action :The client-side controller action that handles the value change.

Syntax :

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

Syntax of controller :

({

methodname :function(component){

})

Q:: How to read the values of attributes with in the controller

component.get("v.attributename");

Q:: How to set the values of attributes with in the controller

component.set("v.attribute" ,value);

=====================================================================================
==========

Example 1:

11
a. Create a component with three attributes aval,bval,cval

Calculate.cmp

<aura:component >

<aura:attribute name="aval" type="Integer" required="true" />

<aura:attribute name="bval" type="Integer" required="true"/>

<aura:attribute name="cval" type="Integer" />

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

<div>

<h2> AVal : {!v.aval}</h2>

<h2>BVal :{!v.bval}</h2>

<h2>CVal :{!v.cval}</h2>

</div>

</aura:component>

b. create style for the component :

.THIS {

padding-left :80px;

padding-top :80px;

color :green;

c. create a clientside controller by clicking controller button on right side menu wizard

calculate.js

({

add : function(component) {

var aval=component.get("v.aval");

12
 var bval=component.get("v.bval");

var cval=aval+bval;

component.set("v.cval",cval);

})

d. crate new application capital.app

<aura:application >

<c:calculate aval="10" bval="10" />

</aura:application>

Examples 2 :

a. create a new custom component :

empcomp

<aura:component >

<aura:attribute name="empName" type="string" default="Enter Name" />

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

Employee Name :{! v.empName}

</aura:component>

b. createa client side Controller:

({

show : function(component) {

component.set(" v.empName "," Satish Myla ");

})

c create a Application :

13
 <aura:application >

<c:empcomp> </c:custom1>

</aura:application>

Example 3:

a. create custom component : intrestcalcualte

<aura:component >

<aura:attribute name="empName" type="string" default="Enter Name" />

<aura:attribute name="amount" type="decimal" />

<aura:attribute name="rate" type="integer" />

<aura:attribute name="years" type="integer" />

<aura:attribute name="intrest" type="decimal" />

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

<div>

Employee Name :{! v.empName} <br/>

Amount : {!v.amount} <br/>

Rate : {!v.rate} <br/>

Years :{! v.years} <br/>

Intrest:{! v.intrest}

</aura:component>

b. create a css style for a component ;

.THIS {

padding-left :80px;

padding-top :80px;

color :green;

14
c. create a clinet side controller

({

calcualte : function(component) {

component.set("v.empName","satish myla");

var amount=component.get("v.amount");

var years=component.get("v.years");

var rate=component.get("v.rate");

var intrest=amount*years*rate/100;

component.set("v.intrest",intrest);

})

d. create an application

<aura:application >

<c:intrestcalcualte amount="10000" rate="10" years="2"></c:comp3>

</aura:application>

15
=====================================================================================
========================

How to refer to array of elements :

=====================================================================================
======================

<aura:iteration> :

1. This component is used to display collecton elements by iterating over every elemet

Attribues :

items : Required. The collection of data to iterate over.

var : Required. The variable name to use for each item inside the iteration.

Example 1:

1. create custom componet :

collection1:

<aura:component>

<aura:iteration items="1,2,3,4,5" var="item">

<h1>Items : {!item}</h1>

</aura:iteration>

</aura:component>

2. Create a applicaiton : capital6

<aura:application>

<c:collection1 />

</aura:application>

16
Example 2:

1. create custom component : collection2.cmp

<aura:component >

<aura:attribute name="names" type="string[]" default="['Ram','Ravi','Kiran']" />

<aura:iteration items="{!v.names}" var="s">

<h1> Employee Name :{!s} </h1>

</aura:iteration>

</aura:component>

2. Application :

<aura:application >

<c:collection2></c:collection2>

</aura:application>

Example 3:

1. create a custom component :

<aura:component >

<aura:attribute name="names" type="string[]" />

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

<aura:iteration items="{!v.names}" var="s">

<h1> Employee Name :{!s} </h1>

</aura:iteration>

</aura:component>

2. create custom controller

({

callme : function(component) {

17
 var names=['Ram','Kiran','Hari'];

component.set("v.names",names);

})

3. create new Application

<aura:application >

<c:collection3></c:collection3>

</aura:application>

=====================================================================================
======

Example : Creating Form using UI components in Lightning

1. create the component to create UI comonents

<aura:component >

<ui:inputNumber label="Amount" placeholder="0" /><br/>

<ui:inputText label="Enter Name" placeholder="FirstName,Last" /><br/>

<ui:inputCurrency label="Salary " /> <br/>

<ui:inputDateTime label="Date" displayDatePicker="true"/>

<ui:button label="Submit" />

</aura:component>

2. create a application

<aura:application >

<c:uicomponent1 />

</aura:application>

18
-------------------------------------------------------------------------------------------

Q:: Setting and getting values of component using id in the controller method

component.find("idname").get("v.value");

component.find("idname").set("v.value",value);

----------------------------------------------------------------------------------------------

Example 1:

1. create a component :uicomponent2

<aura:component >

<ui:inputText label="Enter Name" placeHolder="Employee Name"

aura:id="name" />

<ui:inputText label="My Name " aura:id="myname" />

<ui:button label="submit" press="{!c.callme}" />

</aura:component>

2. create a controller :

({

callme : function(component) {

var name=component.find("name").get("v.value");

component.find("myname").set("v.value",name);

})

3. Create a application :

<aura:application >

<c:uicomponent2 />

</aura:application>

19
Example 2 :

<aura:component >

<ui:inputText label="Name" aura:id="name" placeholder="First, Last"/>

<ui:button aura:id="outputButton" label="Submit" press="{!c.getInput}"/>

<ui:outputText aura:id="nameOutput" value=""/>

</aura:component>

Controller :

({

getInput : function(cmp, event) {

var fullName = cmp.find("name").get("v.value");

var outName = cmp.find("nameOutput");

outName.set("v.value", fullName);

})

Application :

<aura:application >

<c:comp5></c:comp5>

</aura:application>

20
=====================================================================================
========

Example 9 :set the attribute values from the UI components based on the events on componets

<aura:component >

<aura:attribute name="first" type="String" default="John"/>

<aura:attribute name="last" type="String" default="Doe"/>

<ui:inputText label="First Name" value="{!v.first}" updateOn="keyup"/>

<ui:inputText label="Last Name" value="{!v.last}" updateOn="keyup"/>

<!-- Returns "John Doe" -->

<ui:outputText value="{!v.first +' '+ v.last}"/>

</aura:component>

Application :

<aura:application >

<c:comp6></c:comp6>

</aura:application>

=====================================================================================
=====

Example 10:Creating a picklist component

<aura:component >

21
 <ui:inputSelect>

<ui:inputSelectOption text="Red"/>

<ui:inputSelectOption text="Green" value="true"/>

<ui:inputSelectOption text="Blue"/>

</ui:inputSelect>

</aura:component>

Application :

<aura:application>

<c:compPick></c:compPick>

</aura:application>

=====================================================================================
=======

Example 12: If Else in the lightning

<aura:component >

<aura:attribute name="edit" type="Boolean" default="true"/>

<aura:if isTrue="{!v.edit}">

<ui:button label="Edit"/>

<aura:set attribute="else">

No button

</aura:set>

</aura:if>

</aura:component>

22
Application :

<aura:application>

<c:comp8></c:comp8>

</aura:application>

=====================================================================================
=====

Reading the data from the Apex Class:

1. Every method of the apex which we want to invoke in the lightning should obey the following
rules

a . Method should be annotated with @AuraEnabled

b. Method should be static method

c. Method should have returnType to pass the data

2. If you want to the apex class in the lightning component / application it should be define as a
controller

3.When we want to invoke the reffer to the server-side controller method from the client side
controller

method

Syntax :

component.get("c.methodName");

4. When want to the setCallback of to the controller

var mycall=component.get("c.methodName");

myCall.setcallback(this, function(response) {

23
 logic

});

5.When the method gives the reponse check the status

var state=response.getStatus();

6.Every apex method invocation from the controller javascript is asynchronous so we need to

enqueu the job;

$A.enqueueAction(action);

Example :

1. Create a apex class with aura enabled methods

Apex class : AuraExample1

public class AuraExample1 {

@AuraEnabled

public Static String getName(){

return 'Satish Myla';

2. create a custom Componet which invokes the apex class

<aura:component controller="AuraExample1">

<aura:attribute name="empName" type="string" />

<ui:button label="Get EmpData" press="{!c.show}"/>

<h1>Employee Name :{! v.empName} </h1>

</aura:component>

3. create a client side controller

24
 ({

show : function(component) {

var action=component.get("c.getName");

action.setCallback(this, function(response){

var state = response.getState();

if (state === "SUCCESS") {

component.set("v.empName",
response.getReturnValue());

});

$A.enqueueAction(action);

})

4. create a application

<aura:application >

<c:apexcall />

</aura:application>

=====================================================================================
==========

Example 14: Reading a list account records from Sobject and display in Lightning

Apex class : AuraExample2:

public class AuraExample2 {

25
 @AuraEnabled

public Static Account[] getAccounts(){

List<Account> accs=[select id,name from Account limit 4];

return accs;

Component : Custom5 :

<aura:component controller="AuraExample2">

<aura:attribute name="Accounts" type="Account[]" />

<ui:button label="Get Accounts" press="{!c.getAccs}"/>

<aura:iteration var="a" items="{!v.Accounts}">

<p>{!a.Name} : {!a.Id}</p>

</aura:iteration>

</aura:component>

Controller:

({

getAccs: function(cmp){

var action = cmp.get("c.getAccounts");

action.setCallback(this, function(response){

var state = response.getState();

if (state === "SUCCESS") {

cmp.set("v.Accounts", response.getReturnValue());

26
 }

});

$A.enqueueAction(action);

})

Application :

<aura:application >

<c:custom5></c:custom5>

</aura:application>

=====================================================================================
=========

Example 15 :Setting the body part of the component

-------------------------------------------------------------------

<aura:component>

<aura:set attribute="body">

<!--START BODY-->

<div>Body part</div>

<ui:button label="Push Me"/>

<!--END BODY-->

</aura:set>

</aura:component>

App6.app

<aura:application >

<c:bodyAttribute></c:bodyAttribute>

</aura:application>

27
-------------------------------------------------------------------------

Example 16: Component Facets

-------------------------------------------------------------------------

facetHeader.cmp

<aura:component>

<aura:attribute name="header" type="Aura.Component[]"/>

<div>

<span class="header">{!v.header}</span><br/>

<span class="body">{!v.body}</span>

</div>

</aura:component>

facetHeaders.cmp

<aura:component>

See how we set the header facet.<br/>

<c:facetHeader>

Nice body!

<aura:set attribute="header">

Hello Header!

</aura:set>

</c:facetHeader>

</aura:component>

Application

<aura:application >

<c:facetHeaders></c:facetHeaders>

</aura:application>

28
=====================================================================================
===

Example 17 : Adding lightning application in vf page

<aura:application access="GLOBAL" extends="ltng:outApp">

<aura:dependency resource="ui:button"/>

</aura:application>

VF Page :

<apex:page>

<apex:includeLightning />

<div id="lightning" />

<script>

$Lightning.use("c:app15", function() {

$Lightning.createComponent("ui:button",{ label : "Press Me!" },

"lightning",function(cmp) {});

});

</script>

</apex:page>

29
====================================================================================

2.Lishtning Application

====================================================================================

1. Steps to create lightning Application

UserName

|----Developer Console

|---File

|--Lightning App

|---App name

Note : All the lightning applications will have an extention of .app

Ex: <aura:application>

This is a test application

</aura:applicaiton>

2. <aura: applicaiton >

1. Every lightning application will start and end with <aura:applicaiton> component .

2. Arributes :

a.access :

1.indicates whether this app can be extended by another app outside

of a namespace.

2.possible values : global and public

30
 b.controller:

1.This is will take name of the Apex class whose functionalities are used

in this application..

2.If you create namespace : :namespace.className.

3.if you dont create namespace : classname

c.extends:

1. Lighning application can extend another lightning applicaiton.

2. Name of the the application we want to extend should be given as exends

d.extensible:

1.Indicates whether this app can be extended by another app.

2.possible values : true /false

e. implements:

1.It will take the list of interfaces that the application want to

implements.

2.Ex : implements ="one,two,three"

Note : App can implement more than one interface

=====================================================================================
==

3.Component :

=====================================================================================
==

1.<aura:component> :

31
a. Components are the functional units of Aura,

b. These components encapsulate modular and reusable sections of UI.

c. They can contain other components or HTML markup.

Syntax:

<aura:component>

<!-- Optional component attributes here -->

<!-- Optional HTML markup -->

</aura:component>

d.Attributes :

1.access :

a.indicates whether this component can be extended by another app outside

of a namespace.

b.possible values : global and public

2.controller :

a.This is will take name of the Apex class whose functionalities are

used in this Component.

b. If you create namespace : :namespace.className.

c.if you dont create namespace : classname

3. extends :

a.name of the component which need to be extended .

4. extensible:

a.Indicates whether this componnent can be extended by another component.

32
 b.possible values : true /false

5. implements :

a.It will take the list of interfaces that the component want to implements.

Ex : implements ="one,two,three"

Note : Componnet can implement more than one interface

e. Steps to create aura: componet

UserName

|---Developer console

|--File

|--Lightning Componet

|---Component Name

Example : capital1.cmp

<aura:component >

<h1> This is a line one </h1>

<h2> This is line two</h2>

<h3> This is line three</h3>

</aura:component>

f. How to invoke the component in the application ;

1. if the you have created any namespace then is should be called using namespace

33
 <namespace: componentName >

Ex: if namespace : capitalInfosol

component name is : example1

<capitalinfosol : example1>

2. if you dont have the namespace then it will be called using defualt namespace i.e c

<c: example1>

Example : one .app

<aura:application >

This is a test app

<c:capital1></c:capital1>

</aura:application>

=====================================================================================
=======================

Example 1 : Create an application with multiple components

=====================================================================================
=======================

a . Create a new component : student

<aura:component >

<h1> Iam new Student </h1>

<div> This is a test component</div>

</aura:component>

b. create a new component studentAddress

<aura:component >

34
 <div>

Ameerpet <br/>

SRNagar <br/>

Hyd <br/>

TG <br/>

</div>

</aura:component>

c. Create new Application : app2

<auar: application >

<c:student />

<c:studentAddress />

</aura:application>

=====================================================================================
==========

Example 2: Applying CSS on component

=====================================================================================
=========

1. create a Component : csscomp.cmp

<aura:component >

<h1> This is line one </h1>

<div class="red"> This is red</div>

<div class="green"> This is green</div>

<div class="blue"> This is blue</div>

</aura:component>

2. Style : Click on Style button on the right side wizard

35
 :Then it creates csscomp.css

.THIS {

background-color:yellow;

padding-top : 40px;

padding-left :40px;

.THIS.red {

background-color: red;

.THIS.blue {

background-color: blue;

.THIS.green {

background-color: green;

3. Application : capital3

<aura: application>

<c:csscomp> </c:csscomp>

<aura :application>

=====================================================================================
================

Creating attributes for a component

36
=====================================================================================
==============

<aura:attribute>

aura:attribute is used to create an attribute on an app, interface, component, or event.

Attributes :

a. access :Indicates whether the attribute can be used outside of its own namespace.

b. name :Required. The name of the attribute.

c. type :Required. The type of the attribute.

Possible values (Date,DateTime,Decimal,Double,Integer ,Long ,string

,Boolean )

d. defualt : Value that should be assingned to the attribue if no values are assigned to it

e. description : A summary of the attribute and its usage

f. required : Specified wheather attribute value need to be required to run this component.

Example :

<aura: attribue name="empName" type="String" defualt="capitalinfo" required="true" />

Examples :

<aura:component >

<aura:attribute name="empName" type="string" />

<aura:attribute name="salary" type="Decimal" required="true" />

<aura:attribute name="city" type="string" default="Hyd" />

<aura:attribute name="phones" type="String[]" description="This contains all

phone numbers of account" />

</aura:component>

37
How to read the values of attributes in the component / appliation

1. we get the values of the atrributes using {! v.attributeName}

Ex : {! v.empName }

Ex :{! v.salary}

Ex :{! v.city}

Ex :{! v.phone}

Example : How to pass the values of the component from application .

a. Create a new Component :employee.cmp

<aura:component >

<aura:attribute name="name" type="string" required="true"/>

<aura:attribute name="exp" type="Decimal" />

<aura:attribute name="City" type="String" default="Hyd" />

<div>

Employee Name : {! v.name} <br/>

Employee Exp : {! v.exp} <br/>

Employee City :{! v.city}

</div>

</aura:component>

b. create style for the component : employee.css

.THIS {

padding-top: 40px;

padding-left:80px;

color: blue;

38
 }

c. Create an application : capital.4

<aura:application >

<c:employee name="Satish Myla" exp="3.4" />

</aura:application>

4..LightningHandler.txt

<aura:handler>

a. This component is used to intialize the values /attributes in the component /application

b. This event istriggered on app or component for initialization.

c. This event is automatically fired when an app or component is has initializations prior to
rendering. T

Attributes :

a .name: It should be alwasys "init" only

b. value: This should be assined {! this}

c. action :The client-side controller action that handles the value change.

Syntax :

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

Syntax of controller :

({

methodname :function(component){

39
 })

Q:: How to read the values of attributes with in the controller

component.get("v.attributename");

Q:: How to set the values of attributes with in the controller

component.set("v.attribute" ,value);

=====================================================================================
=======================

Example 1:

=====================================================================================
=========================

a. Create a component with three attributes aval,bval,cval

Calculate.cmp

<aura:component >

<aura:attribute name="aval" type="Integer" required="true" />

<aura:attribute name="bval" type="Integer" required="true"/>

<aura:attribute name="cval" type="Integer" />

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

<div>

<h2> AVal : {!v.aval}</h2>

<h2>BVal :{!v.bval}</h2>

<h2>CVal :{!v.cval}</h2>

</div>

</aura:component>

40
 b. create style for the component :

.THIS {

padding-left :80px;

padding-top :80px;

color :green;

c. create a clientside controller by clicking controller button on right side menu wizard

calculate.js

({

add : function(component) {

var aval=component.get("v.aval");

var bval=component.get("v.bval");

var cval=aval+bval;

component.set("v.cval",cval);

})

d. crate new application capital.app

<aura:application >

<c:calculate aval="10" bval="10" />

</aura:application>

=====================================================================================
===============

Examples 2 :

=====================================================================================
================

41
 a. create a new custom component :

empcomp

<aura:component >

<aura:attribute name="empName" type="string" default="Enter Name" />

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

Employee Name :{! v.empName}

</aura:component>

b. createa client side Controller:

({

show : function(component) {

component.set(" v.empName "," Satish Myla ");

})

c create a Application :

<aura:application >

<c:empcomp> </c:custom1>

</aura:application>

=====================================================================================
=================

Example 3:

=====================================================================================
==================

a. create custom component : intrestcalcualte

<aura:component >

<aura:attribute name="empName" type="string" default="Enter Name" />

42
 <aura:attribute name="amount" type="decimal" />

<aura:attribute name="rate" type="integer" />

<aura:attribute name="years" type="integer" />

<aura:attribute name="intrest" type="decimal" />

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

<div>

Employee Name :{! v.empName} <br/>

Amount : {!v.amount} <br/>

Rate : {!v.rate} <br/>

Years :{! v.years} <br/>

Intrest:{! v.intrest}

</aura:component>

b. create a css style for a component ;

.THIS {

padding-left :80px;

padding-top :80px;

color :green;

c. create a clinet side controller

({

calcualte : function(component) {

component.set("v.empName","satish myla");

var amount=component.get("v.amount");

43
 var years=component.get("v.years");

var rate=component.get("v.rate");

var intrest=amount*years*rate/100;

component.set("v.intrest",intrest);

})

d. create an application

<aura:application >

<c:intrestcalcualte amount="10000" rate="10" years="2"></c:comp3>

</aura:application>

5 .LightningIterator

_____________________________________________________________________________________

How to refer to array of elements :

=====================================================================================
======================

<aura:iteration> :

1. This component is used to display collecton elements by iterating over every elemet

Attribues :

items : Required. The collection of data to iterate over.

44
 var : Required. The variable name to use for each item inside the iteration.

Example 1:

1. create custom componet :

collection1:

<aura:component>

<aura:iteration items="1,2,3,4,5" var="item">

<h1>Items : {!item}</h1>

</aura:iteration>

</aura:component>

2. Create a applicaiton : capital6

<aura:application>

<c:collection1 />

</aura:application>

Example 2:

1. create custom component : collection2.cmp

<aura:component >

<aura:attribute name="names" type="string[]" default="['Ram','Ravi','Kiran']" />

<aura:iteration items="{!v.names}" var="s">

<h1> Employee Name :{!s} </h1>

</aura:iteration>

</aura:component>

45
 2. Application :

<aura:application >

<c:collection2></c:collection2>

</aura:application>

Example 3:

1. create a custom component :

<aura:component >

<aura:attribute name="names" type="string[]" />

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

<aura:iteration items="{!v.names}" var="s">

<h1> Employee Name :{!s} </h1>

</aura:iteration>

</aura:component>

2. create custom controller

({

callme : function(component) {

var names=['Ram','Kiran','Hari'];

component.set("v.names",names);

})

3. create new Application

<aura:application >

<c:collection3></c:collection3>

</aura:application>

46
6 .LightningUIExamples

Example : Creating Form using UI components in Lightning

1. create the component to create UI comonents

<aura:component >

<ui:inputNumber label="Amount" placeholder="0" /><br/>

<ui:inputText label="Enter Name" placeholder="FirstName,Last" /><br/>

<ui:inputCurrency label="Salary " /> <br/>

<ui:inputDateTime label="Date" displayDatePicker="true"/>

<ui:button label="Submit" />

</aura:component>

2. create a application

<aura:application >

<c:uicomponent1 />

</aura:application>

-------------------------------------------------------------------------------------------

Q:: Setting and getting values of component using id in the controller method

component.find("idname").get("v.value");

component.find("idname").set("v.value",value);

47
----------------------------------------------------------------------------------------------

Example 1:

1. create a component :uicomponent2

<aura:component >

<ui:inputText label="Enter Name" placeHolder="Employee Name"

aura:id="name" />

<ui:inputText label="My Name " aura:id="myname" />

<ui:button label="submit" press="{!c.callme}" />

</aura:component>

2. create a controller :

({

callme : function(component) {

var name=component.find("name").get("v.value");

component.find("myname").set("v.value",name);

})

3. Create a application :

<aura:application >

<c:uicomponent2 />

</aura:application>

Example 2 :

<aura:component >

48
 <ui:inputText label="Name" aura:id="name" placeholder="First, Last"/>

<ui:button aura:id="outputButton" label="Submit" press="{!c.getInput}"/>

<ui:outputText aura:id="nameOutput" value=""/>

</aura:component>

Controller :

({

getInput : function(cmp, event) {

var fullName = cmp.find("name").get("v.value");

var outName = cmp.find("nameOutput");

outName.set("v.value", fullName);

})

Application :

<aura:application >

<c:comp5></c:comp5>

</aura:application>

=====================================================================================
========

Example 9 :set the attribute values from the UI components based on the events on componets

<aura:component >

<aura:attribute name="first" type="String" default="John"/>

<aura:attribute name="last" type="String" default="Doe"/>

49
 <ui:inputText label="First Name" value="{!v.first}" updateOn="keyup"/>

<ui:inputText label="Last Name" value="{!v.last}" updateOn="keyup"/>

<!-- Returns "John Doe" -->

<ui:outputText value="{!v.first +' '+ v.last}"/>

</aura:component>

Application :

<aura:application >

<c:comp6></c:comp6>

</aura:application>

=====================================================================================
=====

Example 10:Creating a picklist component

<aura:component >

<ui:inputSelect>

<ui:inputSelectOption text="Red"/>

<ui:inputSelectOption text="Green" value="true"/>

<ui:inputSelectOption text="Blue"/>

</ui:inputSelect>

</aura:component>

50
Application :

<aura:application>

<c:compPick></c:compPick>

</aura:application>

=====================================================================================
=======

Example 12: If Else in the lightning

<aura:component >

<aura:attribute name="edit" type="Boolean" default="true"/>

<aura:if isTrue="{!v.edit}">

<ui:button label="Edit"/>

<aura:set attribute="else">

No button

</aura:set>

</aura:if>

</aura:component>

Application :

<aura:application>

<c:comp8></c:comp8>

</aura:application>

51
7 .LightningApexcall

_____________________________________________________________________________________

Reading the data from the Apex Class:

1. Every method of the apex which we want to invoke in the lightning should obey the following
rules

a . Method should be annotated with @AuraEnabled

b. Method should be static method

c. Method should have returnType to pass the data

2. If you want to the apex class in the lightning component / application it should be define as a
controller

3.When we want to invoke the reffer to the server-side controller method from the client side
controller

method

Syntax :

component.get("c.methodName");

4. When want to the setCallback of to the controller

var mycall=component.get("c.methodName");

myCall.setcallback(this, function(response) {

logic

});

5.When the method gives the reponse check the status

var state=response.getStatus();

52
 6.Every apex method invocation from the controller javascript is asynchronous so we need to

enqueu the job;

$A.enqueueAction(action);

Example :

1. Create a apex class with aura enabled methods

Apex class : AuraExample1

public class AuraExample1 {

@AuraEnabled

public Static String getName(){

return 'Satish Myla';

2. create a custom Componet which invokes the apex class

<aura:component controller="AuraExample1">

<aura:attribute name="empName" type="string" />

<ui:button label="Get EmpData" press="{!c.show}"/>

<h1>Employee Name :{! v.empName} </h1>

</aura:component>

3. create a client side controller

({

show : function(component) {

var action=component.get("c.getName");

action.setCallback(this, function(response){

var state = response.getState();

53
 if (state === "SUCCESS") {

component.set("v.empName",
response.getReturnValue());

});

$A.enqueueAction(action);

})

4. create a application

<aura:application >

<c:apexcall />

</aura:application>

=====================================================================================
==========

Example ; Reading a list account records from Sobject and display in Lightning

Apex class : AuraExample2:

public class AuraExample2 {

@AuraEnabled

public Static Account[] getAccounts(){

List<Account> accs=[select id,name from Account limit 4];

return accs;

54
 }

Component : Custom5 :

<aura:component controller="AuraExample2">

<aura:attribute name="Accounts" type="Account[]" />

<ui:button label="Get Accounts" press="{!c.getAccs}"/>

<aura:iteration var="a" items="{!v.Accounts}">

<p>{!a.Name} : {!a.Id}</p>

</aura:iteration>

</aura:component>

Controller:

({

getAccs: function(cmp){

var action = cmp.get("c.getAccounts");

action.setCallback(this, function(response){

var state = response.getState();

if (state === "SUCCESS") {

cmp.set("v.Accounts", response.getReturnValue());

});

$A.enqueueAction(action);

})

55
Application :

<aura:application >

<c:custom5></c:custom5>

</aura:application>

8. Lightning ApexWithHTML

public with sharing class AccountController {

@AuraEnabled

public static List<Account> findAll() {

return [SELECT id, Name, AccountNumber, Fax,Industry,Type FROM Account LIMIT 10];

========================

AccountListController

<aura:component controller="AccountController" implements="flexipage:availableForAllPageTypes" >

<aura:attribute name="accounts" type="Account[]"/>

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

<div class="table table-bordered">

<table class="table table-striped">

<thead>

<tr>

<th>Account Name</th>

<th>Account Number</th>

<th>Fax</th>

<th>Industry</th>

<th>Type</th>

</tr>

</thead>

56
 <tbody>

<aura:iteration items="{!v.accounts}" var="account">

<tr>

<td>{!account.Name}</td>

<td>{!account.AccountNumber}</td>

<td>{!account.Fax}</td>

<td>{!account.Industry}</td>

<td>{!account.Type}</td>

</tr>

</aura:iteration>

</tbody>

</table>

</div>

</aura:component>

=========================

({

doInit : function(component, event, helper) {

var action = component.get("c.findAll");

action.setCallback(this, function(a) {

component.set("v.accounts", a.getReturnValue());

});

$A.enqueueAction(action);

})

================================

<aura:application >

<link href='/resource/bootstrap/' rel="stylesheet"/>

57
 <div class="container">

<nav role="navigation" class="navbar navbar-inverse">

<div class="navbar-header">

<a href="#" class="navbar-brand">Accounts Details</a>

</div>

<div id="navbarCollapse" class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul>

</div>

</nav>

</div>

<div class="container">

<div class="row">

<div class="col-sm-12">

<c:accountListComponent/>

</div>

</div>

</div>

</aura:application>

=========================

______________________________________________________________________________

Aura_Methods.txt

______________________________________________________________________________

<aura:component>

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

58
 <aura:method name="defaultParamers" action="{!c.loadDefaultParams}">

<aura:attribute type="String" name="header" default="Salesforce Header" />

<aura:attribute type="String" name="footer" default="Salesforce Footer" />

<aura:attribute type="String" name="title" default="Salesforce" />

</aura:method>

</aura:component>

==> Controller :

({

doInit : function(component, event, helper) {

component.defaultParamers();

},

loadDefaulParams : function(component, event, helper) {

var params = event.getParam('arguments');

console.log(params);

if (params) {

var title = params.title;

var header = params.header;

var footer = params.footer;

})

=====================================================================================

public class AuraMethodController {

@AuraEnabled

public static List<String> getServerSideParams(){

return new List<String>{'Salesforce header from Server' ,'Salesforce footer from Server' , 'Salesforce
title from Server' };

59
}

<aura:component controller="AuraMethodController">

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

<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">

<aura:attribute type="String" name="header" default="Salesforce Header" />

<aura:attribute type="String" name="footer" default="Salesforce Footer" />

<aura:attribute type="String" name="title" default="Salesforce" />

</aura:method>

</aura:component>

Controller :

({

doInit : function(component, event, helper) {

component.defaultParamers();

},

loadDefaultParams : function(component, event, helper) {

var params = event.getParam('arguments');

var onSucess = function(result){

console.log(result);

if (params) {

onSucess;

var action = component.get("c.getServerSideParams");

action.setCallback(this, function(response) {

var state = response.getState();

60
 if (state === "SUCCESS") {

onSucess(response.getReturnValue());

});

$A.enqueueAction(action);

},

})

===========================================================================

Parent :

<aura:component >

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

<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">

<aura:attribute type="String" name="header" default="Salesforce Header" />

<aura:attribute type="String" name="footer" default="Salesforce Footer" />

<aura:attribute type="String" name="title" default="Salesforce" />

</aura:method>

</aura:component>

({

doInit : function(component, event, helper) {

component.defaultParamers();

},

loadDefaultParams : function(component, event, helper) {

var params = event.getParam('arguments');

if (params) {

var title = params.title;

var header = params.header;

61
 var footer = params.footer;

console.log('title'+title)

},

})

Child:

<aura:component >

<c:AuraMethod aura:id="child" />

<aura:attribute name="header" type="String" default="Parent header"/>

<aura:attribute name="title" type="String" default="Parent title"/>

<aura:attribute name="footer" type="String" default="Parent footer"/>

<lightning:button label="parent component to call a method on a child component"

onclick="{! c.callAuraMethod}" />

</aura:component>

({

callAuraMethod : function(component, event, helper) {

var childCmp = component.find("child");

var auraMethodResult = childCmp.defaultParamers(component.get('v.header') ,

component.get('v.footer') , component.get('v.title'));

},

})

===========================================================================

<aura:interface description="Interface template">

<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">

62
 <aura:attribute type="String" name="header" default="Salesforce Header" />

<aura:attribute type="String" name="footer" default="Salesforce Footer" />

<aura:attribute type="String" name="title" default="Salesforce" />

</aura:method>

</aura:interface>

<aura:component implements="c:AuraMethodIntf">

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

</aura:component>

Controller:

({

doInit : function(component, event, helper) {

component.defaultParamers();

},

loadDefaultParams : function(component, event, helper) {

var params = event.getParam('arguments');

if (params) {

var title = params.title;

var header = params.header;

var footer = params.footer;

console.log('title'+title);

console.log('header'+header);

console.log('footer'+footer);

},

63
})

_____________________________________________________________________________________

Design notes

<aura:component
implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
access="global" >

<!--Declared 5 attributes with some default values -->

<aura:attribute name="backgroundColor" type="String" default="#000000" />

<aura:attribute name="boxPadding" type="Integer" default="25" />

<aura:attribute name="logoURL" type="String"

default="https://brandfolder.com/salesforce/logo/salesforce-primary-logo.png"/>

<aura:attribute name="textFontSize" type="Integer" default="18" />

<aura:attribute name="textColor" type="String" default="#e81717" />

<div style="{!'padding:' + v.boxPadding +'px; background-color:' + v.backgroundColor}">

<img src="{!v.logoURL}" width="200" height="200" />

<p style="{!'font-size:' + v.textFontSize + 'px; color:' + v.textColor}">

Hi This is s Sample Demo of How to use Desing Resource In Lightning Componnet

</p>

</div>

</aura:component>

<design:component >

<design:attribute name="backgroundColor" label="Background Color" description="Enter Background

Color" />

64
 <design:attribute name="boxPadding" label="Padding" description="Enter Padding without 'px' [i.e
15]" />

<design:attribute name="logoURL" label="Image URL" description="Enter Secure Image URL" />

<design:attribute name="textFontSize" label="Font Size" description="Enter font size without 'px' [i.e
15]" />

<design:attribute name="textColor" label="Font Color" description="Enter font Color" />

</design:component>

==============================================================

<aura:component
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >

<aura:attribute name = "Name" type = "String" ></aura:attribute> <!-- Define String Variable -->

<aura:attribute name = "Phone" type = "String" ></aura:attribute> <!-- Define Integer Variable -->

<aura:attribute name = "Position" type ="String" ></aura:attribute> <!-- Define Picklist Variable -->

<p>

Name: {!v.Name}

</p>

<p>

Number: {!v.Phone}

</p>

<p>

Position: {!v.Position}

</p>

</aura:component>

<design:component >

<design:attribute name ="Name" label="Name"></design:attribute>

<design:attribute name ="Phone" label="Phone Number"></design:attribute>

65
 <design:attribute name ="Position" label="Position" datasource = "CEO, President,
Manager"></design:attribute>

</design:component>

=====================================================================================
============

<aura:component
implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes"
access="global">

<aura:attribute name="welcomeTitle" type="String" default="Welcome in Lightning"

access="global" />

<aura:attribute name="hideLogo" type="Boolean" default="true" access="global" />

<aura:attribute name="LogoURL" type="String"

default="https://c1.sfdcstatic.com/content/dam/web/en_us/www/images/home/logo-salesforce.svg"
access="global" />

<aura:attribute name="favoriteColors" type="String" default="Blue" access="global"/>

<div class="header-section-top">

<div class="slds-text-heading_large" style="{!'color:' + v.favoriteColors}" >

{!v.welcomeTitle}

</div>

<aura:if isTrue="{!v.hideLogo}">

<div class="header-section-top">

<img src="{!v.LogoURL}" width="200" height="200" />

</div>

</aura:if>

</div>

66
</aura:component>

<design:component>

<design:attribute name="welcomeTitle" label="Welcome Title" />

<design:attribute name="hideLogo" label="Hide Logo"/>

<design:attribute name="LogoURL" label="URL" />

<design:attribute name="favoriteColors" label="Color" datasource="Red,Black,White,Blue"/>

</design:component>

___________________________________________________________________________________--

Interfaces

Interface :

==========

<aura:interface description="Interface template">

<aura:method name="defaultParamers" action="{!c.loadDefaultParams}">

<aura:attribute type="String" name="header" default="Salesforce Header" />

<aura:attribute type="String" name="footer" default="Salesforce Footer" />

<aura:attribute type="String" name="title" default="Salesforce" />

</aura:method>

</aura:interface>

component :

<aura:component implements="c:AuraMethodIntf">

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

67
</aura:component>

Client-Side :

({

doInit : function(component, event, helper) {

component.defaultParamers();

},

loadDefaultParams : function(component, event, helper) {

var params = event.getParam('arguments');

if (params) {

var title = params.title;

var header = params.header;

var footer = params.footer;

console.log('title'+title);

console.log('header'+header);

console.log('footer'+footer);

},

})

_____________________________________________________________________________________

lightning:input

<lightning:input> :

1.A lightning:input component creates an HTML input element.

2.This component supports HTML5 input types, including checkbox, date and datetime,

68
 email, file, password, search, tel, url, number, radio, toggle.

3.The default is text.

4. input allows following types

SNO Type

1 Checkbox

2 Checkbox-button

3. color

4 Date

5. DateTime

6. Email

7. File

8. Month

9. Number

10. Password

11. Radio

11. Range

12. Search

13. Text

14. Time

15. Toggle

16. InputValidation

17. Week

Example :

1. CheckBox :

<lightning:input type="checkbox" label="Red" name="red" checked="true"/>

69
 2. Checkbox-button

<lightning:input type="checkbox" label="Hyd" name="Hyd" checked="true" value="Hyd"

/>

<lightning:input type="checkbox-button" label="Ban" name="Ban" value="Ban" />

3. Color :

<lightning:input type="color" label="Color" name="color" value="#EEEEEE"/>

4. Date :

<lightning:input type="date" label="Birthday" name="date" />

5. DateTime:

<lightning:input type="datetime-local" label="Birthday" name="datetime" />

6. Email :

<lightning:input type="email" label="Email" name="email"

value="[email protected]" />

7. File :

<lightning:input type="file" label="Attachment" name="file" multiple="true"

accept="image/png, .zip" onchange="{! c.handleFilesChange }"/>

8. Month :

<lightning:input type="month" label="Birthday" name="month" />

9. Number

<lightning:input type="number" name="number" label="Number" value="12345"/>

70
 10. Password :

<lightning:input type="password" label="Password" name="password" />

11. Radio :

<lightning:input type="radio" label="Red" name="red" value="red" checked="true" />

<lightning:input type="radio" label="Blue" name="blue" value="blue" />

12. Range :

<lightning:input type="range" label="Number" name="number" min="0" max="10" />

13. Search :

<lightning:input type="search" label="Search" name="search" />

14. Text :

<lightning:input label="Name" name="myname" />

15. Toogle :

<lightning:input type="toggle" label="Toggle value" name="togglevalue"

checked="true" />

16. Time :

<lightning:input type="time" label="Time" name="time" />

17. Input Validation

<lightning:input name="quantity" value="1234567890" label="Quantity"

maxlength="10" />

Lightning_Pagination.txt

71
Pagination:

1. Create a wrapper class:ContactWrapper

public class ContactWrapper {

@AuraEnabled

public Integer pageSize {get;set;}

@AuraEnabled

public Integer pageNumber {get;set;}

@AuraEnabled

public Integer totalRecords {get;set;}

@AuraEnabled

public Integer recordStart {get;set;}

@AuraEnabled

public Integer recordEnd {get;set;}

@AuraEnabled

public List<Contact> contactList {get;set;}

2. Create a apex class ContactController

public class ContactController {

@AuraEnabled

public static ContactWrapper getContactData(Decimal pageNumber, Decimal pageSize) {

Integer pSize = (Integer)pageSize;

Integer pNumber = (Integer)pageNumber;

//Offset for SOQL

Integer offset = (pNumber - 1) * pSize;

72
 //Total Records

Integer totalRecords = [SELECT COUNT() FROM Contact];

Integer recordEnd = pSize * pNumber;

//Instance of Contact DataTable Wrapper Class

ContactWrapper cw = new ContactWrapper();

cw.pageSize = pSize;

cw.pageNumber = pNumber;

cw.recordStart = offset + 1;

cw.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords;

cw.totalRecords = totalRecords;

cw.contactList = [SELECT Id, Name, Phone, Email FROM Contact ORDER BY Name LIMIT :pSize
OFFSET :offset];

return cw;

3. Create a component : Pagination :

<aura:component controller="ContactController">

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

<aura:attribute name="ContactList" type="Contact[]"/>

<aura:attribute name="PageNumber" type="integer" default="1"/>

<aura:attribute name="TotalPages" type="integer" default="0"/>

<aura:attribute name="TotalRecords" type="integer" default="0"/>

<aura:attribute name="RecordStart" type="integer" default="0"/>

<aura:attribute name="RecordEnd" type="integer" default="0"/>

<div class="slds-m-around_xx-large">

73
 <h1 class="slds-text-heading--medium">Contacts</h1>

<br/>

<div class="slds-float_right">

<ui:inputSelect aura:id="pageSize" label="Display Records Per Page:" change="{!

c.onSelectChange}">

<ui:inputSelectOption text="10" label="10" value="true"/>

<ui:inputSelectOption text="15" label="15"/>

<ui:inputSelectOption text="20" label="20"/>

</ui:inputSelect>

<br/>

</div>

<table class="slds-table slds-table_bordered slds-table_cell-buffer">

<thead>

<tr class="slds-text-title_caps">

<th scope="col">

<strong><div class="slds-truncate" title="Name">Name</div></strong>

</th>

<th scope="col">

<strong><div class="slds-truncate" title="Phone">Phone</div></strong>

</th>

<th scope="col">

<strong><div class="slds-truncate" title="Email">Email</div></strong>

</th>

</tr>

</thead>

<tbody>

<aura:iteration items="{!v.ContactList}" var="con">

<tr>

74
 <th scope="row" data-label="Name">

<div class="slds-truncate" title="{!con.Name}">{!con.Name}</div>

</th>

<th scope="row" data-label="Phone">

<div class="slds-truncate" title="{!con.Phone}">{!con.Phone}</div>

</th>

<th scope="row" data-label="Email">

<div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>

</th>

</tr>

</aura:iteration>

</tbody>

</table>

<div class="slds-clearfix">

<div class="slds-page-header" role="banner">

<div class="slds-float_right">

<lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage"

label="Prev" onclick="{!c.handlePrev}" />

<lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage"

variant="brand" label="Next" onclick="{!c.handleNext}"/>

</div>

<p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page

{!v.PageNumber} of {!v.TotalPages}</p>

</div>

</div>

</div>

</aura:component>

4. Create a helper method :

75
({

getContactList: function(component, pageNumber, pageSize) {

var action = component.get("c.getContactData");

action.setParams({

"pageNumber": pageNumber,

"pageSize": pageSize

});

action.setCallback(this, function(result) {

var state = result.getState();

if (component.isValid() && state === "SUCCESS"){

var resultData = result.getReturnValue();

component.set("v.ContactList", resultData.contactList);

component.set("v.PageNumber", resultData.pageNumber);

component.set("v.TotalRecords", resultData.totalRecords);

component.set("v.RecordStart", resultData.recordStart);

component.set("v.RecordEnd", resultData.recordEnd);

component.set("v.TotalPages", Math.ceil(resultData.totalRecords / pageSize));

});

$A.enqueueAction(action);

})

5. Create a client-side controller :

({

doInit: function(component, event, helper) {

var pageNumber = component.get("v.PageNumber");

var pageSize = component.find("pageSize").get("v.value");

helper.getContactList(component, pageNumber, pageSize);

76
 },

handleNext: function(component, event, helper) {

var pageNumber = component.get("v.PageNumber");

var pageSize = component.find("pageSize").get("v.value");

pageNumber++;

helper.getContactList(component, pageNumber, pageSize);

},

handlePrev: function(component, event, helper) {

var pageNumber = component.get("v.PageNumber");

var pageSize = component.find("pageSize").get("v.value");

pageNumber--;

helper.getContactList(component, pageNumber, pageSize);

},

onSelectChange: function(component, event, helper) {

var page = 1

var pageSize = component.find("pageSize").get("v.value");

helper.getContactList(component, page, pageSize);

},

})

6. Create a application ;

<aura:application extends="force:slds">

<c:Pagination_One />

</aura:application>

_____________________________________________________________________________________

Navigation

77
____________________________________________________________________________________

force:createRecord:

-------------------------------------------

Syntax:

var action=$A.get("e.force:createRecord");

action.setParams({"entityApiName":"ObjectName"});

Example :

---------

createRecord : function (component, event, helper) {

var action = $A.get("e.force:createRecord");

action.setParams({

"entityApiName": "Account"

});

action.fire();

----------------------------------------------------

force:editRecord

----------------------------------------------------

Syntax:

var action =$A.get("e.force:editRecord");

action.setParams({"recordId":"Id of the record"});

Example:

--------

editRecord : function(component, event, helper)

var action = $A.get("e.force:editRecord");

action.setParams({

"recordId": recordId

78
 });

action.fire();

----------------------------------------------------

force:navigateToList

-----------------------------------------------------

Syntax :

var action =$A.get("e.force:navigateToList");

action.setParams({

"listViewId" : listViewId ,

"listViewName":name of listview,

"scope" : objectName

});

Example :

gotoList : function (component, event, helper) {

var action = $A.get("e.force:navigateToList");

action.setParams({

"listViewId" : listviews.Id,

"listViewName": null,

"scope": "Contact";

});

action.fire();

--------------------------------------------------------

force:navigateToObjectHome

---------------------------------------------------------

79
Syntax :

var action = $A.get("e.force:navigateToObjectHome");

action.setParams({ "scope": "ObjectName"});

Example :

----------

navToHome : function (component, event, helper) {

var action = $A.get("e.force:navigateToObjectHome");

action.setParams({

"scope": "Account"

});

action.fire();

------------------------------------------------------

force:navigateToRelatedList

------------------------------------------------------

Syntax :

var action = $A.get("e.force:navigateToRelatedList");

action.setParams({

"relatedListId": "Child Object Name",

"parentRecordId": Id of the parentRecord

});

Example :

----------

gotoRelatedList : function (component, event, helper) {

var action = $A.get("e.force:navigateToRelatedList");

80
 action.setParams({

"relatedListId": "Cases",

"parentRecordId":Id of the parent record

});

action.fire();

------------------------------------------------------

force:navigateToSObject

-------------------------------------------------------

Syntax :

var action = $A.get("e.force:navigateToSObject");

action.setParams({

"recordId": "Id of the record",

"slideDevName": "related"

});

Example :

----------

createRecord : function (component, event, helper) {

var action = $A.get("e.force:navigateToSObject");

action.setParams({

"recordId":Id of record ,

"slideDevName": "related"

});

action.fire();

---------------------------------------------------

81
force:navigateToURL

--------------------------------------------------

Syntax :

var action = $A.get("e.force:navigateToURL");

action.setParams({

"url": url of the page

});

Example :

---------

gotoURL : function (component, event, helper) {

var action = $A.get("e.force:navigateToURL");

action.setParams({

"url": "/006/o"

});

urlEvent.fire();

_____________________________________________________________________________________

Render Document

82
Rendering Lifecycles
Rendering and Rerendering lifecycles contains four basic methods to
render the component. These methods are :
1).render()
2).rerender()
3).afterRender()
4). unrender()
Custom Rendere
By overriding four basic methods of renderer we can update the DOM
elements.Let’s learn how.

1).render():
It returns DOM node, an array of DOM node or nothing. To override
the default rendering process we need to extend default render by
calling superRender() method then write custom code.Example:

83
render : function(component, helper) {
var returnVal = this.superRender();
// Write your custom code here.
return returnVal;
}

2).rerender():
It allows the component to update themselves, when other component
updates since they were last rendered. It doesn’t return any value. It
automatically called when data is updated in the component. Call
superRerender() to chain rerendering to the components in body
attribute.
Example:

rerender : function(component, helper) {

this.superRerender();
// Write your custom code here.
}

3).afterRender():
It allows you to interact with DOM tree after rendering the DOM
elements. It doesn’t return a value. Call superAfterRender() before
your custom code to extend the default afterRender().
Example:

afterRender : function(component, helper) {

this.superAfterRender();
// Write your custom code here.
}

4). unrender():

84
It deletes all DOM nodes rendered by component’s render function. It
call by framework when components is being destroyed.
Example:

unRender : function(component, helper) {

this.superUnrender();
// Write your custom code here.
}

Render
The framework calls render() function when component is being initialized/rendered. The
render() function typically returns a DOM node, an array of DOM nodes, or nothing. The base
HTML component expects DOM nodes when it renders a component. Use render function to
modify DOM or to modify component markup.
1 //Component1.cmp

2 <aura:component>

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

3
    <div><b>{!v.msg}</b></div>
4
</aura:component>
5
 
6
//Component1Helper.js
7
({
8     changeValue : function(component) {
9         component.set("v.msg","Changed value before Render");

10     },

11 })

12  

13 //Component1Renderer.js

({
14
    render: function(cmp, helper) {
15
       console.log('render');

85
16

17        helper.changeValue(cmp);

18        return this.superRender()

19     },

20 })

21
In render() function I am calling helper method to modify DOM when component renders.

AfterRender
The afterRender function will be called by framework after render() function.AfterRender
function allows us to further change an already rendered component. The afterRender() function
enables you to interact with the DOM tree after the framework’s rendering service has inserted
DOM elements.

Note :

1. Both the functions will be called only once, you can keep your business logic that needs to
run only once in these functions.
2. Both functions can be used to modify DOM or markup.
3. Don’t perform DML in render function. You can do in afterRender.

Rerender
Rerender function will be called when a component’s value changes due to user action like a
button click or some other event like component/application event. Rerender function updates
component upon rerendering of the component.
1 //Component1.cmp

2 <aura:component>

    <aura:attribute name="truthy" type="Boolean"></aura:attribute>

3
     
4
    <aura:ifisTrue="{!v.truthy}">
5
        True
6
    <aura:set attribute="else">
7
        False
8     </aura:set>
9     </aura:if>

10     <ui:buttonaura:id="button" label="Check" press="{!c.update}"/>

86
11

12 </aura:component>

13  
14 //Component1Controller.js

15 ({

16     update : function(component, event, helper) {

        component.set("v.truthy","false")
17
    }
18
})
19
 
20
//Component1Renderer.js
21
({
22     rerender: function(cmp, helper) {
23         console.log('rerender');

24         return this.superRerender()

25     },

26 })

27
In above component when you click on “Check” button,update method will update component
which in turn call rerender.

Unrender
Framework fires an unrender event when a component is deleted.The base unrender() function
deletes all the DOM nodes rendered by a component’s render() function. It is called by the
framework when a component is being destroyed. Customize this behavior by overriding
unrender() in your component’s renderer. This can be useful when you are working with third-
party libraries that are not native to the framework.
1 //Component1.cmp

2 <aura:component>

3  
    <aura:attribute name="truthy" type="Boolean"></aura:attribute>
4
     
5
    <aura:ifisTrue="{!v.truthy}">
6

87
7         <c:Component2 />

8     <aura:set attribute="else">

        Second Component is deleted

9
    </aura:set>
10
    </aura:if>
11
     
12
    <ui:buttonaura:id="button" label="Check" press="{!c.update}"/>
13
</aura:component>
14
 
15 //Component1Controller.js
16 ({

17     update : function(component, event, helper) {

18         component.set("v.truthy","false")

19     }

})
20
 
21
//Component1Renderer.js
22
({
23
    rerender: function(cmp, helper) {
24
        console.log('rerender');
25         return this.superRerender()
26     },

27 })

28  

29 //Component2.cmp

30 <aura:component>

    I am in second component

31
</aura:component>
32
 
33
//Component2Renderer.js
34
({

88
35

36
    unrender : function (cmp, helper) {
37
        console.log('Component 2 unrender ');
38
        return this.superUnrender();
39
    },
40 })
41

42

Render:

========================================================================

Example 1:

<aura:component>

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

<div><b>{!v.msg}</b></div>

</aura:component>

89
({

changeValue : function(component) {

component.set("v.msg","Changed value before Render");

},

})

Render:

({

render: function(cmp, helper) {

console.log('render');

helper.changeValue(cmp);

return this.superRender()

},

})

======================================

AfterRender

<aura:component>

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

<div><b>{!v.msg}</b></div>

</aura:component>

({

changeValue : function(component) {

component.set("v.msg","Changed value before Render");

},

90
})

Render:

({

render: function(cmp, helper) {

console.log('render');

helper.changeValue(cmp);

return this.superAfterRender()

},

})

=======================================================================

ReRender :

=======================================================================

<aura:component>

<aura:attribute name="truthy" type="Boolean"></aura:attribute>

<aura:if isTrue="{!v.truthy}">

True

<aura:set attribute="else">

False

</aura:set>

</aura:if>

<ui:button aura:id="button" label="Check" press="{!c.update}"/>

</aura:component>

----------------------

({

update : function(component, event, helper) {

91
 component.set("v.truthy","false")

})

------------------------

({

rerender: function(cmp, helper) {

console.log('rerender');

return this.superRerender()

},

})

========================================================================

UnRender :

<aura:component >

<aura:attribute name="truthy" type="Boolean"></aura:attribute>

<aura:if isTrue="{!v.truthy}">

<c:Component2 />

<aura:set attribute="else">

Second Component is deleted

</aura:set>

</aura:if>

<ui:button aura:id="button" label="Check" press="{!c.update}"/>

</aura:component>

-------------------------------

({

update : function(component, event, helper) {

92
 component.set("v.truthy","false")

})

//Component1Renderer.js

({

rerender: function(cmp, helper) {

console.log('rerender');

return this.superRerender()

},

})

---------------------

<aura:component >

I am in second component

</aura:component>

//Component2Renderer.js

({

unrender : function (cmp, helper) {

console.log('Component 2 unrender ');

return this.superUnrender();

},

})

=================================================================

Soap_Test_Class.txt

93
==> WSDL : Consumed :

public class MainClass{

public Class Sub_Class{

public String invoke(String firstName,String lastName){

===> Class to invoke soap service

public class Example{

public String name;

public void call(){

MainClass.Sub_Class ms =new MainClass.Sub_Class();

name =ms.invoke('Satish','Myla');

===> Create dummy response

global class DummyResponse implements WebServiceMock {

global void doInvoke(

Object stub,

Object request,

94
 Map<String, Object> response,

String endpoint,

String soapAction,

String requestName,

String responseNS,

String responseName,

String responseType) {

String name='Satish Myla'

response.put('response_x', name);

==> Test class :

@isTest

public class Test_Soap{

@isTest

static void testMe(){

DummyResponse res=new DummyResponse();

Test.setMock(WebserviceMock.class,res);

Example e=new Example();

e.call();

System.assertEquals('Satish Myla',e.name);

=====================================================================================
======================

95
WSDL ==>Apex

public class Main_Class {

public class Student_Response{

public String name;

public string phone;

public String email;

public class Sub_Class{

public Main_Class.StudentResponse invoke(){

===> Invoke the soap service

public class Example{

public void callMe(){

Main_Class.Sub_Class ms =new Main_Class.Sub_Class();

Main_Class.StudentResponse res =ms.invoke();

Account acc =new Account();

acc.Name=res.name;

acc.Phone=res.phone;

acc.Email__c=res.email;

insert acc;

96
===>global class DummyResponse implements WebServiceMock {

global void doInvoke(

Object stub,

Object request,

Map<String, Object> response,

String endpoint,

String soapAction,

String requestName,

String responseNS,

String responseName,

String responseType) {

Main_Class.StudentResponse res =new Main_Class.StudentResponse();

res.name='sam';

res.phone='040-1234';

res.email='[email protected]';

response.put('response_x', res);

==> Test class :

@isTest

public class Test_Class{

@isTest

static void testMe(){

DummyResponse res=new DummyResponse();

Test.setMock(WebserviceMock.class,res);

Example e =new Example();

e.callMe();

97
 Account acc =[select Name,Phone,Email__C from Account];

System.assertEquals('Sam',acc.Name);

System.assertEquals('040-1234',acc.Phone);

System.assertEqauals('[email protected]',acc.Email__c);

Spinner

Class :

public class EchoController {

@AuraEnabled

public static String echo(String message) {

return message;

Application :

-------------

<aura:application controller="EchoController" extends="force:slds">

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

<div class="exampleHolder">

<lightning:spinner aura:id="mySpinner" class="slds-hide"/>

</div>

</aura:application>

controller

==========

98
({

showSpinner: function (component, event, helper) {

helper.showSpinner(component);

var action = component.get('c.echo');

action.setCallback(this,function(response){

var state = response.getState();

if (state === "SUCCESS") {

helper.hideSpinner(component);

});

$A.enqueueAction(action);

})

helper:

========

({

showSpinner: function (component, event, helper) {

var spinner = component.find("mySpinner");

$A.util.removeClass(spinner, "slds-hide");

},

hideSpinner: function (component, event, helper) {

var spinner = component.find("mySpinner");

$A.util.addClass(spinner, "slds-hide");

})

99
SVG-Notes

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg height="450" width="450" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<polygon points="200,20 80,396 380,156 20,156 320,396"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

</svg>

<aura:component implements="flexipage:availableForAllPageTypes">

<p>SVG Example</p>

</aura:component>

=======================================================================

<aura:component implements="flexipage:availableForAllPageTypes">

<strong>Sample Component</strong>

</aura:component>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">

<rect width="400" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

</svg>

=========================================================================

<aura:component implements="flexipage:availableForAllPageTypes">

<strong>Sample Component</strong>

</aura:component>

<?xml version="1.0"?>

100
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"

width="400" height="400">

<circle cx="100" cy="100" r="100" stroke="black"

stroke-width="5" fill="red" />

</svg>

===========================================================

Token notes

<aura:tokens>

<aura:token name="divFont" value="Arial, sans-serif"/>

<aura:token name="divFontWeight" value="bold"/>

<aura:token name="divBackgroundColor" value="black"/>

<aura:token name="divMargin" value="5px"/>

<aura:token name="divTextColor" value="white"/>

</aura:tokens>

MyComponent.cmp

<aura:component >

<div class="myClass">

<p>hello i am your page first line</p>

<p>hello i am your page second line</p>

<p>hello i am your page third line</p>

</div>

</aura:component>

101
.THIS.myClass {

font-family: token(divFont);

font-weight: token(divFontWeight);

background-color: token(divBackgroundColor);

color: t(divTextColor);

margin: t(divMargin);

================================================================

first.tokens

<aura:tokens>

<aura:token name="divMargin" value="15px"/>

<aura:token name="divPadding" value="10px"/>

</aura:tokens>

two.tokens

<aura:tokens extends="c:first">

<!--TokenForColors bundle is extends the TokenForAlignment Token bundle-->

<aura:token name="divBackgroundColor" value="lightblue"/>

<aura:token name="divTextColor" value="black"/>

</aura:tokens>

defaulttokens.token

<aura:tokens extends="c:TokenForColors">

<!--defaultTokens is extends the TokenForColors Token bundle-->

<aura:token name="divFont" value="Arial, sans-serif"/>

<aura:token name="divFontWeight" value="bold"/>

102
</aura:tokens>

component

==========

<aura:component >

<div class="myClass">

<p>hello i am your page first line</p>

<p>hello i am your page second line</p>

<p>hello i am your page third line</p>

</div>

</aura:component>

.THIS.myClass {

font-family: token(divFont); /* value from defaultTokens bundle*/

font-weight: token(divFontWeight); /* value from defaultTokens bundle*/

background-color: token(divBackgroundColor); /* value from TokenForColors bundle*/

color: token(divTextColor); /* value from TokenForColors bundle*/

margin: token(divMargin); /* value from TokenForAlignment bundle*/

padding:token(divPadding); /* value from TokenForAlignment bundle*/

_____________________________________________________________________________________
Interview Questions

Salesforce Lightning Interview questions

Salesforce Lightning Interview questions

Salesforce lightning interview questions page helps you to prepare interview.

1. What is Lightning Experience?

103
Answer: It is the new user Interface developed by salesforce team, which is built on component-based
framework and event driven architecture, which provides a dynamic and responsive Experience to the
user. This framework is built to provide optimum performance by using stateful Client side and stateless
Server architecture.

2. Where we can display lightning component?

Answer: Lightning component can be displayed at following places:

1. Lightning Experience

2. Salesforce1 App

3. Template-based Community

4. Standalone Lightning App

5. Visualforce Pages (Using Lightning out).

3. What are the advantages of lightning?

There are many advantages of using lightning like it’s out of the box component set which enables the
fast-paced creation of new apps, its event driven architecture which enables the easy decoupling
between the components. Device awareness, cross browser compatibility and framework optimized for
the performance.

4. Does Lightning work with Visualforce?

Yes. Lightning component works with Visualforce by implementing Lightning out as discussed earlier.

5. What is difference between Visualforce Components and Lightning Components?

Visualforce page is created keeping page as the center of the application and most of its calculation is
performed at the server side. Lightning component on the other hand are created using the component-
based framework, most of the calculations are performed at the client side and makes the more
dynamic and provide rich customer experience, also lightning component are build using mobile first
approach.

6. What are the tools included in lightning?

Lightning App Builder – It is a tool with User interface to use drag and drop functionality and create app
fast by reusing the components, components can be standard or custom depending upon your
requirement.

104
Lightning Component Framework- it provides a bundle that can be used to build reusable custom
components, Standalone App and to customize Salesforce1 App

Lightning Connect – it is a powerful tool to facilitate the integration of force.com app with an external
data source using OData specification

Lightning Process Builder – it is a visualization tool to build automation required for your business
processes.

Lightning Schema Builder – it is a visualizing tool to view, create objects fields and relationship among
them.

7. Is Lightning Components replacing Visualforce?

No. Lightning component is not replacing Visualforce, Visualforce is still supported by Salesforce.

8. Is Lightning component framework an MVC framework?

No, it is not an MVC framework it is a component-based framework and event driven.

9. How can we use a lightning component in a VisaulForce Page? Explain?

A Lightning component can be embedded in any webpage using a very powerful and flexible feature,
Lighting out. When used with Visualforce some complexity becomes simpler.

Lightning component can be added to Visualforce page in three steps:

1. We have to first Add the Lightning Components for Visualforce JavaScript library to your targeted
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()

10. What are the type of events into Salesforce Lightning component?

Application Event – Scope of this event is throughout the lightning App and any component which has
registered for this event would get a notification.

Component Event– Scope of this event is within itself or the parent component of this event, all the
components declared within the parent component would get notified of this event.

105
System Event- these are the events fired by Salesforce’s system during the lifecycle of the lightning app.

11. What are the basic differences between Application Event and Component Event?

Component events are used to do communication between child and parent. They use bubbling and
capture same as used in DOM events. A change in a child component can be communicated to the
parent component via component event.

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.

To use Component Event API we use the below syntax

12. When should we use Component event and application events?

It is best to always use a component event instead of an application event. Component events can only
be handled by components above them in the containment hierarchy, therefore, their usage is localized
to the components that need to know about them.

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.

13. Can we integrate Lightning components with another framework, such as Angular?

Yes we can integrate lightning with any 3rd party framework.

14. How can we subscribe to an event in lightning component?

To subscribe to an event in lightning component we need to include tag in the containment hierarchy.
Subscription of these event depends on the event type i.e. component event or application event. For
Component event we write below code.

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’ attributes are same as the component event handling, it is just that we do not
include ‘name’ attribute to handle the application event.

15. What is Lightning Design System (SLDS)?

106
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.

16. What is Lightning Data Services?

They are similar to a standard controller in Apex coding, advantages of using lightning Data service are
mentioned below

1. Use Lightning Data Service to load, create, edit, or delete a record in your component without
requiring Apex code.

2. Lightning Data Service handles sharing rules and field-level security for you.

3. In addition to not needing Apex, Lightning Data Service improves performance and user interface
consistency.

17. What are list of tools are available in salesforce lightning?

Lightning Connect

Lightning Component Framework

Lightning Schema Builder

Lightning Process Builder

Lightning App Builder

18. What is Aura Framework

Aura is an open-source UI framework built by Salesforce for developing dynamic web apps for mobile
and desktop devices. Salesforce uses Aura to build apps, such as Lightning Experience and Salesforce1.

19. What is Aura Definition Bundle?

Aura definition bundle contains following items

Component : UI for lightning component

controller.js : Contains client-side controller methods to handle events in the component.

107
helper.js: JavaScript functions that can be called from any JavaScript code in a component’s bundle

style: Contains styles for the component.

design: File required for components used in Lightning App Builder, Lightning pages, or Community
Builder.

renderer: Client-side renderer to override default rendering for a component.

documentation: A description, sample code, and one or multiple references to example components

SVG: Custom icon resource for components used in the Lightning App Builder or Community Builder.

19. What is aura:attribute?

Attributes are like member variables on a class in Apex. They are typed fields that are set on a specific
instance of a component and can be referenced from within the component’s markup using an
expression syntax.

20. 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.

21. How can we extend any component?

Lighting component can be extended using extensible=”true” attribute in aura:component

22. How to add lightning component in visualforce page?

Lightning component can be added to visualforce page using ltng:outApp

23. What is difference between Application event and component event?

Component event: Component event is used to communicate with parent component using bubble
event.

Application event: 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.

24. What is the use of implements in lightning component?

108
implement is used to implement multiple interface in lightning component. e.g.
flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId

25. What is aura:registerevent in lightning component?

A component registers that it may fire an event by using <aura:registerevent>

26. How can we subscribed to an event in lightning component?

Use <aura:handler> in the markup of the handler component.

27. How can we communicate between two components?

Lightning component can communicate using event communication framework. Read more about
component communication patterns.

28. How can we communicate between two components?

In Lightning Component Framework, the communication between two components is accomplished

supported in several ways.

1. Attributes or Methods to pass data down the component hierarchy

2. Lightning Events to pass data up and around in the component hierarchy

28. Are Lightning Components intended only for mobile apps?

Although lightning framework creates component keeping mobile first approach, but its responsive
design helps in providing the same experience over the desktop without writing separate lines of code.

29. Do we need a namespace to develop Lightning Components?

You can have namespace in your org but it is not necessary to have a namespace to develop lightning
component.

30. 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.

31. Which interface we are supposed to implement so that a lightning component can be used as quick
action?

109
We need to implement the following “force: lightningQuickAction” so that we can use the component as
a Quick Action

32. 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.

33. 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);

110
})

34. What are the different Lightning component bundles?

a. Component

b. Controller

c. Helper

d. Style

e. Document

f. Design

g. SVG

h. Rendrer

35. 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.

36. 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.

37. 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 adjusts its resolution according the screen size and therefore can
be used on desktop as well without writing any separate code.

38. 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.

39. Can we make one component inherit styles/CSS from a parent component, or must we always define
it in the component?

111
Child component inherits the CSS from its aren’t we do not need to specify it for each component.

40. What is the use of the aura:method tag in Lightning ?

aura:method is used to communicate down the containment hierarchy i.e. parent to child.

41. Can we Include One Lightning component to another?

Yes, we can include one Lightning component in another Lightning component.

42. 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.

43. 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.

44. Can we include external JavaScript/CSS libraries in components?

It is possible to use custom CSS and JAvascriipt in the Lightning component.

45. What happens with existing Visualforce Pages in Lightning Experience?

Most of the Visualforce page can be easily converted to lightning experience, but they are still supported
by the salesforce and are not required to be converted.

46. Do I always create an app bundle first when develop lightning component?

No, it is not necessary to create an App Bundle first to develop the lightning component.

47. How can we deploy components to production org?

Lightning component can be deployed to the production via change sets, force.com IDE, Managed
Package.

48. How can we extend any component?

To make a component extendable we need to set value of ‘extensible’ attribute as ‘true’ of the
aura:component tag.

When a component extends another component it inherits all of the helper methods and attributes

49. How to register, fire and handle a component and application event?

We register an event by by using the following code

<aura:registerEvent name=”sampleComponentEvent” type=”c:compEvent”/>

112
We fire event as shown below:

var compEvent = cmp.getEvent(“sampleComponentEvent”);

compEvent.fire();

Handle component event as below :

<aura:handler name=”sampleComponentEvent” event=”ns:eventName”

action=”{!c.handleComponentEvent}” phase=”capture” />

Handle Application event as below:

<aura:handler event=”c:appEvent” action=”{!c.handleApplicationEvent}”/>

50. 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.

51. Why do we use @AuraEnabled annotation?

The AuraEnabled annotation provides support for Apex methods and properties to be used with the
Lightning Component framework.

The AuraEnabled annotation is overloaded, and is used for two separate and distinct purposes.

1. Use @AuraEnabled on Apex class static methods to make them accessible as remote controller
actions in your Lightning components.

2. 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.

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

113
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.

53. Use of THIS CSS class?

This adds namespacing to CSS and helps prevent one component’s CSS from blowing away another
component’s styling.

54. 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.

55. 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.

To obtain a reference to a static resource in JavaScript code, use $A.get(‘$Resource.resourceName’).

56. 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

getLocalId() to get the aura:id of the clicked button.

57. 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.

58. 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.

114
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.

59. 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.

60. What is the use of access=“global”?

The framework enables you to control access to your applications, attributes, components, events,
interfaces, and methods via the access system attribute. The access system attribute indicates whether
the resource can be used outside of its own namespace.

You can specify these values for the access system attribute.

Private: Available within the component, app, interface, event, or method and can’t be referenced
outside the resource. This value can only be used for or. Marking an attribute as private makes it easier
to refactor the attribute in the future as the attribute can only be used within the resource.

Accessing a private attribute returns undefined unless you reference it from the component in which it’s
declared. You can’t access a private attribute from a sub-component that extends the component
containing the private attribute.

Public: Available within your org only. This is the default access value.

Global: Available in all orgs.

61. What are Local and Global ids with respect to lightning component?

Component IDs

A component has two types of IDs: a local ID and a global ID. You can retrieve a component using its
local ID in your JavaScript code. A global ID can be useful to differentiate between multiple instances of a
component or for debugging purposes.

Local IDs

A local ID is an ID that is only scoped to the component. A local ID is often unique but it’s not required to
be unique.

Create a local ID by using the aura:id attribute. For example:

Find the button component by calling cmp.find(“button1”) in your client-side controller, where cmp is a
reference to the component containing the button.

Global IDs

115
Every component has a unique globalId, which is the generated runtime-unique ID of the component
instance. A global ID (1) is not guaranteed to be the same beyond the lifetime of a component, so it
should never be relied on. A global ID can be useful to differentiate between multiple instances of a
component or for debugging purposes.

62. What is a FlexiPage in lightning?

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

63. How to make quick lightning action?

Add the force:lightningQuickAction or force:lightningQuickActionWithoutHeader interface to a Lightning

component to enable it to be used as a custom action in Lightning Experience or the Salesforce mobile
app. You can use components that implement one of these interfaces as object-specific or global actions
in both Lightning Experience and the Salesforce app.

64. What are value providers in Salesforce Lightning?

Value providers helps use to access data in Lightning Application.They are two value providers as
v(View) and c(controller)

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

65. List of Global value providers?

$globalID

$Browser

$Label

$Locale

$Resource

1. What is a component

2. What is a helper

116
3..What is a event

4. Difference between application event and component level event

5. What are different types of interface

a. to create a tab

b. to override a button

c. to add a component on a page

6. What is lightnig out

7. what is use of hasRecordId

8. what is recordid

9. Lightnign data services

10. recordViewForm

12. recordEditForm

13. what are tokens

14. what is lighting interface

15. what is aura:handler

16. $A.enqueueAction

17. What type of response we get in client side controller

18. @AuraEnabled

19. How to invoke variables of apex class in Lighting component

20. what is local and gloabal id

21. How do you deploy lightning components

22. what is lightning debug handler

117
118