Salesforce Lightning Components Tutorial

Next big thing in salesforce is Lighting Component Architecture. Lightning Component

Framework is one of the method in salesforce which is used to develop user interface. It is used to
create a dynamic web application for both mobiles and desktops.
Salesforce Lightning component uses Single Page application architecture, which enhances use of
webpage for multiple tasking. Single page application dynamically updates the single webpage as
user interacts. This salesforce lightning tutorial will follow modern approach to build the web
application.

Fig: Client-Server Controller

Salesforce Lightning Component is built over Aura frame work which enables to develop dynamic
web pages with scalable lifecycle to support building apps designed for growth, it has multi-tier
partitioned component that connects server and client. As it is developed over aura framework it
is uses the responsive design, in this method lightning component uses same codebase for all
desktop, mobile and tablet but displays according to the screen. lightning components salesforce
tutorial will show how you can reuse the same codes for different application development.
Salesforce lightning component architecture has advantage of using components like HTML, CSS,
Java script and many other web enabled codes, providing the sophisticated user interface.
Lightning component is flexible, interactive and helps to focus on the visualization of the business.
Lightning component uses different technology at both server and client side, JavaScript is used
at client side and apex is used at server side.
As the lightning in real life strikes fast and does not repeat its pattern, salesforce lightning design
system also is quick in use and does not repeat the same design for different service user and sales.
It helps to provide customer support, product knowledge, different cases in single environment.
Reason to use Lightning component are as below.
 Out of box component sets.
 Ecosystem in use have rich components.
  Fast and better performance.
 Event driven architecture.
 Responsive design with reusability.
 Advantage of cross browsability.
 Beautiful user interface.
 Driven towards visualization.
 More user interactive.
Salesforce lightning design system is used in many ways, this salesforce lightning components
development tutorial will help you to learn where to use it and how to use it. This salesforce
developer guide will help in organized way of developing the lightning component.
As we talk about salesforce lightning component ecosystem where it can be used it has long list.
Lightning component can be deployed in following
 Lightning experience.
 Salesforce1 app.
 Lightning pages.
 Lightning apps.
 Visualforce pages.
 Apps with lightning out.
 Standalone apps in salesforce.
 Community builder.
 Lightning tabs.
 Mobile Hybrid SDKs
But lighting component cannot be deployed or used in external sites and salesforce classic. This
salesforce lightning tutorial for beginners will help you to learn more about Salesforce lightning
design system and its approach towards the development.
Lightning Component architecture also includes following technologies.
 Lightning App builder.
 Community Builder.
In this salesforce lightning tutorial for beginners uses development console which helps to develop
the lightning application.
Lightning Components Basics
Lightning component has lightning application, component, controller, helpers and Apex
controller. Lightning components are based on open source UI for web development. Below figure
will help you to understand.

Fig: Components of Lightning Application Architecture.

Basic components of Lightening component architecture are explained below.

1. Lightning application: These are standalone pages containing many lightning
components. Markup is similar HTML, to create lightning application we use open
developer console.
Navigation: File NewLightning Application.

2. Lightning Component: These are Markup component present in the application. It

consists of helper(JS), Controller (JS), Style(CSS), Documentation, SVG, Rerenderer and
Design. Also it can have HTML+ Aura Component supported by Salesforce. Lightning
component can be created in developer console.
Navigation: FileNewLightning Component.
 3. Controller (JavaScript): Controller is resource made up of JavaScript which defines
functionality of all components in the action. By clicking the controller link present in the
component will create cotroller.js file.

Controller Source

({
handleClick : function(cmp, event)
{
var attributeValue =
cmp.get("v.text");
console.log("current text: " +
attributeValue);

4. Helper(JavaScript): Helper is another JavaScript resource which helps to connect both

var target = event.getSource();
Apex side and Application side. It is like controller we will have the link to create the
helper whichcmp.set("v.text",
will give Helper.Js file.
target.get("v.label"));
5. Apex Controller: Apex Controller is a custom Controller which implements all logic of
} is basically used for visual force page. This is of apex class which doesn’t
the page. This
have argument
}) constructor for the output.

