This ppt explains introduction to Salesforce Lightning

1. INTRODUCTION
TO
LIGHTNING LIFECYCLE
Smriti Sharan
Mohit Sharma

2. TOPICS TO BE COVERED
Section 3
 Lightning Experience or LEX
 Lightning Component Framework
 Base and experienced components
 Lightning Design System
 Lightning App Builder
 Lightning Application
Section 4
 Interfaces in lightning
 Component Bundle
 Action.SetCallback
 Demo 1
 Demo 2
Section 5
 Events in
Lightning
 Demo 3
Section 1
What is Lightning?
Lightning tools
How to enable Salesforce
lightning?
Section 2
 Classic Vs Lightning

3. SECTION 1
WHAT IS LIGHTNING?
LIGHTNING TOOLS
HOW TO ENABLE SALESFORCE
LIGHTNING?

4. WHAT IS LIGHTNING ?
LIGHTNING IS SINGLE PAGE APPLICATION
FRAMEWORK FOR BUILDING SINGLE PAGE
RESPONSIVE APPLICATIONS

5. LIGHTING TOOLS: WHAT MAKES
LIGHTNING SO SPECIAL?

6. WHAT MAKES LIGHTNING SO
SPECIAL?
• BUILD ON OPEN SOURCE TECHNOLOGIES AND
INDUSTRY STANDARDS
• USE JAVASCRIPT ON CLIENT SIDE AND APEX ON
BACKEND

7. EVOLUTION OF SALESFORCE
LIGHTNING
2006
JavaScript
with
S-controls
2008-
Apex and
Visualforce
2011-
Jquery and
Visualforce
2012-
Javascript
Remoting
2014-
Salesforce1
Mobile
2016-
Salesforce
Lightning

8. HOW TO ENABLE SALESFORCE
LIGHTNING?
• FREE DEVELOPER EDITION
• SWITCH BETWEEN CLASSIC AND LIGHTNING

9. MY DOMAIN
• MY DOMAIN IS REQUIRE TO CREATE LIGHTNING COMPONENTS
• USING MY DOMAIN, SALESFORCE LETS YOU DEFINE A SUBDOMAIN WITHIN THEIR
SALESFORCE ORG.
• THE SUBDOMAIN NAME APPEARS IN ALL ORG URLS AND REPLACES THE INSTANCE
NAME Instance name
Custom Subdomain

10. SECTION2
CLASSIC VS LIGHTNING

11. CLASSIC VS LIGHTNING
Classic Lightning
Does not have two-way binding Has two-way binding
Multipage Application Single Page Application (SPA)
MVC architecture MVCC architecture
Stateless client, Stateful Server Stateful client, Stateless server
View State No View State

12. MULTIPLE PAGE APPLICATION
• RELOADS THE ENTIRE PAGE AND DISPLAYS THE NEW
ONE WHEN A USER INTERACTS WITH THE WEB APP
• AJAX ALLOWS TO REFRESH ONLY PARTICULAR PARTS
OF THE APPLICATION BUT IT IS MORE COMPLICATED
THAN CREATING SINGLE PAGE APPLICATION

13. MULTIPLE PAGE APPLICATION
DIAGRAM

14. EXAMPLE OF MULTI PAGE
APPLICATION

15. SINGLE PAGE APPLICATION
• LOADS EVERYTHING ON THE PAGE LOAD
• NEVER NEEDS TO RELOAD THE PAGE
• EXECUTES LOGIC IN THE WEB BROWSER ITSELF RATHER
THAN ON THE SERVER
• DEPENDS HEAVILY ON JAVASCRIPT, CSS,HTML5
• SERVER ACTS AS THE DATABASE FOR STORING THE DATA

16. SINGLE PAGE APPLICATION
DIAGRAM

17. EXAMPLE OF SINGLE PAGE
APPLICATION

18. EXAMPLES OF SINGLE PAGE
APPLICATION
GMAIL, GOOGLE MAPS, FACEBOOK OR GITHUB

