Lightning Components Explained

New Delhi Salesforce Developer User
Group
Lightning Components: Explained
LEARN . SHARE . CELEBRATE . SALESFORCE

Welcome Awesome Developers !!
• This is our 2nd New Delhi Salesforce DG Meetup
• 4th Session of #SalesforceSaturday
• 1st Offline #SalesforceSaturday Session

Thank you Nagarro and Salesforce Team
• Nagarro is a custom software development and business
consulting company that provides business consulting and
technology services to its clients.
• It is headquartered in San Jose, California and has its
primary development center in Gurgaon, in the National
Capital Region of India.
• Since 2011, Nagarro is a subsidiary of Allgeier,[1] a Frankfurt
listed (FWB: AEI) leading German IT company.

What is Salesforce Saturday?
• First started by Stephanie Herrera in Austin, Texas.
• Every other Saturday we will meet either online or offline to
discuss, learn about Salesforce, prepare for Salesforce
Certifications.
• Helping each other learning new stuff.
• Volunteer based program where anyone can share any
kind of expertise they might have in Salesforce.

What is Salesforce Saturday?
Stephanie Herrera
• Salesforce MVP
• Founder of #SalesforceSaturday Austin, Texas
• She was recently interviewed on the
#ButtonClickAdmin Podcast.
Listen to the Podcast here:
https://admin.salesforce.com/always-learning-
stephanie-herrera
Follow her on Twitter:
@steph_herrera_

Who the hell am I?
Atul Gupta
• Organizer of New Delhi Salesforce DUG
• Organizer of #SalesforceSaturday,
Delhi Chapter
• Active on Salesforce Success Community
• Blogging at www.cloudvandana.com
• Independent Salesforce Consultant/Developer
• Find me on Twitter @atul31Gupta

Who the hell am I?
Atul Gupta
Success Community
https://success.salesforce.com/profile?u=005300000089vZeAAI
Twitter
http://twitter.com/atul31gupta
LinkedIn
https://in.linkedin.com/in/atul31gupta
Facebook Page
https://www.facebook.com/atul31gupta
Blog
www.cloudvandana.com

Who wants to get Certified?
Let’s form Study Groups
Email me:
To: gupta.atul31@gmail.com
Subject: <Certification Name>
Body:
Full Name
Current Experience and Company
Phone Number
• I will create groups for you guys to collaborate and share notes.

Any suggestions where these groups can be created?
1. Success Collaboration Community itself
2. LinkedIn
3. Separate Chatter org

We need volunteers for these groups
You will be Mentor of respective groups
App Builder : Atul Gupta(@atul31gupta)
Admin : Atul Gupta
Advanced Admin :
Developer I : Saurabh Gulati(@ssg_1984)
Developer II : Atul Gupta

What is Salesforce Lightning?
It is not Lightening
It is not Lighting
It is definitely Lightning

What is Salesforce Lightning?
Lightning includes
• Lightning Components Framework which is helps you
develop component based apps which are compatible
with Salesforce1 and Lightning Experience.
• Lightning App Builder allows you to build apps visually
without any code.

What is Lightning Component Framework?
• Lightning Components Framework is a UI framework for
developing dynamic apps that run both on Mobile and
Desktop.
• It enables us in creating Single Page Applications.
• It uses Javascript on Client side and Apex on Server side.
• Derived from Open Source Aura Framework

Benefits of Lightning Component
Framework?
• Out of the Box components Set.
• Build once and use everywhere Desktop, Salesforce1,
Lightning Experience, Communities.
• Faster Development. Create components and then easily
assemble them to create your apps.
• Stateful client and stateless server. Makes the application
fast and highly optimized.

Lightning Components vs MVC
• Lightning Components are somewhat similar to Visualforce
Components.
• You can use components in other components and these
components can interact with each other via Events.
• MVC
• Model = Objects
• View = Visualforce
• Controller = Apex Code

Lightning Components vs MVC
Lightning Apps/Components
• Model = Objects
• View = Lightning Components
Client side controller
Helper
CSS Styles
• Controller = Apex Code
• Lightning Components are case-sensitive

Lightning Component Bundle
A component bundle contains a component or an app and
all its related resources.
• Lightning Components or Apps e.g. sample.cmp or sample.app
• (the only required component in the bundle)
• Client side controller e.g. sampleController.js
• Helper e.g. sampleHelper.js
• CSS Styles e.g. sample.css
• and more
• All related resources are named automatically. You just
need to give the App/Component a name.

Components
• They represent a reusable section of the UI, and can
range in granularity from a single line of text to an entire
app.
• Framework consists of a set of prebuilt components.
• You can just assemble the components and create an
App.

