Lightning Components Developer Guide

What is the Lightning Component Framework?
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 and Lightning Experience
Creating Components
Using Components
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

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

Step 5: Enable Input for New Expenses

When you enter text into the form and press Submit, you want to insert a new expense record. This action is wired up to the button component via the press attribute.

The following flowchart shows the flow of data in your app when you create a new expense. The data is captured when you click the Submit button in the component form.cmp, processed by your JavaScript code and sent to the server-side controller to be saved as a record. Data from the records is displayed in the nested component you created in the previous step.Data is captured by the form and processed by client- and server-side controllers.

First, update the Apex controller with a new method that inserts or updates the records.
  1. In the ExpenseController class, enter this code below the getExpenses() method. 
    1@AuraEnabled
2public static Expense__c saveExpense(Expense__c expense) {
3
4    // Perform isUpdateable() check here
5    upsert expense;
6    return expense;
7}
    The saveExpense() method enables you to insert or update an expense record using the upsert operation.

    Fore more information about the upsert operation, see the Apex Developer Guide.

    Note

  2. Create the client-side controller action to create a new expense record when the Submit button is pressed. In formController.js, add this code after the doInit action. 
    1createExpense : function(component, event, helper) {
2    var amtField = component.find("amount");
3    var amt = amtField.get("v.value");
4    if (isNaN(amt)||amt==''){
5        amtField.set("v.errors", [{message:"Enter an expense amount."}]);
6    }
7    else {
8        amtField.set("v.errors", null);
9        var newExpense = component.get("v.newExpense");
10        helper.createExpense(component, newExpense);
11    }
12},//Delimiter for future code

    createExpense validates the amount field using the default error handling of input components. If the validation fails, we set an error message in the errors attribute of the input component. For more information on field validation, see Validating Fields.

    Notice that you’re passing in the arguments to a helper function helper.createExpense(), which then triggers the Apex class saveExpense.

    Recall that you specified the aura:id attributes in Step 2: Create A Component for User Input. aura:id enables you to find the component by name using the syntax component.find("amount") within the scope of this component and its controller.

    Note

  3. Create the helper function to handle the record creation. In formHelper.js, add these helper functions after the updateTotal function. 
    1createExpense: function(component, expense) {
2    this.upsertExpense(component, expense, function(a) {
3        var expenses = component.get("v.expenses");
4        expenses.push(a.getReturnValue());
5        component.set("v.expenses", expenses);
6        this.updateTotal(component);
7      });
8},
9upsertExpense : function(component, expense, callback) {
10    var action = component.get("c.saveExpense");
11    action.setParams({ 
12        "expense": expense
13    });
14    if (callback) {
15      action.setCallback(this, callback);
16    }
17    $A.enqueueAction(action);
18}

    createExpense calls upsertExpense, which defines an instance of the saveExpense server-side action and sets the expense object as a parameter. The callback is executed after the server-side action returns, which updates the records, view, and counters. $A.enqueueAction(action) adds the server-side action to the queue of actions to be executed.

    Different possible action states are available and you can customize their behaviors in your callback. For more information on action callbacks, see Calling a Server-Side Action.

    Note

  4. Save your changes and reload your browser.
  5. Test your app by entering a new expense record with field values: Breakfast, 10, ABC Co., Apr 30, 2014 9:00:00 AM. For the date field, you can also use the date picker to set a date and time value. Click the Submit button. The record is added to both your component view and records, and the counters are updated.

    To debug your Apex code, use the Logs tab in the Developer Console. For example, if you don’t have input validation for the date time field and entered an invalid date time format, you might get an INVALID_TYPE_ON_FIELD_IN_RECORD exception, which is listed both on the Logs tab in the Developer Console and in the response header on your browser. Otherwise, you might see an Apex error displayed in your browser. For more information on debugging your JavaScript code, see Debug JavaScript Code.

    Note

Congratulations! You have successfully created a simple expense tracker app that includes several components, client- and server-side controllers, and helper functions. Your app now accepts user input, which updates the view and database. The counters are also dynamically updated as you enter new user input. The next step shows you how to add a layer of interactivity using events.