19. STORY TIME: RESTAURANT ANALOGY
TO UNDERSTAND MVC
VIEW CONTROLLER MODEL
CUSTOMER WAITER CHEF

20. CLASSIC VS LIGHTNING :MVC VS
MVCC ARCHITECTURE

21. STORY TIME: RESTAURANT ANALOGY TO
UNDERSTAND MVCC
VIEW CLIENT SIDE
CONTROLLER
MODELSERVER SIDE
CONTROLLER
CUSTOMER
TAKING ORDER
WAITER SERVICE WAITER CHEF

22. MVCC : MODEL VIEW
CONTROLLER CONTROLLER

23. CLASSIC: STATELESS CLIENT AND STATEFUL
SERVER
• CLASSIC PAGES ARE COMBINED ON SERVER
• EVERY INTERACTION RESULTS IN SERVER CALL
LIGHTNING: STATEFUL CLIENT AND STATELESS
SERVER
• PIECES OF PAGES ARE ASSEMBLED THEMSELVES AS
INDIVIDUAL BUILDING BLOCKS
• THE PROCESSING IS BEING DONE AT THE BROWSER
LEVEL
• LESS LOAD ON SERVER MAKES USER EXPERIENCE

24. SECTION 3
• LIGHTNING EXPERIENCE OR LEX
• LIGHTNING COMPONENT FRAMEWORK
• BASE AND EXPERIENCED COMPONENTS
• LIGHTNING APPLICATION

25. LIGHTING EXPERIENCE =
LIGHTNING COMPONENT FRAMEWORK + SLDS

26. LIGHTNING EXPERIENCE: MADE OF
LIGHTNING PAGES
Home Page Opportunity Page

27. LIGHTNING PAGE

28. THREE TYPES OF LIGHTNING PAGES (AKA
FLEXIPAGES)
Flexipage:availableforrecord
page
Flexipage:availablefordeskt
op
Flexipage:availableforallpag
etype

29. LIGHTNING PAGES ARE MADE OF
EXPERIENCED COMPONENTS

30. EXPERIENCED AND BASE COMPONENTS

31. LIGHTNING APPLICATION AND EXPERIENCED
COMPONENTS

32. BASE AND EXPERIENCE COMPONENTS
BASE COMPONENTS:
INDIVIDUAL COMPONENTS, DON’T HAVE LOT OF FUNCTIONALITY
• CUSTOM SVG
• EMBEDDED IMAGES
• LIGHTNING MAP
• CHARTING
EXPERIENCED COMPONENTS:
ADD LOGIC THEN THEY BECOME EXPERIENCED COMPONENTS

33. BASE COMPONENTS

34. DECONSTRUCTING LIGHTNING APP

35. COMPOSITION TO BUILD COMPONENTS

36. LIGHTNING COMPONENT FRAMEWORK
TOOLS THAT ALLOW DEVELOPERS TO BUILD
• REUSABLE COMPONENTS
• BUILD STANDALONE APPS
• EVENT DRIVEN APPROACH
IT USES JAVASCRIPT ON THE CLIENT SIDE AND APEX ON THE
SERVER SIDE.

37. LIGHTNING COMPONENT
• REUSABLE SECTION OF UI
• GLUE TOGETHER LIKE NUT AND BOLTS
• CLUBBED TOGETHER TO CREATE APPLICATIONS USING
LIGHTNING APP BUILDER
• ADDED TO SALESFORCE COMMUNITIES
• CAN BE EMBEDDED WITH VISUALFORCE PAGES
• EVENT DRIVEN APPROACH
• PUBLISH IT ON APPEXCHANGE

38. LIGHTNING COMPONENTS ARE
REUSABLE

39. COMPONENT LIBRARY TO FIND ABOUT
COMPONENTS

40. LAYOUT COMPONENTS : USED FOR
PRESENTATION

41. VISUAL COMPONENTS: IMAGE AND
ICONS