To create Apex Controller.

 From setup enter apex classes in quick find box and select apex Classes
 Click New.
 Now set apex version in the version setting.

6. CSS style: This is basic CSS styling as used in the HTML it is used to styling and coloring
of the page.
Create and Edit Lightning Components.
Before going into this Salesforce lightning tutorial, we need some setups. To develop the lightning
application, you need org setup which are as follows.
1. Go to this link https://developer.salesforce.com/signup?d=70130000000td6N
2. Fill the fields required.
3. In email field provide public address so that you can access it easily from the web browser.
4. Provide username which is easy to remember and in pattern of your mail ex
firstname@lastname.com.
5. Read and select the checkbox for the subscription agreement.
6. After this you will get mail notification and for the password change and change the password.

Quick Start: Lightning Components

This salesforce lighting application tutorial helps to create your first Lightning Component. We can say it
is combination of Markup, JavaScript and CSS.

To Start this salesforce lightning tutorial for beginners we will approach it with step wise.

Step 1: Open Your Console.

Go to your salesforce domain and select Developer Console as marked in the below picture.

Fig: Screen Shot from the Salesforce Lightning Experience web page
Step 2: Go to File New Lightning Component.

Fig: Screen Shot from the Salesforce Lightning Experience web page
Step3: After clicking on lightning component give the name for your component like
Myfirst_lightcomponent and submit the form, as shown in below screenshot.

Fig: Screenshot from developer Console.

Step4: Once you submit you will get two tabs opened, one myfirst_lightcomponent component bundle and
myfirst_lightcomponent.cmp tab. Close the myfirst_lightcomponent tab and keep
myfirst_lightcomponent.cmp opened, as shown below.

Fig: Screenshot from the developer console.

Step5: Now you can edit with HTML code, as example I have written sample code shown below.

Fig: Screenshot from the developer console.

Bundle of Component shown in the screenshot contains all component of lightning application. So now
you have built a lightning component, but to run this you will need to build lightning Application.
Below steps of salesforce lightning design system tutorial will help to create new lighting application.
Step1: Go to filenew Lightning application

Fig: Opening Lightning Application.

Step2: Give the name for the application, like myfirst_lightapp and Submit the form.

Fig: Naming Lightning application.

 After the submission a page will open with new myfirst_lightapp bundle and
myfirst_lightapp.app page. Close bundle page and continue with the. app page as shown in
the below screenshot.

Fig: Application Page.

Step3: Now with heading embed the component name in the file, as shown in below figure and
save the file. C in the code is default name space to access the lightning component.

Fig: Coding part of Lightning application.

Step4: Now go to lightning application component bundle and click it on preview, it will show
the output of the lightning component. Below shows the

Fig: Output of the Lightning Component.

This cover creating first Lightning component in salesforce.

<!-- CREATE NEW EXPENSE -->
<div aria-labelledby="newexpenseform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newexpenseform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Expense
</legend>

<!-- CREATE NEW EXPENSE FORM -->

<form class="slds-form--stacked">
<lightning:input aura:id="expenseform" label="Expense Name"
name="expensename"
value="{!v.newExpense.Name}"
required="true"/>
<lightning:input type="number" aura:id="expenseform" label="Amount"
name="expenseamount"
min="0.1"
formatter="currency"
step="0.01"
value="{!v.newExpense.Amount__c}"
messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
<lightning:input aura:id="expenseform" label="Client"
name="expenseclient"
value="{!v.newExpense.Client__c}"
placeholder="ABC Co."/>
<lightning:input type="date" aura:id="expenseform" label="Expense Date"
name="expensedate"
value="{!v.newExpense.Date__c}"/>
<lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"
name="expreimbursed"
checked="{!v.newExpense.Reimbursed__c}"/>
<lightning:button label="Create Expense"
class="slds-m-top--medium"
 variant="brand"
onclick="{!c.clickCreate}"/>
</form>
<!-- / CREATE NEW EXPENSE FORM -->

</fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW EXPENSE -->