Events
• Event driven Programming where any component can subscribe
to an Application level or component event they can see.
• Events are either fired by the user interacting with the UI like
Browser Events, onclick, press, etc or by javascript controllers to
communicate with other components
• There are 2 types of Events:
• Component events are handled by the component itself or a
component that instantiates or contains the component.
• Application events are handled by all components that are
listening to the event.

What you need to develop a Lightning
App?
• A wall to bang your head in
• Aspirin
• A Beer
• Someone to take out your frustration on

What you need to develop a Lightning App?
• A Salesforce Org
• Define a custom Salesforce Domain Name
https://help.salesforce.com/HTViewHelpDoc?id=domain_name_o
verview.htm
• Register a NameSpace Prefix(only required for
Managed Packages)
• We need to rely on CSS frameworks like Bootstrap
and Lightning Design System to provide a consistent
look and feel to our App/Component.

Expense Tracker Application
The expense tracker app performs three distinct tasks:
• load the expense data and counters on app
initialization
• take in user input to create a new record and
update the view
• handle user interactions by communicating relevant
component data via events

Let’s create our Lightning App
• We need an object to work with.
• Please install Expenses App Package in your org.
https://login.salesforce.com/packaging/installPackage.apexp?p
0=04t90000000Rmdg
• Create a couple of records for the Expenses Object.
• Install Lightning Design System 1.00
https://login.salesforce.com/packaging/installPackage.apexp?p0
=04t61000000kZwH

• We will be creating an app called “Expense Tracker”.
• The code we will be using is all there in the Lightning
Components Developer Guide’s quick start section.
https://developer.salesforce.com/docs/atlas.en-
us.lightning.meta/lightning/qs_intro.htm

• Open Developer Console
• Go to File => New => Lightning Application
• Enter “expenseTracker” in the Name. Give a Description and
click “Submit”
• Copy and paste the Code from Step 1
Make sure to change the version of resource included
from /slds090/ to /slds100/
• Save your changes and click Preview in the sidebar to preview
your app
Congrats !! You have created your first Lightning App

Or Navigate to
https://<myDomain>.lightning.force.com/<namespace>/expense
Tracker.app
<myDomain> is the name of your custom Salesforce domain

Let’s create the Component
• Go to File => New => Lightning Component
• Enter “form” in the Name field. Give a suitable description and
you are click “Submit”.
• Copy and paste the code in Step 2
Make sure to change the version of resource included.
• You need a Lightning App to see Lightning Component on
Desktop.
• Implements=“appHostable”
The appHostable interface makes the component available as a
custom tab and hence available in Salesforce1 App.

Let’s include Component to App
• Update expenseTracker App with code from Step 2
i.e. include <c:form> in the App.
• Add css to the Style resource of the App
• Save changes and click “Update Preview”
• We just added the form Lightning component to the Lightning
App

Lightning Component Code
• ltng:require
To reference a JavaScript library that you’ve uploaded as a static
resource, use a <ltng:require> tag in your .cmp or .app markup.
• aura:attribute
Describes an attribute available on an app, interface,
component, or event.
Component attributes are like member variables on a class
in Apex

• ui:inputText
Represents an input field suitable for entering a single line of free-form text.
A ui:inputText component represents a text input field, which is rendered as an
HTML input tag of type text. To render the output from a ui:inputText
component, use the ui:outputText component.
This is a basic set up of a text field.
• ui:inputNumber
An input field for entering a number, taking advantage of client input
assistance and validation when available.
A ui:inputNumber component represents a number input field, which is
rendered as an HTML input tag of type text. This example shows a number field,
which displays a value of 10.

• ui:inputDateTime
An input field for entering a date and time.
A ui:inputDateTime component represents a date and time input field, which is
rendered as an HTML input tag of type text. The value is displayed in the default
format specified by the language locale of the browser.
• ui:inputCheckbox
Represents a checkbox. Its behavior can be configured using events such as
click and change.
A ui:inputCheckbox component represents a checkbox whose state is
controlled by the value and disabled attributes. It's rendered as an HTML input
tag of type checkbox. To render the output from a ui:inputCheckbox
component, use the ui:outputCheckbox component.

• ui:button
Represents a button element.
A ui:button component represents a button element that executes an action
defined by a controller. Clicking the button triggers the client-side controller
method set for the press event. The button can be created in several ways.
• ui:outputNumber
Displays the number in the default or specified format. Supports up to 18 digits
before the decimal place.
A ui:outputNumber component represents a number output that is rendered as
an HTML span tag. This component can be used with ui:inputNumber, which
takes in a number input. ui:outputNumber retrieves the locale information and
displays the number in the given decimal format. To display a number, you can
use an attribute value and bind it to the ui:outputNumber component.

