Belgium has a long tradition of beer making. According to Wikipedia, the country counts over 1700 beers of various styles, including Trappist, Abbey, Saisons, Lambic, Gueuze, Fruit Beers, White, Double, Triple, Quadruple, etc.

As I was experimenting with the new Lightning Components, I thought it would be fun to build an app that lets users search and explore this list in different ways: by name, style, brewery, alcohol content, etc. I learned a ton: not only building the application, but also using it!

Check out the end result in this video:

https://www.youtube.com/watch?v=ZL3F_uYm__s
In this post, I’ll show how the application works and how to install it in your own org.
 

Architecture Highlights

1. The data is imported in two custom objects: breweries and beers.
2. The client side of the explorer is built as a Lightning Application that assembles different Lightning Components: SearchBar, Paginator, BeerList, and BeerListItem.
3. These components communicate using Lightning events.
4. The data is provided by an “Aura enabled” Apex controller.

Installing the Application in Your Own Org

Step 1: Install the Application

1. Sign up for a new free developer environment here.
2. Enable Lightning Components in your new Developer Org: In Setup, click Develop | Lightning Components, check the Enable Lightning Components checkbox, and click Save.
3. Click this link to install the application using an unmanaged package, then click Continue, Next, Next, Install.

Step 2: Import Data

You currently have to disable Lightning Components for the Data Import Wizard to work correctly when importing csv files. To disable Lightning Components: In Setup, click Develop | Lightning Components, uncheck the Enable Lightning Components checkbox, and click Save.

Import Breweries

1. Save breweries.csv on your local file system
2. In Salesforce’s Setup Mode, select Administer | Data Management| Data Import Wizard
3. Click Launch Wizard
4. Click the Custom objects tab, select Breweries
5. Click Add New Records
6. Drag breweries.csv to the upload area, and select Unicode (UTF8)
7. Click Next
8. Click Map for the Id column
9. Map the CSV’s Id field to the Custom Object BreweryId field
10. Click Next, and Start Import

Import Beers

1. Save beers.csv on your local file system
2. In Salesforce’s Setup, select Administer | Data Management | Data Import Wizard
3. Click Launch Wizard
4. Click the Custom objects tab, select Beers
5. Click Add New Records
6. For Which Brewery field in your file specifies the Master/Detail relationship?, select Extenal ID.
7. Drag beers.csv to the upload area, and select Unicode (UTF8)
8. Click Next
9. Click Map for the brewery_id column
10. Map the CSV’s brewery_id field to the Custom Object’s Brewery field
11. Click Next

Step 3: Explore the Application

1. Re-enable Lightning Components: In Setup, click Develop | Lightning Components, check the Enable Lightning Components checkbox, and click Save
2. Open the Developer Console
3. Click File | Open Lightning Resources in the menu, select Explorer | APPLICATION in the dialog, and click the Open Selected button
4. Click Preview in the code editor (upper right corner) for the Explorer application

Source Code

The source code for the application is available in this GitHub repository.
 

Resources

If you’d like to get started building your own Lightning Apps and Components, take a look at the new Lightning Components module in Trailhead. You’ll earn a new badge, and be able to show off your Lightning skills.
 
Follow @ccoenraets on Twitter