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
- Enable Lightning Components in your new Developer Org: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save.
- Click this link to install the components using an unmanaged package.
- 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.