Salesforce Lightning Components Hands-On Workshop delivered at the Salesforce DUG on 11/11/2015.

1. Building Lightning Components
​ Christophe Coenraets
​ Developer Evangelist
​ Salesforce DUG NYC
​ 11/11/2015
​
​ #TrailheadLive
​ @ccoenraets

2. http://developer.salesforce.com/trailhead/projects

3. Step 1:
Setting Up Your Environment

4. 1. Sign up for a Developer Edition Org
2. Enable Lightning Components
Challenge

5. Step 2:
Enabling Geolocation on Accounts

6. 1. Add a geolocation field to the Account object
2. Enter sample data
Challenge

7. Step 3:
Creating an Aura-Enabled Controller

8. Visualforce Page-Centric Model
1. Browser requests page
Client Server
4. Browser renders html
2. Server executes Apex code
3. Server returns page (html + data)
Show different data? Back to 1
Show different view? Back to 1

9. Pros
1. Proven model
2. Productivity. Easy to implement
3. Naturally splits large apps into small, manageable units (pages)
Caveats
1. Limited interactivity
2. Higher latency
Visualforce Page Centric Model

10. Lightning App-Centric Model
1. Browser requests Component
Client Server
3. Browser builds UI with JavaScript
4. Browser requests data
7. Back to 3
2. Server returns Component Bundle
5. Server executes Apex
6. Server returns data (data only!)
Show different data? Back to 4
Show different view? Back to 3

11. Pros
• Enables highly interactive/immersive user experiences
• Less page refreshes
• Tightly integrated (no iframe)
• Composable
Caveats
• Higher learning curve compared to vanilla Visualforce pages
• Higher level of complexity. Building an app is generally more complex than building a page
Lightning Components App Centric Model

12. Creating an Aura-Enabled Apex Controller
public
with
sharing
class
AccountController
{
@AuraEnabled
public
static
List<Account>
findAll()
{
return
[SELECT
id,
name
FROM
Account];
}
}

13. 1. Create an Aura-enabled Apex controller named
AccountController
2. Add a findAll() method that returns accounts that have
location information
Challenge

14. Step 4:
Creating the AccountLocator
Component

15. Anatomy of a Lightning Component
<aura:component
controller="AccountController">
<div>
<div>AccountMap
goes
here</div>
<div>AccountList
goes
here</div>
</div>
</aura:component>

16. Component Parts: Component
UI Markup
Data binding
Attributes
Component

17. Component Parts: Style
UI Markup
Data binding
Attributes
Component
Style
Encapsulated
CSS

18. 1. In the Salesforce1 app
2. In App Builder
3. In Lightning Applications
Where can I use Lightning Components?

19. Using a Lightning Component in the Salesforce1 App
1. Implement the force:appHostable interface
<aura:component
implements="force:appHostable">
2. Create a Tab
3. Add the Tab to Mobile Navigation

20. Using a Lightning Component in a Lightning App
1. Create a Lightning App
File > New > Lightning Application
2. Embed the Lightning Component
<aura:application>
<c:AccountLocator/>
</aura:application>
Useful for creating fullscreen apps or for testing components during development

21. 1. Create the AccountLocator component
2. Add AccountLocator to the Salesforce1 App menu
Challenge

22. Step 5:
Creating the AccountList Component

23. Attributes
• The data of the component
• Available anywhere in the component
• Examples:
<aura:attribute
name="price"
type="Number"/>
<aura:attribute
name="title"
type="String"/>
<aura:attribute name="account" type="Account"/>
<aura:attribute name="accounts" type="Account[]"/>

24. Data Binding
• {! } notation
<aura:attribute
name="account"
type="Account"/>
<li><a>{!v.account.Name}</a></li>
• Bidirectional in ui: components
<aura:attribute
name="price"
type="Number"/>
<ui:inputNumber
label="Principal:"
value="{!v.price}"
format="#"/>
Price attribute value is updated automatically when user types in input field

25. Component Parts: Controller
UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
Style
Encapsulated
CSS

26. Event Handlers
1. Component
<aura:attribute
name="counter"
type="Number"
default="0"/>
<ui:button
label="Click
me"
press="{!c.handleClick}"/>
<div>{!v.counter}</div>
2. Controller
({
handleClick:
function(component,
event)
{
var
counter
=
component.get("v.counter");
counter
=
counter
+
1;
component.set("v.counter",
counter);
}
})

27. Event Handlers
<aura:attribute
name="accounts"
type="Accounts[]"/>
<aura:handler
name="init"
value="{!this}"
action="{!c.doInit}"
/>
({
doInit
:
function(component,
event)
{
var
action
=
component.get("c.findAll");
action.setCallback(this,
function(a)
{
component.set("v.accounts",
a.getReturnValue());
});
$A.enqueueAction(action);
}
})

