SALESFORCE LIGHTNING COMPONENTS

Salesforce1 Lightning Overview

We’re in an increasingly multi-device world, so Salesforce created Lightning to make it easy to build responsive applications for any screen.

Lightning includes a number of exciting tools for developers, such as:  

1. Lightning components give you a client-server framework that accelerates development, as well as app performance, and is ideal for use with the Salesforce1 mobile app.
2. The Lightning App Builder empowers you to build apps visually, without code, quicker than ever before using off-the-shelf and custom-built Lightning components

Using these technologies, you can seamlessly customize and easily deploy new apps to mobile devices running Salesforce1. In fact, the Salesforce1 mobile app itself was built with Lightning components.

What is the Lightning Component Framework? 

The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. It’s a modern framework for building single-page applications engineered for growth.

The Lightning Component framework is built on the open-source Aura framework available at http://github.com/forcedotcom/aura. You can build general-purpose web apps hosted on your own server using the Aura framework, which also provides features and components that may not be available in the Lightning Component framework. Many of the sample code here uses out-of-the-box components from the Aura framework, such as aura:iteration and ui:button. The aura namespace contains components to simplify your app logic, and the ui namespace contains components for user interface elements like buttons and input fields. The force namespace contains components specific to Salesforce.

Components

Components are the self-contained and reusable units of an app. They represent a reusable section of the UI, and can range in granularity from a single line of text to an entire app.

Where You Can Use Lightning Components

Salesforce provides several ways that you can use Lightning components.

• Create a Standalone App.
• Create Lightning Components for Salesforce1.
• Customize Salesforce1 with Lightning Extensions (Pilot).

Lightning Components Quick Start

Step 1: Sign up for a Developer Edition Environment

• Go to: http://bit.ly/lightningcomponents

Step 2: Create a Namespace

Every Lightning component is prefixed by a namespace, so the first thing you need to do is register for a unique namespace. 

• Click Setup | Create | Packages and then click Edit. 
• Click Continue. 
• Type a namespace and then click Check Availability to see if it’s unique. 
• Click Review My Selections and then Save.

Step 3: Enable Lightning Components

• From Setup, click Develop | Lightning Components. 
• Select the Enable Lightning Components checkbox and click Save.

Step 4: Now, Create Your First Lightning App

In your developer console, select File > New > Lightning Application.

You will then see a standard New Lightning Bundle dialog. These settings control how you will access the app and how it will be documented in AuraDocs.

You will now see a basic editing screen. Pay attetion to the elements on the right side of your console. These is where you select the type of code you want to add to your app. Also of note is the “Preview” button at the top. You will use this to preview your app.

Next, in the Application element, paste this sample code.

<aura:application>
    <h1>Hello Blog</h1>
</aura:application>

Great! You have created your first Lightning Application. When you click the preview button, you will see this:

Next, let’s style it. Select the “Style” element on the right, and replace the default with this CSS.

.THIS {
 color: red;
}

When you preview again – and you might have noticed that the preview automatically reloaded in your browser – you’ll see this. 
To see more how CSS works with Lightning components go to this link: https://developer.salesforce.com/trailhead/lightning_components/lightning_components_creating

Create a Sample Component, Add to the Sample App

Now, instead of a Lightning Application, let’s create a Lightning Component. In the Developer Console, click File > New > New Lightning Component. The prompt for a new Lightning Bundle looks pretty much the same:

And it results is a very similar empty document, except this time it’s a component.

Note that you again have an element selector on the right, this time without a Preview button. Start creating this component by pasting the following into the component element.

<aura:component >
 <h1>Component 1 - Hello!</h1>
</aura:component>

Create a Lightning Component Tab for the new Component

Before we can create a tab for the new component, we need to flag it as “appHostable”. Edit it to add that attribute to your component, and be sure to save when you’re done.

<aura:component implements="force:appHostable">
    <h1>Component 1 - Hello!</h1>
</aura:component>

Next, using the main Setup screen instead of your Developer Console, navigate to Setup > Create > Tabs, and click the New button next to Lightning Component Tabs.

Next, complete the form. If you don’t see the component in your drop down, that means the component doesn’t implement appHostable.

Next is the standard Add to Profile dialog. Since this is a demo, go ahead and leave Default On for everyone. Scroll to the bottom and click on Save.

Add to your Salesforce1 Mobile Navigation

Getting the Lightning Component Tab on your Salesforce1 mobile app is also easy. On the main setup screen, navigate to Setup > Mobile Administration > Mobile Navigation.

Move the app you created from the left to the right to put it on Salesforce1, and then move it from the bottom to the top in the right menu to make it dead easy to find. Click Save.

Next, login to Salesforce1 on your mobile device using your new Developer Edition credentials. Refresh the menu and you’ll see the new tab you created at the top.