Lightning Components

Cheatsheet

Overview
The Lightning Component framework helps you build responsive UIs for Force.com apps. It uses JavaScript on the client side and Apex on the server
side. This framework is based on the Aura open-source framework.

Getting Started Core Elements

To create a Lightning app, use the Developer Console. Click These are common elements in a Lightning app:
Your Name > Developer Console. In the menu bar, click
File > New > Lightning Application. <aura:application> Root element for a .app resource.

The following example adds a component, ns:helloComponent, to

<aura:attribute> Defines an attribute for an app,
an app. ns refers to your namespace. Use c:helloComponent if you
component, interface, or event.
don't have a registered namespace.

<aura:component> A component that can be reused in

<!--helloComponent.cmp--> apps or other components.
<aura:component>
<h1>Hello Lightning!</h1> <aura:event> Defines a component or app event
</aura:component> that is fired from a JavaScript
controller action.

<aura:application> <aura:iteration> Iterates over a collection of items

<h1>Hello App</h1> and renders the body of the tag
<ns:helloComponent /> for each item.
</aura:application>

<aura:component> can contain HTML or other Lightning <aura:if> Renders content within the tag if a
components. specified conditionis true.

<aura:set> Sets the value of an attribute on a

component reference.

Component Bundles Client-Side Controllers

A bundle contains a component or app and all its related resources. Controller functions, also known as actions, handle user interactions.
To create the resources, click the resource buttons on the component This component displays a string and a button, which when pressed
sidebar in the Developer Console. updates the string value.
<aura:component>
Client-side
Actions for the component or app <aura:attribute name="myText" type="String"
Controller
default="A string waiting to change"/>
{!v.myText}
Helper Shared JavaScript code <ui:button label="Go" press="{!c.change}"/>
</aura:component>
Renderer Custom JavaScript renderer
Heres the controller action:
Styles CSS declarations change : function(cmp, event, helper) {
cmp.set("v.myText", "new string");
helper.doSomething(cmp);
}
Invoke An Action on Component Initialization The helper resource takes the following form:
doSomething : function(cmp, myObj) {
Add the init handler and handle the event in the doInit action //Do something else here
in your client-side controller. }

<aura:handler name="init" value="{!this}"

action="{!c.doInit}"/>
Lightning Components Cheatsheet

Events Find Component by ID

App events communicate data across the app. The event contains
Use aura:id to set a local ID for a component.
the attributes you are passing. A component registers that it may <ui:button aura:id="button1" label="button1"/>
fire an event by using <aura:registerEvent> in its markup. Find the button component by calling cmp.find("button1"),
<aura:event type="APPLICATION"> where cmp is a reference to the component containing the button.
<aura:attribute name="myObj"
type="namespace.MyObj__c"/>
</aura:event>
Common JavaScript Functions
The event is fired in your JavaScript code.
update : function(cmp, event, helper) { These are common functions for components and events:
var myObj = cmp.get("v.myObj"); Get value cmp.get("v.myString");
var myEvent = $A.get("e.namespace:theEvent");
myEvent.setParams({ "myObj": myObj}).fire(); cmp.set("v.myString",
Set value
} "some string");

In the handling component, add this handler: Get event parameter myEvt.getParam("myAttr");
<aura:handler event="namespace:theEvent" myEvt.setParams({ "myAttr" :
Set event parameters
action="{!c.updateEvent}"/> myVal});
Handle the event in a client-side controller.
updateEvent : function(cmp, event, helper) {
helper.updateObj(cmp,event.getParam("myObj"));
}
Core Form
Alternatively, use a component event to communicate These components are used in forms:
data to a parent component. Retrieve the event using cmp. An HTML button element used to
getEvent("cmpEvent") and fire it. <ui:button> submit a form or
execute an action.
An HTML input element of type
<ui:inputCheckbox>
checkbox.
Expressions
An HTML input element for entering
<ui:inputDate>
Use the {!...} syntax to evaluate an expression. For example, a date.
{!c.change} calls a client-side controller and {!v.myText} An HTML input element for entering
<ui:inputDateTime>
refers to a component attribute value. {!v.body} outputs the a date and time.
body of the component, which is an array
<ui:inputEmail> An HTML input element of type email.
of components.
An HTML input element for entering
<ui:inputNumber>
a number.
An HTML input element for a phone
CSS <ui:inputPhone>
number.
Use the .THIS selector with your CSS declarations to prevent styling <ui:menu> An HTML select element.
conflicts. .THIS is replaced by your component name at runtime.
A drop-down list with a trigger that
.THIS h1 { <ui:inputSelect>
padding-left: 40px; controls its visibility.
}

