Lightning Components Cheat Sheet - Salesforce

1 Lightning Components Cheat Sheet Overview App Events The Lightning component framework is designed to help you build responsive UIs App events communicate data between Components . The event contains the attributes you for Apps. It uses JavaScript on the client side and Apex on the server side. are passing. This framework is based on the Aura open-source framework. <aura:event type="APPLICATION">. <aura:attribute name="myObj". Getting Started type=" "/>. </aura:event>. 1. To enable Lightning Components in your Developer Edition organization, from Setup, click Develop > Lightning Components . Select the Enable Lightning The event is fired in your JavaScript code. Components checkbox. update : function(cmp, event, helper) {.}

2 Var myObj = (" ");. 2. To create a Lightning app, use the Developer Console. Click Your Name > Developer var myEvent = $ (" :theEvent");. Console. In the menu bar, click File > New > Lightning Application. ({ "myObj": myObj}).fire();. The following example creates a Lightning app that contains a component . ns refers to }. your namespace. In the handling component , add this handler: <aura:handler event="namespace:theEvent". <aura:application> <! > action="{! }"/>. <h1>Hello App</h1> <aura: component >. <ns:helloComponent /> <h1>Hello Lightning !</h1> Handle the event in a client-side controller. </aura:application> </aura: component > updateEvent : function(cmp, event, helper) {. (cmp, ("myObj"));. <aura: component > can contain HTML or other Lightning Components .

3 }. component Bundles Invoke An Action on component Initialization A bundle contains a component or app and all its related resources. To create the resources, Add the init handler and handle the event in the doInit action in your client-side controller. click the resource buttons on the component sidebar in the Developer Console. <aura:handler name="init" value="{!this}" action="{! }"/>. Client-side Controller Actions for the component or app CSS. Helper Shared JavaScript code Use the .THIS selector with your CSS declarations to prevent styling conflicts..THIS is replaced by your component name at runtime. Renderer Custom JavaScript renderer .THIS h1 {. padding-left: 40px;. Styles CSS declarations }. Expressions Static Resources Use the {!

4 } syntax to evaluate an expression. For example, Place resources in a .zip file and upload to Static Resources. Then, use the <link> tag {! } calls a client-side controller and {! } refers to a component within the <aura:application> tag. attribute value. {! } outputs the body of the component , which is an array <link href="/resource/path/to/myCSS" rel="stylesheet"/>. of Components . Find component by ID. Client-Side Controllers Use aura:id to set a local ID for a component . Controller functions, also known as actions, handle user interactions. This component <ui:button aura:id="button1" label="button1"/>. displays a string and a button, which when pressed updates the string value. Find the button component by calling ("button1"), where cmp is a reference <aura: component > to the component containing the button.

5 <aura:attribute name="myText" type="String". default="A string waiting to change"/>. {! } Common JavaScript Functions <ui:button label="Go" press="{! }"/>. </aura: component > These are common functions for Components and events: Here's the controller action: Get value (" ");. change : function(cmp, event, helper) {. (" ", "new string");. (cmp); Set value (" ", "some string");. }. The helper resource takes the following form: Get event parameter ("myAttr");. doSomething : function(cmp, myObj) {. //Do something else here } Set event parameters ({ "myAttr" : myVal})..fire();. Core Elements Common $A Methods These are common elements in a Lightning app: The Aura object is the top-level object in the JavaScript framework code.

6 $A is shorthand for Aura. <aura:application> Root element for a .app resource. $ () Returns an app-level event. <aura:attribute> Defines an attribute for an app, component , interface, or event. $ () Queues an action for batch execution. <aura: component > A component that can be reused in apps or other Components . $ () Logs an error. <aura:event> Defines a component or app event that is fired from a $ () Dynamically creates a component . JavaScript controller action. <aura:iteration> Iterates over a collection of items and renders the body $ () Runs code in external JavaScript. of the tag for each item. <aura:if> Renders content within the tag if a specified condition is true. Load or Save Data with Apex Controllers All methods on server-side controllers must be static.

7 Only methods explicitly annotated <aura:renderIf> Renders content within the tag if a specified condition is with @AuraEnabled are available. true. Preferred to <aura:if> if a server trip is required to instantiate the Components that aren't initially rendered. This controller has a method to return a list of opportunities. <aura:set> Sets the value of an attribute on a component reference. public class OpportunityController {. @AuraEnabled public static List<Opportunity> getOpportunities() {. <aura:text> Renders plain text and escapes the {! syntax. List<Opportunity> opportunities =. [SELECT Id, Name, CloseDate FROM Opportunity];. return opportunities;. }. Core Form }. These Components are used in forms: Wiring a component to a Controller <ui:button> An HTML button element used to submit a form or Add a controller system attribute to the <aura: component > tag to wire a execute an action.}

8 component to an Apex controller. For example: <ui:inputCheckbox> An HTML input element of type checkbox. <aura: component controller=" " >. <ui:inputDate> An HTML input element for entering a date. Calling an Apex Controller <ui:inputDateTime> Apex controllers are called from client-side controllers. The getOpps client-side An HTML input element for entering a date and time. controller action calls the getOpportunities Apex controller action. <ui:inputEmail> "getOpps" : function( component ) {. An HTML input element of type email. var a = (" ");. // Create a callback that is executed after <ui:inputNumber> An HTML input element for entering a number. // the server-side action returns (this, function(action) {. <ui:inputPhone> if ( () === "SUCCESS") {.)}}}

9 An HTML input element for a phone number. alert( ());. } else {. <ui:inputText> An HTML input element of type text. alert( ());. }. });. Core Output // Add the Apex action to the queue $ (a);. These Components are used for outputting values: }. <ui:outputCheckbox> Displays a read-only checkbox in a checked or Working with Components unchecked state. To reference a component , use Cmp.<myNamespace>.<myComponent>. <ui:outputDate> Displays a date based on locale. For example: <ui:outputDateTime> Displays a date and time based on locale. button = new (label = 'Click Me');. <ui:outputEmail> Displays an email address in an HTML anchor element. Integration with the Salesforce1 Mobile App To add a Lightning component to Salesforce1 Mobile App, use this markup: <ui:outputNumber> Displays a number based on locale.

10 <aura: component implements="force:appHostable">. <ui:outputPhone> Displays a phone number in an HTML anchor element. Implementing appHostable interface make a component available for Salesforce1 Mobile App. To activate it, create a custom Lightening component tab for the component and include the tab in the Mobile navigation menu. <ui:outputText> Displays a string of text. For other cheatsheets: 10132014.