42. DATA INPUT AND BUTTON
COMPONENTS

43. POPULAR BASE COMPONENT
EXAMPLE

44. LIGHTNING COMPONENT
ECOSYSTEM

45. APP BUILDER TO DRAG AND DROP
COMPONENTS
Standard and
custom
Components
Toolbar
Component
Properties
Component
Canvas

46. DEVELOPMENT TOOLS
• DEV CONSOLE
• SUBLIME
• VISUAL STUDIO CODE PLUGIN

47. Section 4
Interface in Lightning
Demo 1: Hello Lightning
Action.setCallback
Demo 2: Fetching Account List

48. INTERFACE IN LIGHTNING

49. INTERFACES IN LIGHTNING
• LIGHTNING:ACTIONOVERRIDE : COMPONENTS THAT IMPLEMENT THIS
INTERFACE DON’T AUTOMATICALLY OVERRIDE ANY ACTION. YOU NEED TO
MANUALLY OVERRIDE RELEVANT ACTIONS IN SETUP.
• LIGHTNING:APPHOMETEMPLATE : TO ENABLE YOUR COMPONENT TO BE USED
AS A CUSTOM LIGHTNING PAGE TEMPLATE FOR PAGES OF TYPE APP PAGE. THIS
INTERFACE HAS NO EFFECT EXCEPT WHEN USED WITHIN LIGHTNING
EXPERIENCE AND THE SALESFORCE APP.
• FORCE:APPHOSTBLE : TO ENABLE YOUR COMPONENT TO BE USED AS A
CUSTOM TAB IN LIGHTNING EXPERIENCE OR THE SALESFORCE MOBILE APP.
COMPONENTS THAT IMPLEMENT THIS INTERFACE CAN BE USED TO CREATE
TABS IN BOTH LIGHTNING EXPERIENCE AND THE SALESFORCE MOBILE APP.

50. INTERFACES IN LIGHTING
• FORCE:HASRECORDID :ENABLE THE COMPONENT TO BE ASSIGNED THE
ID OF THE CURRENT RECORD.THE CURRENT RECORD ID IS USEFUL IF THE
COMPONENT IS USED ON A LIGHTNING RECORD PAGE, AS AN OBJECT-
SPECIFIC CUSTOM ACTION OR ACTION OVERRIDE.
• FORCE:LIGHTNINGQUICKACTION :ADD
THE FORCE:LIGHTNINGQUICKACTION INTERFACE TO A LIGHTNING
COMPONENT TO ALLOW IT TO BE USED AS A CUSTOM ACTION IN
LIGHTNING EXPERIENCE OR THE SALESFORCE MOBILE APP.
• FORCECOMMUNITY:AVAILABLEFORALLPAGETYPE : TO APPEAR IN
COMMUNITY BUILDER, A COMPONENT MUST
IMPLEMENT THIS INTERFACE.
• FORCE:LIGHTNINGQUICKACTIONWITHOUTHEADER: ADD
THIS INTERFACE TO A LIGHTNING COMPONENT TO ALLOW IT TO BE
USED AS A CUSTOM ACTION IN LIGHTNING EXPERIENCE OR THE
SALESFORCE MOBILE APP.

51. COMPONENT BUNDLE
COMPONENT- CONTAINS THE MARKUP
CONTROLLER- HANDLE EVENTS ON COMPONENT
HELPER-FUNCTIONS MAY ME CALLED FROM OTHER
JS
STYLE- GREAT EXPERIENCE TO END USER
DOCUMENTATION- HOLDS ALL THE DOCUMENTATION
DETAILS FOR YOUR COMPONENT
RENDER- IT ALLOWS TO OVERRIDE COMPONENT
LIFECYCLE. USE WITH CAUTION
DESIGN- FILE CONTAINS INFORMATION AROUND
HOW TO APPLY YOUR COMPONENT
SVG- CUSTOM ICON

