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 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.
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. 
    1swfobject.registerObject("clippy.codeblock-0", "9");@AuraEnabled
2public static Expense__c saveExpense(Expense__c expense) {
3    upsert expense;
4    return expense;
5}
    The saveExpenses() method enables you to insert or update an expense record using the upsert operation.

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

    Note

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

    createExpense validates the name and amount fields using default error handling, which appends an error message represented by ui:inputDefaultError. The controller invalidates the input value using setValid(false) and clears any errors using setValid(true). 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. Add these helper functions after the updateTotal function. 
    1swfobject.registerObject("clippy.codeblock-2", "9");createExpense: 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},
9  upsertExpense : 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    }
19

    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. Test your app by entering 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 Debugging 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.