Right IT Services Brown-bag about the new Salesforce Lightning.

1. © 2015, Right IT Services. rights reserved All
SALESFORCE LIGHTNING
Monday, 25 May 2015

2. 2
What is the Salesforce Lightning?
Main advantages of using Lightning
Developing in Lightning
VisualForce vs Lightning
Sources & Links
Agenda
Lightning

3. 3
Lightning applications are composed of Lightning components.
Visualforce enables us to modify HTML pages.
With Lightning, we now have a full framework that will allow us to:
Focus on developing components.
Link up events for better communication between the individual components.
Components that are re-usable,
self-contained UI elements for Force.com Apps.
Better MVC experience.
The Salesforce Lightning Component Framework is the next-generation component based development framework for
Salesforce. It's based on the Aura open source library, and uses a mixture of Javascript on the client side and Apex on the
Server side.
The Salesforce Lightning Component Framework is the next-generation component based development framework for
Salesforce. It's based on the Aura open source library, and uses a mixture of Javascript on the client side and Apex on the
Server side.
What is the Salesforce Lightning?
Lightning

4. 4
Components Set
Set of components out-of-the-Box to kick start building apps.
Performance
JavaScript on the client side to manage UI component metadata and application data.
The framework uses JSON (JavaScript Object Notation) to exchange data between the server and the client.
Event-driven architecture
Any component can subscribe to an application event, or to a component event they can see.
One of the core concepts of Lightning is the ability for components to fire and handle event that occur when, for instance,
a user clicks a button or the underlying data of a component changes.
Faster development
Out-of-the-box components that function seamlessly with desktop and mobile devices.
Encapsulation of the Components.
Device-aware and cross browser compatibility
HTML5, CSS3, and touch events
Main advantages of using Lightning
Lightning

5. 5
Visually create apps with drag-and-drop components.
Create beautiful, responsive UIs for Salesforce1 Apps.
Use custom or off-the-shelf Lightning Components.
Salesforce1 Lightning App Builder (LAB - beta)
Overview:
http://youtu.be/tsMcD8f_u34
Lightning App Builder Demo:
http://youtu.be/8WsU0_ghZ_Q
Lightning Connect:
http://youtu.be/OZWneVt_1Mk
Lightning