52. ATTRIBUTES
• AURA:ATTRIBUTE DESCRIBES AN ATTRIBUTE AVAILABLE ON AN
APP, INTERFACE, COMPONENT, OR EVENT.
• IT IS A PLACE TO STORE THE VALUE
• DEFINE ATTRIBUTE USING <AURA:ATTRIBUTE>
• EXAMPLE: <AURA:ATTRIBUTE NAME=“SFDCAMPLFIED"
TYPE="STRING" />

53. EXPRESSION
• EXPRESSIONS ALLOW YOU TO MAKE CALCULATIONS AND ACCESS
PROPERTY VALUES AND OTHER DATA WITHIN COMPONENT MARKUP.
• USE EXPRESSIONS FOR DYNAMIC OUTPUT OR PASSING VALUES INTO
COMPONENTS BY ASSIGNING THEM TO ATTRIBUTES.
• THE EXPRESSION SYNTAX IS: {!EXPRESSION}
• EXAMPLE : {!V.FIRSTNAME} – WHEREVER WE USE THIS EXPRESSION THEN
WE ARE
• IN THIS EXPRESSION, V REPRESENTS THE VIEW, WHICH IS THE SET OF
COMPONENT ATTRIBUTES, FIRSTNAME IS AN ATTRIBUTE OF THE
COMPONENT.

54. DEMO 1: HELLO LIGHTNING

55. CLIENT SIDE LOGIC- CLIENT SIDE
CONTROLLER
Component
JS Controller

56. ACTION.SETCALLBACK

57. EXECUTION OF
ACTION.SETCALLBACK
1.THE SETUP OF A VARIABLE “ACTION”
2.THE CALLBACK IS A FUNCTION ITSELF – ALL OF WHICH IS NOT
EXECUTED AS IT IS READ, BUT RATHER STORED AS AN
ATTRIBUTE OF THE ACTION PARAMETER.
3.CONTENT ARE FILLED WITHIN ACTION.
4. THEN PASSES OUR ACTION OBJECT INTO THE
$A.ENQUEUEACTION METHOD

58. SERVER SIDE CONTROLLER

59. DEMO 2: ACCOUNT LIST

60. SECTION 5
• EVENTS IN LIGHTNING
• DEMO 3

61. EVENTS IN LIGHTNING

63. EVENTS
• EVENT ACTS AS A CHANNEL TO COMMUNICATE BETWEEN COMPONENTS.
EVENTS ARE USUALLY TRIGGERED BY USER EXPERIENCE.
• EVENT CAN CONTAIN ATTRIBUTES THAT CAN BE SET BEFORE THE EVENT
IS FIRED AND READ WHEN EVENT IS HANDLED.
• COMPONENT WHICH REGISTER THROUGH EVENT CAN SEND
INFORMATION THROUGH CONTROLLER.
• COMPONENT SPECIFYING HANDLER FOR EVENT CAN READ
INFORMATION PASSED BY OTHER EVENT.

64. Types of Lightning Events
• System Events
• Browser Events
• Application Events
• Component Events
• Navigation Events

65. Component Event

66. APPLICATION EVENT

68. DEMO 3: FILTER IN ACCOUNT LIST

69. LINKS
• MEETUP LINK - HTTPS://SFAMPLIFIED-DEVELOPER-
EDITION.AP15.FORCE.COM/S/MEETUP
• GITHUB LINK - HTTPS://GITHUB.COM/SSHARAN199/SFDCAMPLIFIEDDEMO
• SFDCAMPLIFIED LINK -HTTPS://WWW.SFDCAMPLIFIED.COM/

70. NOW HOW TO LEARN
• DON’T WORRY YOU ARE NOT ALONE
• ASK COMMUNITY – MEETUPS ,STACK EXCHANGE,
SUCCESS COMMUNITY
• TRAILHEAD
• SFDC AMPLIFIED

71. LIGHTNING
CANNOT BE TAKEN
LIGHTLY !

72. EVERYTHING
EASY IS ONCE
DIFFICULT

73. THANK YOU