A couple of months ago, I shared the Belgian Beer Explorer, a sample application built with Lightning Components. Even though the use case is “niche”, the response has been great and I’ve seen some developers using it as a starting point for their own app. Since I first released the application, a number of new features have become available in Lightning Components. So I decided to create a new version of the application, with a more neutral use case (a real estate app), and some new Lightning features.
New in this version:
- The app no longer uses Twitter Bootstrap for styling and layouts. Instead, component-specific styles are encapsulated within the different components.
- CSS Flexboxes are used extensively throughout the application to provide responsive and dynamic layouts.
- The application now uses a two-way slider to select a price range.
- The slider is implemented using nouislider, a popular open source range slider implemented as a jQuery plugin. This is an example of using the <ltng:require> component to load external scripts and style sheets. Specifically, the HousePriceSlider component uses <ltng:require> to load jQuery, and the nouislider JavaScript CSS an JavaScript files. jQuery isn’t used anywhere else in the application.
Check out the end result in this video:
Installation Instructions
Follow the steps below to install the application in your own org:
Step 1: Install the Application
- Sign up for a new free developer environment here.
- 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 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.
- Save House__c.csv on your local file system
- In Salesforce’s Setup Mode, select Administer > Data Management > Data Import Wizard
- Click Launch Wizard
- Click the Custom objects tab and select Houses
- Click Add New Records
- Drag House__c.csv to the upload area
- Click Next, Next, and Start Import
Step 3: Explore the Application
- Re-enable Lightning Components: In Setup, click Develop > Lightning Components, check the Enable Lightning Components checkbox, and click Save
- Open the Developer Console
- Click File > Open Lightning Resources in the menu, select HouseExplorerApp > APPLICATION in the dialog, and click the Open Selected button
- Click Preview in the code editor (upper right corner)
Phone Version
The application’s layout and navigation work great on traditional computers and tablets. Even though the application is responsive, the navigation is not ideal on smaller screens. Specifically the optimal way to navigate through a long list of items can be different on a traditional computer and on a phone. In my next post, I’ll share a phone-optimized version of the application using a Carousel component to go through the list of houses.
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