Lightning Components Developer’s Guide

Getting Started
Introduction
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
Creating 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.
  1. Click Your Name | Developer Console to open the Developer Console.
  2. 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.
    1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:application>
18    <ltng:require styles="/resource/bootstrap"/>
19    <div class="bootstrap-sf1">
20        <div class="navbar navbar-inverse">
21	        <div class="navbar-header">
22	            <a href="#" class="navbar-brand">My Expenses</a>
23        	</div>
24         </div>
25    </div>
26</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.

    The filepath name bootstrap corresponds to the name of the static resource that you will upload next. Don’t worry about the missing resource errors in the browser console as we won’t be using those resources in this quick start.

    Note

  5. Download the Salesforce1 styled theme available at http://developer.salesforcefoundation.org/bootstrap-sf1/ and upload the bootstrap-namespaced.min.css file as a static resource. This file is located in the/dist/css directory. This CSS resource includes the .bootstrap-sf1 selector, which prevents styling conflict with other namespaces.
    1. From Setup, click Developer | Static Resources. Click New.
    2. Enter bootstrap in the Name field. Click the Choose File button and select the bootstrap-namespaced.min.css file. We’ll not be uploading the other files to simplify this tutorial.
    3. Click Save.
  6. Save your changes and click Preview in the sidebar to preview your app. Alternatively, navigate to https://<mySalesforceInstance>.lightning.force.com/<namespace>/expenseTracker.app, where <mySalesforceInstance> is the name of the instance hosting your org; for example, na1. If you’re not using a namespace, your app is available at /c/expenseTracker.app.