Core Output
Static Resources These components are used for outputting values:
Place resources in a .zip file and upload to Static Resources. <ui:outputCheckbox> Displays a read-only checkbox in
Reference a JS or CSS resource using: a checked or unchecked state.
<ltng:require scripts="{!$Resource.jsResourceName}" <ui:outputDate> Displays a date based on locale.
styles="{!$Resource.cssResourceName}"
<ui:outputDateTime> Displays a date and time based
afterScriptsLoaded="{!c.afterScriptsLoaded}" />
on locale.
Use yourNamespace__resourceName if you have a registered
<ui:outputEmail> Displays an email address in an
namespace.
HTML anchor element.
The afterScriptsLoaded event calls a controller action after the
scripts are loaded. <ui:outputNumber> Displays a number based on locale.
<ui:outputPhone> Displays a phone number in an
HTML anchor element.
<ui:outputText> Displays a string of text.
Common $A Methods Calling and Apex Controller
The Aura object is the top-level object in the JavaScript framework
Apex controllers are called from client-side controllers.
code. $A is shorthand for Aura.
The getOpps client-side controller action calls the
$A.get() Returns an app-level event. getOpportunities Apex controller action.
$A.enqueueAction() Queues an action for batch execution. "getOpps" : function(component) {
$A.createComponent() Dynamically creates a component. var a = component.get("c.getOpportunities");

$A.getCallback() // Create a callback that is executed after

Wrap code that modifies a component
outside the normal rerendering // the server-side action returns
lifecycle, such as in a setTimeout() call. a.setCallback(this, function(response) {
if (response.getState() === "SUCCESS") {
alert(response.getReturnValue());
Load or Save Data with Apex Controllers } else {
alert(response.getState());
All methods on server-side controllers must be static. Only methods
explicitly annotated with @AuraEnabled are available. }
});
You must implement CRUD and field-level security in your
Apex controllers. // Add the Apex action to the queue
$A.enqueueAction(a);
Check for isAccessible(), isUpdateable(),
isCreateable(), and isDeletable() prior to performing }
operations on sObjects.
This controller has a method to return a list of opportunities.
public with sharing class OpportunityController {
@AuraEnabled
Integration with Salesforce1
public static List<Opportunity> and Lightning Experience
getOpportunities() {
List<Opportunity> opportunities = To add a Lightning component to Salesforce1 Mobile App, use
[SELECT Id, Name, CloseDate FROM this markup:
Opportunity]; <aura:component implements="force:appHostable">
// Perform isAccessible() check here
Implementing appHostable interface makes the component
return opportunities;
available for Salesforce1 Mobile App. To activate it, create a
}
custom Lightning Component tab for the component and
}
include the tab in the Mobile navigation menu.

Wiring a Component to a Controller To make a component available for Lightning Experience, create
a custom Lightning Component tab for the component, and
Add a controller system attribute to the <aura:component> assign it to an app via Create > Apps. The component will be
tag to wire a component to an Apex controller. For example: available in the App Launcher.
<aura:component controller="myNamespace.
MyApexController">
 developer.salesforce.com

For other cheatsheets:

http://developer.salesforce.com/cheatsheets 10042016