Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
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. Replace namespace with the name of your registered namespace.
    1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2  <aura:attribute name="expenses" type="namespace.Expense__c[]"/>
3  <aura:attribute name="newExpense" type="namespace.Expense__c"
4             default="{ 'sobjectType': 'namespace__Expense__c',
5                         'Name': '',
6                         'namespace__Amount__c': 0,
7                         'namespace__Client__c': '', 
8                         'namespace__Date__c': '',
9                         'namespace__Reimbursed__c': false
10                       }"/>
11  <!-- Attributes for Expense Counters -->
12  <aura:attribute name="total" type="Double" default="0.00" />
13  <aura:attribute name="exp" type="Double" default="0" />
14
15  <!-- Input Form using components -->
16  <form>
17    <fieldset>
18      <ui:inputText aura:id="expname" label="Expense Name"
19                    class="form-control" 
20                    value="{!v.newExpense.name}"
21                    placeholder="My Expense" required="true"/>
22      <ui:inputNumber aura:id="amount" label="Amount" 
23                    class="form-control"
24                    value="{!v.newExpense.namespace__Amount__c}"
25                    placeholder="20.80" required="true"/>
26      <ui:inputText aura:id="client" label="Client" 
27                    class="form-control"
28                    value="{!v.newExpense.namespace__Client__c}"
29                    placeholder="ABC Co."/>
30      <ui:inputDateTime aura:id="expdate" label="Expense Date" 
31                    class="form-control"
32                    value="{!v.newExpense.namespace__Date__c}"
33                    displayDatePicker="true"/>
34      <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
35                    value="{!v.newExpense.namespace__Reimbursed__c}"/>
36      <ui:button label="Submit" press="{!c.createExpense}"/>
37    </fieldset>
38  </form>
39
40  <!-- Expense Counters -->
41  <div class="row">
42    <!-- Change the counter color to red if total amount is more than 100 -->
43    <div class="{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-success'}">
44      <h3>Total Expenses</h3>$<ui:outputNumber value="{!v.total}" format=".00"/>
45    </div>
46    <div class="alert alert-success">
47      <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/>
48    </div>
49  </div>
50
51  <!-- Display expense records -->
52  <div class="row">
53    <aura:iteration items="{!v.expenses}" var="expense">
54        <p>{!expense.name}, {!expense.namespace__Client__c}, {!expense.namespace__Amount__c}, {!expense.namespace__Date__c}, {!expense.namespace__Reimbursed__c}</p>
55    </aura:iteration>
56    </div>
57</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.namespace_Client__c} represents data binding to the client field in the expense object.

    The default value for newExpense of type namespace__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");.THIS .uiInputCheckbox {
2    margin-left: 20px;
3}
4
5.THIS .uiButton {
6    margin-bottom: 20px;
7}
8
9.THIS .row {
10    width: 100%;
11    margin-bottom: 20px;
12}
13
14.THIS .blue {
15    background: #d9edf2;
16}
17
18.THIS .white {
19    background: #ffffff;
20}
21
22.THIS .uiInput.uiInputDateTime {
23    position: relative;
24}
25
26.THIS .uiInputDateTime+.datePicker-openIcon {
27    position: absolute;
28    display: inline-block;
29    left: 90%;
30    top: 25px;
31    background-position: center;
32    padding: 2% 5%;
33}
34
35.THIS .uiInputDefaultError li {
36  list-style: none;
37}

    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.
    Replace namespace with the name of your registered namespace.
    1swfobject.registerObject("clippy.codeblock-2", "9");<aura:application>
2     <link href='/resource/bootstrap/' rel="stylesheet"/>
3    <div class="container">
4        <h1>Add Expense</h1>
5
6        <!-- Add the component here -->
7        <namespace:form />
8    </div>
9</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 correponds to a text field. The aura namespace includes many components for core framework functionality, like aura:iteration as used in this step.