6. 6
Lightning Process Builder (rebrand of Visual Workflow)
Enterprise workflows in a visual chart with drag and drop tools.
Lightning Schema Builder (rebrand of Schema Builder) A visual node layout
program to add custom objects and fields without reading massive tables.
Lightning Community Designer
Allows users to quickly build new communities that connect partners, customers,
and employees.
Lightning Connect (rebrand of "External Data Objects”)
Instead of copying the data into Salesforce, use external objects to reference and
access the data in real time via Web service callouts. To connect to an external
data source, Lightning Connect uses the Open Data Protocol (OData) version 2.0.
Salesforce1 Lightning App Builder (beta)
Lightning

7. 7
Lightning Components (port of open source Aura Framework onto Salesforce1 platform)
Where components have already been created for certain functions, developers can just drop those into new apps they are
creating.
Examples: feed, list, chart, search, and navigation.
New components can be accessed on the Salesforce AppExchange.
Salesforce1 Lightning App Builder (beta)
Lightning

8. 8
Developers can now build components instead of building apps from scratch. This means developers can now go faster and
reuse components, for any app.
What about the developers?
Lightning

9. 9
An application is a top-level component and the main entry point to your
components. It can include components and HTML markup, such as <div> and
<header> tags.
In general, Lightning Components are intended to be used to:
extend / override portions of Salesforce's mobile (and eventually desktop)
UI.
construct other Lightning Components.
@AuraEnabled enables client- and server-side access to the controller method.
Server-side controllers must be static and all instances of a given component
share one static controller.
How is developed?
Lightning

10. 10
APP
1. Create a candidatesTracker.app
2. Upload Static resources, like bootstrap
3. Create a CSS resource candidatesTracker.css (CSS just for the standalone app)
Lightning Recruitment app - Candidates list (demo)
<aura:application>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="topbar">
<div class="iconPeople">&nbsp;</div>
<h1>Candidates</h1>
</div>
<div class="container">
<rcand:candidatesShow />
</div>
</aura:application>
aura:handler: This is an event handler that, upon component
initialization, will call the Javascript controller function doInit().

11. 11
APP
4. Create a candidatesShow.cmp component
Lightning development example
<aura:component controller="rcand.candidatesController"
implements="force:appHostable">
<aura:attribute name="candidates" type="rcand.Candidate__c[]"/>
<aura:handler event="rcand:BlogRequireJSEvent" action="{!c.initJS}"/>
<aura:registerEvent type="rcand:BlogRequireJSEvent" name="requireJSEvent"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<link href='/resource/bootstrap/' rel="stylesheet"/>
<!-- Other aura:attribute tags here -->
<!-- Other code here -->
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-4 col-sm-5 panel">
<table>
<aura:iteration items="{!v.candidates}" var="obj">
<tr>
<td class="obj photo hide"><img class="photoimg"
src='{!obj.rcand__Photo__c}' alt="photo" /></td>
<td class="obj name">{!obj.rcand__First_Name__c}</td>
<td class="obj lname">{!obj.rcand__Last_Name__c}</td>
………
aura:attribute: This element defines the array
that is iterated below.
aura:iteration: This tag iterates over the array
defined in the tag above, and places each
individual Candidate into a variable that is
bound in the HTML within.
Lightning

12. 12
APP
5. Create a candidatesShowController.js
Lightning development example
({
/*
1. helper gets the Candidates component
2. Sets up the RequireJS library (async load)
*/
doInit : function(component, event, helper) {
helper.getCandidates(component);
if (typeof require !== "undefined") {
var evt = $A.get("e.rcand:BlogRequireJSEvent");
evt.fire();
} else {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = "/resource/RequireJS";
script.type = 'text/javascript';
script.key = "/resource/RequireJS";
script.helper = this;
script.id = "script_" + component.getGlobalId();
var hlp = helper;
script.onload = function scriptLoaded(){
var evt = $A.get("e.rcand:BlogRequireJSEvent");
evt.fire();
};
…….
Implements the doInit() function called in the
component, and it calls the getCandidates()
helper function.
Lightning

13. 13
APP
6. Create a candidatesShowHelper.js
Lightning development example
({
getCandidates: function(component) {
var action = component.get("c.getCandidates");
var self = this;
action.setCallback(this, function(a) {
component.set("v.candidates", a.getReturnValue());
});
$A.enqueueAction(action);
},
})
It calls the Apex getCandidates() function that
actually does the REST API callout. It then
takes the return value from that function, and
populates the list of Candidates.
Lightning

14. 14
APP
7. Add other static resources (like: JS, CSS)
Lightning development example
.THIS .panel {
background-color: #ffffff;
border-radius: 4px !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
padding: 18px;
width: auto;
}
.THIS .panel.show {
height: 400px;
margin-left: 50px;
width: 350px;
background-color: #e6e7e8;
/*box-shadow: 0 0 5px #a6a6a6 inset;*/
box-shadow: 12px 12px 11px gray;
transition: all 1s ease-in-out;
}
……..
j$=jQuery.noConflict();
j$(document).ready(function() {
j$('table tr').click(function() {
j$('.panel.show').addClass('clicked');
j$('#photohere').attr('src', 'http://www.rightitservices.com/nc/static.gif');
j$('table tr').removeClass('highlight');
j$(this).addClass('highlight');
var name = j$(this).children('td.name').text();
var lname = j$(this).children('td.lname').text();
var photo = j$(this).find('> td.photo img.photoimg').attr('src');
var email = j$(this).children('td.email').text();
var country = j$(this).children('td.country').text();
var years = j$(this).children('td.years').text();
j$('#info_name').addClass('border').html(name + ' ' + lname);
j$('#info_email').html(email);
j$('#info_country').html(country);
j$('#info_years').html('Years of Experience:' + years);
j$('#photohere').attr('src', photo);
});
});
Lightning

15. 15
APEX – SERVER SIDE
Create a candidatesController.apxc
Lightning development example
public class candidatesController {
@AuraEnabled
public static List<Candidate__c> getCandidates() {
return [SELECT Id, First_Name__c, Last_Name__c, Email__c, Photo__c,
Years_of_Experience__c, Country__c FROM Candidate__c];
}
}
@AuraEnabled
Any method that you want to be visible to the
Aura view components will need this keyword
Other than @AuraEnabled, this class is pretty
similar to any other Apex class.
Lightning

16. 16
Lightning development example
Lightning

17. 17
Will Lightning Components be replacing Visualforce?
No.
After Lightning Components are GA, when would it still be appropriate to use Visualforce?
Visualforce provides the facility for delivering template-driven web pages and email messages. In addition, developers
wishing to simply utilize a basic container and maintain more control over the lifecycle of the request may choose
Visualforce pages. Finally, organizations that can’t use Apex code can’t use Lightning Components, but they can use
Visualforce.
Where can a component be displayed?
After you create a component, you will want to display it somewhere. There are 3 possibilities.
A standalone Lightning App (.app resource) that gets its own URL.
Inside the Salesforce1 Mobile App as a tab.
As a Lightning Extension, where it replaces an existing Salesforce1 Mobile App’s own components with itself.
Q&A
Lightning

18. 18
With Lightning we just gave everyone in our ecosystem of customers and developers a new superpower, and I can’t wait to see
what they do with it.
By Mike Rosenbaum Executive Vice President Platform at salesforce.com
The Power of Lightning
Lightning

19. 19
http://anupjadhav.com/2014/11/17/Thoughts-on-Lightning/
http://salesforce.stackexchange.com/questions/52/how-much-of-the-salesforce-user-interface-can-i-customise
http://www.tquila.com/blog/2014/11/11/what-salesforce-lightning-connect-and-external-objects
https://developer.salesforce.com/trailhead/module/lightning_components
Lightning Cheat Sheet
Lightning Components QuickStart
Lightning Components Developer’s Guide
http://pt.slideshare.net/rajaraodv/building-end-to-end-lightning-apps
http://blog.jeffdouglas.com/2014/10/14/tutorial-build-your-first-lightning-component/
http://www.mobileandemerging.technology/a-simple-salesforce-lightning-news-app/
http://sfdc-styleguide.herokuapp.com/
http://blog.enree.co/2014/10/salesforce-lightning-loading-scripts.html
Sources and Links
Warning: You can’t use Force.com Canvas apps in
Salesforce1 if you enable Lightning components.
Any Force.com Canvas apps in your organization
will no longer work in Salesforce1 if you enable
Lightning components.
Lightning

20. WHEN YOU HAVE TO DO IT, DO IT RIGHT
© 2015, Right IT Services. All rights reserved Rua Odette Saint Maurice | Lote 3L | Escritório A | 1700-921 Lisboa | Portugal |+351 218 232 261 | +351 215 975 418
SALESFORCE LIGHTNING
Monday, 25 May 2015
Nuno Cardoso | Lead UI / UX Architect