Lightning Components Developer’s Guide

Getting Started
Introduction
Quick Start
Before You Begin
Create a Standalone Lightning App
Optional: Install the Expense Tracker App
Create an Expense Object
Step 1: Create A Static Mockup
Step 2: Create A Component for User Input
Step 3: Load the Expense Data
Step 4: Create a Nested Component
Step 5: Enable Input for New Expenses
Step 6: Make the App Interactive With Events
Summary
Create a Component for Salesforce1
Creating Components
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Step 2: Create A Component for User Input

Components are the building blocks of an app. They can be wired up to an Apex controller class to load your data. The component you create in this step provides a form that takes in user input about an expense, such as expense amount and date.
  1. Click File | New | Lightning Component.
  2. Enter form for the Name field in the New Lightning Bundle popup window. This creates a new component, form.cmp.
  3. In the source code editor, enter this code.

    The following code creates an input form that takes in user input to create an expense, which works in both a standalone app and in Salesforce1. For Lightning apps specific to Salesforce1, you can use force:createRecord to open the create record page.

    Note

    1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18  <ltng:require styles="/resource/bootstrap"/>
19  <aura:attribute name="expenses" type="Expense__c[]"/>
20  <aura:attribute name="newExpense" type="Expense__c"
21             default="{ 'sobjectType': 'Expense__c',
22                         'Name': '',
23                         'Amount__c': 0,
24                         'Client__c': '', 
25                         'Date__c': '',
26                         'Reimbursed__c': false
27                       }"/>
28  <!-- If you registered a namespace, replace line 3-11 with the following -->
29  <!-- <aura:attribute name="expenses" type="myNamespace.Expense__c[]"/> 
30  <aura:attribute name="newExpense" type="myNamespace__Expense__c"
31               default="{ 'sobjectType': 'myNamespace__Expense__c',
32                          'Name': '',
33                          'myNamespace__Amount__c': 0,
34                          'myNamespace__Client__c': '',
35                          'myNamespace__Date__c': '',
36                          'myNamespace__Reimbursed__c': false
37                         }"/> -->
38  <!-- Attributes for Expense Counters -->
39  <aura:attribute name="total" type="Double" default="0.00" />
40  <aura:attribute name="exp" type="Double" default="0" />
41
42  <!-- Input Form using components -->
43  <div class="bootstrap-sf1">	
44        <div class="container">
45            <form>
46                <fieldset>
47                    <ui:inputText aura:id="expname" label="Expense Name"
48                                  class="form-control" 
49                                  value="{!v.newExpense.Name}"
50                                  placeholder="My Expense" required="true"/>
51
52                    <!-- If you registered a namespace, the attribute values must include your namespace -->
53                    <!-- For example, value="{!v.newExpense.myNamespace__Amount__c}" -->
54                    <ui:inputNumber aura:id="amount" label="Amount" 
55                                    class="form-control"
56                                    value="{!v.newExpense.Amount__c}"
57                                    placeholder="20.80" required="true"/>
58                    <ui:inputText aura:id="client" label="Client" 
59                                  class="form-control"
60                                  value="{!v.newExpense.Client__c}"
61                                  placeholder="ABC Co."/>
62                    <ui:inputDateTime aura:id="expdate" label="Expense Date" 
63                                      class="form-control"
64                                      value="{!v.newExpense.Date__c}"
65                                      displayDatePicker="true"/>
66                    <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
67                                      class="checkbox"
68                                      value="{!v.newExpense.Reimbursed__c}"/>
69                    <ui:button label="Submit" press="{!c.createExpense}"/>
70                </fieldset>
71            </form>
72   </div><!-- ./container-->
73
74  <!-- Expense Counters -->
75  <div class="container">
76          <div class="row">
77              <div class="col-sm-6">
78                <!-- Make the counter red if total amount is more than 100 -->
79                <div class="{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-info'}">
80                  <h3>Total Expenses</h3>$<ui:outputNumber value="{!v.total}" format=".00"/>
81                </div>
82              </div>
83              <div class="col-sm-6">
84                  <div class="alert alert-info">
85                      <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/>
86                  </div>
87               </div>
88          </div>
89  </div>
90          <!-- Display expense records -->
91          <div class="container">
92              <div id="list" class="row">
93                 <aura:iteration items="{!v.expenses}" var="expense">
94                     <!-- If you’re using a namespace, use the format {!expense.myNamespace__myField__c} instead. -->
95	              <p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p>                     
96                </aura:iteration>
97              </div>
98          </div> 
99    </div><!--./bootstrap-sf1-->
100</aura:component>

    Components provide a rich set of attributes and browser event support. Attributes are typed fields that are set on a specific instance of a component, and can be referenced using an expression syntax. All aura:attribute tags have name and type values. For more information, see Supported aura:attribute Types.

    The attributes and expressions here will become clearer as you build the app. {!v.exp} evaluates the number of expenses records and {!v.total} evaluates the total amount. {!c.createExpense} represents the client-side controller action that runs when the Submit button is clicked, which creates a new expense. The press event in ui:button enables you to wire up the action when the button is pressed.

    The expression {!v.expenses} wires up the component to the expenses object. var="expense" denotes the name of the variable to use for each item inside the iteration. {!expense.Client__c} represents data binding to the client field in the expense object.

    The default value for newExpense of type Expense__c must be initialized with the correct fields, including sobjectType. Initializing the default value ensures that the expense is saved in the correct format.

    Note

  4. Click STYLE in the sidebar to create a new resource named form.css. Enter these CSS rule sets.
    1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS .uiInputDateTime+.datePicker-openIcon {
18    position: absolute;
19    left: 90%;
20    top: 30px;
21}
22
23.THIS .uiInputDefaultError li {
24  list-style: none;
25}

    THIS is a keyword that adds namespacing to CSS to prevent any conflicts with another component’s styling. The .uiInputDefaultError selector styles the default error component when you add field validation in Step 5: Enable Input for New Expenses.

    Note

  5. Add the component to the app. In expenseTracker.app, add the new component to the markup.

    This step adds <c:form /> to the markup. If you’re using a namespace, you can use <myNamespace:form /> instead.

    1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:application>
18    <ltng:require styles="/resource/bootstrap"/>
19    
20    <div class="bootstrap-sf1">
21        <div class="navbar navbar-inverse">
22	        <div class="navbar-header">
23		     <a href="#" class="navbar-brand">My Expenses</a>
24        	</div>
25         </div>
26        <div class="container">
27            <c:form />
28        </div>
29    </div>
30</aura:application>
  6. Save your changes and click Update Preview in the sidebar to preview your app. Alternatively, reload your browser.

    In this step, the component you created doesn’t display any data since you haven’t created the Apex controller class yet.

    Note

Good job! You created a component that provides an input form and view of your expenses.

Beyond the Basics

The Lightning Component framework comes with a set of out-of-the-box components that are organized into different namespaces: aura and ui. The ui namespace provides components typical of a UI framework. For example, ui:inputText corresponds to a text field. The aura namespace includes many components for core framework functionality, like aura:iteration as used in this step.