Application Composition with Lightning Components and App Builder

The Lightning Component framework makes it easy for developers to build rich user interface components. Lightning App Builder makes it easy for anybody (developers and non-developers) to build beautiful and interactive applications by assembling standard and custom components in a point-and-click environment and without writing code.

In this article, I share two custom components that you can assemble in App Builder to build an interactive Hotel Locator application.

Watch the end result in this video:

Installation Instructions

Follow the steps below to install the HotelMap and HotelList components and create the application in your own Developer Org.

Step 1: Install the Components

  1. Enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
  2. Click this link to install the components using an unmanaged package.
  3. Add the Location and Picture URL fields to the Account’s default page layout

Step 2: Enter Sample Data

Click the Accounts tab in the Sales application and enter a couple of accounts with their location information. For example, enter the following hotels:

Marriott Marquis
Latitude: 37.785143
Longitude: -122.403405
Picture URL: https://s3-us-west-1.amazonaws.com/sfdc-demo/hotels/marriott.jpg
Billing Street: 780 Mission Street
Billing City: San Francisco
Billing State: CA

Hilton Union Square
Latitude: 37.786164
Longitude: -122.410137
Picture URL: https://s3-us-west-1.amazonaws.com/sfdc-demo/hotels/hilton.jpg
Billing Street: 5 Embarcadero Ctr
Billing City: San Francisco
Billing State: CA

Hyatt
Latitude: 37.794157
Longitude: -122.396311
Picture URL: https://s3-us-west-1.amazonaws.com/sfdc-demo/hotels/hyatt.jpg
Billing Street: 780 Mission Street
Billing City: San Francisco
Billing State: CA

Dream Boat
Latitude: 37.8046300
Longitude: -122.4014280
Picture URL: https://s3-us-west-1.amazonaws.com/sfdc-demo/hotels/dreamboat.jpg
Billing Street: Pier 27
Billing City: San Francisco
Billing State: CA

Step 3: Create the Application in App Builder

Follow along in the video to create the application in App Builder and deploy it to the Salesforce1 mobile app.

Leave your comments...

Application Composition with Lightning Components and App Builder