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 Communityhttps://success.salesforce.com/profile?u=005300000089vZeAAI

Twitterhttp://twitter.com/atul31gupta

LinkedInhttps://in.linkedin.com/in/atul31gupta

Facebook Pagehttps://www.facebook.com/atul31gupta

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

Who wants to get Certified?

Any suggestions where these groups can be created?

1. Success Collaboration Community itself

2. LinkedIn

3. Separate Chatter org

Who wants to get Certified?

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.

Lightning Component Bundle

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.

Events

Developer Console

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 Namehttps://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

Let’s create our Lightning App

Let’s create our Lightning App

• 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

Let’s create our Lightning App

• 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

Let’s create our 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

Lightning Component Code

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

Lightning Component Code

• 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:inputCheckboxcomponent, use the ui:outputCheckbox component.

Lightning Component Code

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

Lightning Component Code

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

Application Lifecycle

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.

Application Lifecycle

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

https://developer.salesforce.com/docs/atlas.en-

us.lightning.meta/lightning/controllers_server_actions_call.htm

3. Debug JavaScript Code

https://developer.salesforce.com/docs/atlas.en-

us.lightning.meta/lightning/aura_debug_mode.htm

4. Set validation errors

https://developer.salesforce.com/docs/atlas.en-

us.lightning.meta/lightning/js_validate_fields.htm

Tips to work with Lightning Components

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

https://developer.salesforce.com/docs/atlas.en-

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.

https://developer.salesforce.com/docs/atlas.en-

us.lightning.meta/lightning/js_client_side_controller.htm

Tips to work with Lightning Components

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