https://youtu.be/r1VKQvU8MLw

Lightning Components and App Builder offer new and exciting capabilities for application composition on the platform. For example, you can now edit a page layout in App Builder and add Lightning Components to provide additional information or tools to the page (pilot feature in Winter 16). For these components to be useful, they need to be aware of the context. In other words, they should know which record the page is currently showing.

Fortunately, the Lightning Component Framework makes it really easy to inject the current context into a component. All you need to do is:

1. Implement the force:hasRecordId interface. For example:
   • The force:appHostable interface indicates the component can be hosted in the Salesforce1 Mobile app
   • The flexipage:availableForAllPageTypes interface indicates the component can be used in App Builder
   • The force:hasRecordId interface indicates the current record Id should be injected in the component’s recordId attribute
2. Define a recordId attribute as follows:

When the component is instantiated on the page, the current record Id is automatically injected in the recordId attribute. You can then make calls to the server passing the recordId as a parameter to retrieve or save data for that specific record.

As an example, I modified the Weather component I shared a few months ago. You can drop the new version in the Account page layout and it will automatically show the weather for the current account based on the account’s billing zip code.

Source Code

Component

Client-Side Controller

Component Style

Component Design

Apex Controller

Installation Instructions

Step 1: Defining the Weather Component in your org

1. Create the different parts of the Weather component as defined above: component, controller, style, design.
2. Create the WeatherController Apex class as defined above.
3. Sign up for a free Weather Underground API key.
4. In the WeatherController class, replace YOUR_API_KEY with your actual Weather Underground API key, and save the file.
5. In Setup, select Administer > Security Controls > Remote Site Settings, click New Remote Site, specify WeatherUnderground as the Remote Site Name and http://api.wunderground.com as the Remote Site URL. Click Save.

Step 2: Enable Lightning Components

1. Define a domain (Setup > My Domain) to enable Lightning Components. More information here. Don’t forget to go back to Setup > My Domain after the domain has been activated, and click the Deploy for All Users button.
2. In Setup, select Lightning App Builder, check the Enable App Builder for Lightning Experience checkbox, and click Save.
   
3. In Setup, click Lightning Experience at the top of the left navigation, and switch the toggle to enable the Lightning Experience.
   
4. Login to your org again.
5. In the header, click the down arrow next to your name, and select Switch to Lightning Experience.
   
6. Follow the instructions in the video to use the Weather component in App Builder. Make sure you use an account that has a Billing Zip Code specified.