Lightning Components Developer's Guide

Introducing 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
Working with UI Components
Using Expressions
Supporting Accessibility
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

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

Summary

You created several components with controllers and events that interact with your expense records. The expense tracker app performs three distinct tasks: load the expense data and counters on app initialization, take in user input to create a new record and update the view, and handle user interactions by communicating relevant component data via events.

The app contains three main data flows to handle app initialization, data input, and data changes.

When form.cmp is initialized, the init handler triggers the doInit client-side controller, which calls the getExpenses helper function. getExpenses calls the getExpenses server-side controller to load the expenses. The callback sets the expenses data on the v.expenses attribute and calls updateTotal to update the counters.

Clicking the Submit button triggers the createExpense client-side controller. After field validation, the createExpense helper function is run, in which the upsertExpense helper function calls the saveExpense server-side controller to save the record. The callback pushes the new expense to the list of expenses and updates the attribute v.expenses in form.cmp, which in turn updates the expenses in expenseList.cmp. Finally, the helper calls updateTotal to update the counters represented by the v.total and v.exp attributes.

expenseList.cmp displays the list of expenses. When the Reimbursed? checkbox is selected or deselected, the click event triggers the update client-side controller. The updateExpenseItem event is fired with the relevant expense passed in as a parameter. form.cmp handles the event, triggering the updateEvent client-side controller. This controller action then calls the upsertExpense helper function, which calls the saveExpense server-side controller to save the relevant record.