This document provides an introduction and overview of Salesforce Lightning, including:
1. What is Lightning and its main components like Lightning Components, App Builder, and Schema Builder.
2. Instructions for getting started with Lightning including creating a developer org and enabling Lightning Components.
3. An overview of key aspects of building Lightning apps and components like App and Component structure, Controllers, Helpers, and Design files.
3. Index of contents
3
1. What is Lightning?
2. Getting started
3. Lightning App Builder
4. Lightning Components
5. Demo
6. What a nice surprise!
7. Code resources
8. Q&A
4. 1. What is Lightning?
4
● Salesforce1 Lightning
● Aura framework
● Lightning Component Framework
● Lightning Process Builder
● Lightning App Builder
● Lightning Schema Builder
● Lightning Community Builder
● Lightning Connect
5. 1. What is Lightning?
5
New stuff Rebrand
● Lightning Components
● Lightning App Builder
● Lightning Schema Builder
● Lightning Process Builder
● Lightning Community Builder
● Lightning Connect
6. 2. Getting started
6
1. Create a DEV org
2. Set up a namespace
3. Enable Lightning Components
a. Setup - Develop - Lightning Components - Check
"Enable Lightning Components in Salesforce1
(BETA)"
b. Click Save
7. 3. Lightning App Builder
7
1. Setup - Build - Lightning App Builder
2. Click New and follow the steps
3. Hands-on!
8. 4. Lightning Components
8
1. Setup - Build - Develop - Lightning Components
2. List of Lightning Components
3. No UI editor… yet.
9. 4. Lightning Components
9
1. Expose in Lightning App Builder:
a. flexipage:availableForAllPageTypes
2. Expose in Lightning Tabs:
a. force:appHostable
3. Expose in SF1:
a. Create a custom tab for Lightning Component
i. Setup - Create - Tabs
b. Include your Lightning component in the Salesforce1 navigation menu
i. Setup - Administer - Mobile Administration - Mobile Navigation
10. 4.1. App
10
1. They can include Lightning components and regular
HTML markup.
2. They can’t be included in SF1. You have to create a
master component and expose it.
12. 4.2. Component
12
1. They can use Apex Controller.
a. static methods annotated with @AuraEnabled
2. They can share information.
3. They can listen client-side events.
4. Wrapper classes are supported, but not inner classes.
5. Three main components:
a. aura
b. ui
c. force
17. 4.4. Helper
17
● Javascript functions.
● They looks like Controller functions.
● They can be called from:
○ Component Controller
○ Component Renderer.
● Examples:
○ Server-side actions.
○ Data processing.
○ Utility functions.
18. 4.4. Helper
18
helper
({
open: function(component, item, mode, sort){
if (mode === "new") {
//do something
}
// do something else, such as firing an event
}
})
controller
({
open: function(component, event, helper) {
helper.updateItem(component, event.getParam("item"), ‘new’, false);
}
})
19. 4.5. Style
19
● CSS Components Style.
● Has a special THIS CSS class added to it.
● You can also load external CSS (and JS) files.
○ They must be loaded as static resource.
○ <ltng:require />
21. 4.6. Documentation
21
● Provides a way to define documentation for a component.
● Two ways:
○ DocDef
■ Full documentation: description, sample code, reference to
example
■ HTML
○ Inline
■ One or two sentences
■ Plan text
22. 4.6. Documentation
22
<aura:documentation>
<aura:description>
<p>An <code>np:myComponent</code> component represents an element that executes
an action defined by a controller.</p>
</aura:description>
<aura:example name="myComponentExample" ref="np:myComponentExample" label="Using
the np:myComponent Component">
<p>This example shows a simple setup of <code>myComponent</code>.</p>
</aura:example>
</aura:documentation>
● See documentation
23. 4.7. Renderer
23
● Javascript
● Take control over Rendering Lifecycle.
● Functions you can override:
○ render()
○ rerender()
○ afterRender()
○ unrender()
25. 4.8. Design
25
1. Only Boolean, Integer or String attributes can be
exposed in design files.
2. Use ‘datasource’ attribute to render a field as a picklist
in the App Builder.
a. Use String for a picklist.
b. Use String[] for a multi-picklist.
i. This never worked for me. Any ideas?