• aura:iteration
Renders a view of a collection of items. Supports iterations containing
components that can be created exclusively on the client-side.
• aura:component
The root of the component hierarchy. Provides a default rendering
implementation.

Component Extension and Client side controller
• Create server side controller ExpenseController.
• Take the Code from Step 3
• Add the controller attribute that references the above class to
the form.cmp
• Add init handler to the load your data
• Add formcontroller client side controller to the bundle

Component Extension and Client side controller
A client-side controller handles events within a component and
can take in three parameters:
• the component to which the controller belongs
• the event that the action is handling
• the helper if it’s used.
• A helper is a resource for storing code that you want to reuse in
your component bundle,
• providing better code reusability and specialization

Add Helper to the Bundle
• Click on the Helper resource in the right hand sidebar in the
lightning component.
• Copy the helper code from Step 3

Handler and Events
• Carry on with the rest of the steps as per the Lightning
Components Developer Guide
Make sure to change the version of resource included
from /slds090/ to /slds100/

Application Lifecycle
User initiated Events
1. User clicks a button or interacts with a component, triggering a browser
event. For example, you want to save data from the server when the button is
clicked.
2. The button click invokes a client-side JavaScript controller, which provides
some custom logic before invoking a helper function.
3. The JavaScript controller invokes a helper function. Note that a helper
function improves code reuse but it’s optional for this example.
4. The helper function calls an Apex controller method and queues the action.

5. The Apex method is invoked and data is returned.
6. A JavaScript callback function is invoked when the Apex method completes.
7. The JavaScript callback function evaluates logic and updates the
component’s UI.
8. User sees the updated component.

Components/Application Initiated Events:
• Consider an attribute value on a component that changes
without a user action directly causing it,
• which then automatically fires a change event. When the
attribute value changes, the component that
• registers a change event handles this event by invoking a
JavaScript controller that contains custom logic,
• which could then proceed from step (3) onwards to retrieve
data from the server.

Rendering Lifecycle
The rendering lifecycle automatically handles rendering and
rerendering of components whenever the underlying data
changes.
Here is an outline of the rendering lifecycle.
1. A browser event triggers one or more Lightning events.
2. Each Lightning event triggers one or more actions that can
update data. The updated data can fire more events.
3. The rendering service tracks the stack of events that are
fired.
4. When all the data updates from the events are processed,
the framework rerenders all the components that own modified
data.

Tips to work with Lightning Components
1. Use separate names for client side and server side actions,
hard to debug bugs can occur
2. Action States
us.lightning.meta/lightning/controllers_server_actions_call.htm
3. Debug JavaScript Code
us.lightning.meta/lightning/aura_debug_mode.htm
4. Set validation errors
us.lightning.meta/lightning/js_validate_fields.htm

5. Always try to use COMPONENT events rather than APPLICATION
events
Component events can only be handled by components above
them in the containment hierarchy so their usage is more localized
to the components that need to know about them
us.lightning.meta/lightning/qs_aotp_app_step6_events.htm
6. Any browser DOM element event starting with on, such as
onclick or onkeypress, can be wired to a controller action.
us.lightning.meta/lightning/js_client_side_controller.htm

7. Put methods that you want to reuse in your component
bundle's helper.
Methods in Helper can be used by controllers, renderers in the
bundle
8. There are two very important guidelines for accessing the DOM
from a component or app.
You should never modify the DOM outside a renderer. However,
you can read from the DOM outside a renderer.
Use expressions, whenever possible, instead of trying to set a DOM
element directly.

What has not been covered?
1. Override rerendering
2. Creating Componets for Salesforce1 and Lightning
Experience
3. Application events
4. Styling Apps, Design Tokens
5. Component Documentation
6. Lightning Component Inspector
To Study about these topics and more…please refer
Lightning Components Developer Guide

Thank You
Thank you for attending the session.

Follow New Delhi SFDC DUG
Twitter
@newdelhisfdcdug
Meetup.com
http://www.meetup.com/New-Delhi-Salesforce-Platform-
Developer-User-Group
Success Community
http://sforce.co/1oc0lQA

Reach out to me !!
Email
gupta.atul31@gmail.com
Twitter
http://twitter.com/atul31gupta
LinkedIn
https://in.linkedin.com/in/atul31gupta
Facebook Page
https://www.facebook.com/atul31gupta
Blog
www.cloudvandana.com

Lightning Components Explained

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Lightning Components Explained (20)

More from Atul Gupta(8X) (20)

Recently uploaded (20)

Lightning Components Explained