28. Iterating through a List
<aura:attribute
name="accounts"
type="Account[]"/>
<aura:handler
name="init"
value="{!this}"
action="{!c.doInit}"/>
<ul>
<aura:iteration
items="{!v.accounts}"
var="account">
<li>{!account.Name}</li>
</aura:iteration>
</ul>

29. Iterating through a List
<aura:attribute
name="accounts"
type="Account[]"/>
<aura:handler
name="init"
value="{!this}"
action="{!c.doInit}"/>
<ul>
<aura:iteration
items="{!v.accounts}"
var="account">
<c:AccountListItem
account="{!account}"/>
</aura:iteration>
</ul>

30. AccountListItem
<aura:component>
<aura:attribute
name="account"
type="Account"/>
<li>{!v.account.Name}</li>
</aura:component>

31. 1. Create the AccountList component responsible for displaying
the list of accounts
2. Create the AccountListItem component that you nest inside
AccountList to render individual accounts in the list
Challenge

32. Step 6:
Creating the AccountMap Component

33. • External JavaScript libraries and CSS style sheets must be loaded as static
resources
• Use the <ltng:require>
tag to load them
• Loading is asynchronous
• afterScriptLoaded event is triggered after files have been succesfully loaded
Loading External JavaScript Libraries and CSS Files

34. Loading External JavaScript Libraries
<ltng:require
scripts="/resource/leaflet/leaflet.js"/>

35. Loading External CSS Style Sheets
<ltng:require
styles="/resource/leaflet/leaflet.css"
/>

36. Loading JavaScript Libraries and CSS Style Sheets
<ltng:require
scripts="/resource/leaflet/leaflet.js"
styles="/resource/leaflet/leaflet.css"
/>

37. Using the afterScriptLoaded Event
<ltng:require
scripts="/resource/leaflet/leaflet.js"
styles="/resource/leaflet/leaflet.css"
afterScriptsLoaded="{!c.renderMap}"
/>

38. 1. Load leaflet JS library
2. Load Leaflet CSS
3. Render the map when files are loaded
Challenge

39. Step 7:
Intercomponent Communication

40. Intercomponent Communication
Application Event Broker
Event Object
<aura:handler
event="c:AccountsLoaded"
action="{!c.accountsLoadedHandler}"/>
<aura:registerEvent
name="loaded"
type="c:AccountsLoaded"/>
var
event
=
$A.get("e.c:AccountsLoaded");
event.setParams({"accounts":
accounts});
event.fire();
AccountMapAccountList

41. Creating the AccountsLoaded Event
<aura:event
type="APPLICATION">
<aura:attribute
name="accounts"
Type="Account[]"/>
</aura:event>

42. 1. Create the AccountsLoaded Event
2. Trigger the AccountsLoaded Event in AccountList
3. Handle the AccountsLoaded Event in AccountMap
Challenge

43. Step 8:
Using Events to Center the Map

44. Intercomponent Communication
Application Event Broker
Event Object
<aura:handler
event="c:AccountSelected"
action="{!c.accountSelectedHandler}"/>
<aura:registerEvent
name="select"
type="c:AccountSelected"/>
var
event
=
$A.get("e.c:AccountSelected");
event.setParams({"account":
account});
event.fire();
AccountMapAccountList

45. 1. Create the AccountSelected event
2. Trigger the AccountSelected event in AccountList
3. Handle the AccountSelected event in AccountMap and center the map on
the selected account location
Challenge

46. Step 9:
Interacting with the Salesforce1 App

47. 1. Lightning Components enable you to extend standard features
2. Don't reinvent the wheel
For example, if your component needs an account details view: use the standard one, don't
create your own
3. Navigation between standard features and custom components should be smooth and feel
integrated: users shouldn't notice they are switching between standard and custom features
4. Platform events allow you to integrate your custom components into the standard experience
Salesforce1 Integration

48. Firing a Platform Event
var
event
=
$A.get("e.force:navigateToSObject");
event.setParams({
"recordId":
accountId
});
event.fire();
This event will be handled be the Salesforce1 app which will then navigate
to the account's details view

49. Component Parts: Helper
UI Markup
Data binding
Attributes
Component
Event
Handlers
Controller
Shared
Logic
Helper
Style
Encapsulated
CSS

50. When a user clicks a marker on the map, load the default
Salesforce1 details view for the selected account
Challenge

51. Step 10:
Using Components in App Builder

52. Using a Lightning Component in App Builder
1. Implement
the
flexipage:availableForAllPageTypes
interface
<aura:component
implements="flexipage:availableForAllPageTypes">
2. Create
a
component
description
in
the
Design
part
<design:component
label="AccountList">
</design:component>
3. Drag
the
component
from
the
component
palette
in
App
Builder

53. Compose AccountList and AccountMap in App Builder
Challenge

54. Summary
UI Markup
Data binding
Attributes
Component
Design
Descriptor
Event
Handlers
Controller
Shared
Logic
Helper
Style
Custom Rendering
Renderer
Encapsulated
CSS
App Builder