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 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 the Lightning Design System CSS framework, which provides a look and feel that’s consistent with Lightning Experience.

  1. Go to https://www.lightningdesignsystem.com/resources/downloads and download Version 0.9.0 of the Design System Unmanaged Package. At the prompt, install the unmanaged package in your organization. Your installation is successful when you see the SLDS090 package on the Installed Packages page.
  2. 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.
  3. Create a new Lightning app. In the Developer Console, click File | New | Lightning Application.
  4. Enter expenseTracker for the Name field in the New Lightning Bundle popup window. This creates a new app, expenseTracker.app.
  5. In the source code editor, enter this code.
    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. The CSS classes are provided by the Lightning Design System CSS framework.
  6. 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.