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
Fixing Performance Warnings
Reference
PDF

Newer Version Available

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

Step 1: Create A Static Mockup

Create a static mockup in a.app file, which is the entry point for your app. It can contain other components and HTML markup.

The following flowchart summarizes the data flow in the app. The app retrieves data from the records through a combination of client-side controller and helper functions, and an Apex controller, which you’ll create later in this quick start.

Loading the app triggers an init event.

This tutorial uses Lightning Design System styling, which provides a look and feel that’s consistent with Lightning Experience.

  1. Open the Developer Console.
    1. In Salesforce Classic, click Your Name | Developer Console.
    2. In Lightning Experience, click the quick access menu (Setup gear icon), and then Developer Console.
  2. Create a new Lightning app. In the Developer Console, click File | New | Lightning Application.
  3. Enter expenseTracker for the Name field in the New Lightning Bundle popup window. This creates a new app, expenseTracker.app.
  4. In the source code editor, enter this code.
    1<aura:application extends="force:slds">
2    <div class="slds">
3        <div class="slds-page-header">
4          <div class="slds-grid">
5            <div class="slds-col slds-has-flexi-truncate">
6              <p class="slds-text-heading--label">Expenses</p>
7              <div class="slds-grid">
8                <div class="slds-grid slds-type-focus slds-no-space">
9                  <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1>
10                </div>
11              </div>
12            </div>
13          </div>
14        </div>
15    </div>
16</aura:application>
    An application is a top-level component and the main entry point to your components. It can include components and HTML markup, such as <div> and <header> tags. Your app automatically gets Lightning Design System styles if it extends force:slds.
  5. Save your changes and click Preview in the sidebar to preview your app. Alternatively, navigate to https://<myDomain>.lightning.force.com/<namespace>/expenseTracker.app, where <myDomain> is the name of your custom Salesforce domain. If you’re not using a namespace, your app is available at /c/expenseTracker.app.
    You should see the header My Expenses.