DreamHouse is a sample application that demonstrates how to build applications on the Salesforce platform. The new version of DreamHouse is packed with new Lightning features for admins and developers. In this article, we explore the new DreamHouse and Lightning features. Along the way, we’ll review Lightning development best practices.
The power of the Salesforce platform comes in part from all the things you can accomplish with clicks not code. The new version of DreamHouse has both new click and new code features. For developers, the best practice here is to learn what is available with clicks so you don’t reinvent the wheel with code. If you can’t wait to explore the new code features in DreamHouse, jump right in.
New click features
Path
New in Spring ’17, Path is now a standard component that allows you to visually display the steps in a process, highlight key fields, and provide guidance such as links, policy information, and tips to users at each step. The Path component is entirely configurable. In the new version of DreamHouse, we use the Path component on the Property record page to visualize the steps of the house-selling process. The PropertyStatus custom component we used in the previous version of DreamHouse is no longer needed.
Activity
Activity is another powerful standard component available in App Builder. In DreamHouse, we use it on the Property record page to allow brokers to log a call related to the property, schedule new events (such as an open house for the property), and enter new tasks related to the property. The events you schedule appear in your calendar (more on that later).
Calendar
You can visualize the events you schedule in the Lightning Calendar. The Calendar can also display data from any Salesforce object date field as a calendar item. In the DreamHouse sample app, brokers can now use the calendar to schedule and visualize events like open houses, appointments with potential homebuyers, closing dates, and so on.
Reports and dashboards
Reports and dashboards are easy to create and look great in Lightning. Just to get things started, the DreamHouse app now includes a few reports in the DreamHouse Reports folder:
- Days on Market
- Properties by Broker
- Portfolio Health
There is also a dashboard in the DreamHouse Dashboards folder:
New code features
New custom components
The new version of DreamHouse includes a series of new custom components:
Bot
The Bot custom component (always at your fingertips in the utility bar) allows you to ask questions formulated in natural language in an instant messaging-like interface. For example, you can ask: “3 bedrooms in Boston” or just “find house.” In the later case, the bot asks you a few questions to figure out which type of house you are looking for. Read this post to learn more about the bot custom component.
PropertyDaysOnMarketChart
The PropertyDaysOnMarketChart component provides a visual representation of the number of days a property has been on the market. It can be used on the Property record page, or on the Property Explorer or Command Center pages as part of a master/details interface.
SimilarProperties
SimilarPropeties shows a list of properties that either have the same number of bedrooms or are in the same price range. The component has a design property that lets an admin select (in App Builder) which comparison criteria to use. Like PropertyDaysOnMarketChart, SimilarProperties can be used on the Property record page, or as a detail in a master/details interface.
PriceRange
PriceRange is a generic component that provides a double slider interface to select a price range. The component can be used in App Builder and fires an Application Event to notify other components that the price range has changed. PriceRange is used to filter the list of properties in the Property Explorer page.
Storable actions
Storable actions make it easy to implement client-side data caching, which is one of the most impactful things you can do to improve the performance of your Lightning components. Check out this blog post for details. The DreamHouse sample app now uses storable actions in the following components:
- PropertyListDaysOnMarketChart
- PropertyTileList
- SimilarProperties
Lightning Data Service
The Lightning Data Service (currently in Developer Preview) offers another caching option for your Lightning components. Without the need for any Apex code, the Lightning Data Service automatically fetches records from the server when requested the first time, stores them in a highly efficient client cache, and shares them between all components that request them. This also ensures UI consistency across components: When the user changes the data in one component, the other components automatically show the new values. Unlike storable actions that can cache any type of response returned by an Apex method, the Lightning Data Service caches discrete Salesforce sObjects (record collections are on the road map). In DreamHouse, all the Lightning components that deal with a single Property record use the Lightning Data Service:
- DaysOnMarketEstimator
- MortgageCalculator
- PropertyDaysOnMarketChart
- PropertyMap
- PropertySummary
- SimilarProperties
- SmartHomeCard
- SmartPriceCalculator
Third-party libraries
Before you decide to use a third-party library in a Lightning component, make sure you really need it. DOM manipulation libraries and UI libraries in particular often aren’t needed when working with a framework like the Lightning Component Framework. Read this blog post for details. The DreamHouse sample application uses a limited number of JavaScript libraries:
- Leaflet is used in the Map component.
- Countup is used in the SmartPriceCalculator and DaysOnMarketEstimator components.
- noUISlider is used in the PriceRange component.
These libraries are small and don’t have dependencies (in particular, no jQuery dependency). They are loaded using the new $Resource syntax to require JavaScript libraries and CSS style sheets. For example:
Standard application events
Standard application events are application events that are available by default in the framework. They allow your components to communicate with Lightning Experience, the Salesforce1 app, or other custom components. DreamHouse uses a number of standard application events. For example:
- force:navigateToSObject is used in the PropertyTile component to ask the framework to navigate to the specified record. Use this approach instead of linking directly to specific URL fragments, which is not supported (URL fragments are subject to change).
- force:editRecord is used in the PropertySummary component to provide a dialog to edit a record “in place.”
- ltng:selectSObject is used in the PropertyTile component to notify other components that a new record has been selected. Other components like PropertySummary and PropertyMap listen to that event to display data for the selected record. This event is often used to implement master/details interfaces like in the Property Explorer and Command Center pages.
Custom application events
Limit the use of application events to coarse-grained application-level communication, such as communication between components added to pages with App Builder. For example, in DreamHouse:
- The MortgageChange event is fired in MortgageCalculator to notify other components that the mortgage parameters (principal, term, rate) have changed. If you add the MortgageAmortizationChart component to the page, it automatically updates to provide a chart representation of the mortgage amortization.
- The RangeChange event is fired in the PriceRange component to notify other components that the user selected a new price range.
Component events
Use component events for finer-grained communication between components. For example, in DreamHouse, the PropertyPaginator component fires the pageNext and pagePrevious events to notify its parent (PropetyTileList) that the user requested the next or previous page.
PropetyTileList (parent):
PropertyPaginator (child):
Lightning actions
Lightning actions are quick or global actions implemented with a Lightning component. An action can be a great alternative to adding a component to a page layout because the component instantiation is deferred until the action button is clicked (lazy instantiation). Installing less frequently used components as quick or global actions can contribute to a faster page loading time, and a streamlined user interface. In the DreamHouse application, the SmartHome component is used as a quick action on the Property record page.
Utility bar
Lightning components can also be used in the utility bar. Utility bar components are always at your fingertips. In the DreamHouse app, there are two components in the utility bar:
- Bot
- MortgageCalculator
Base components
DreamHouse custom components are built using the Base Lightning Components that provide the building blocks for data entry, layout, and formatting capabilities. For example:
- Data input: <lightning:input> and <lightning:select> are used to capture data in components like MortgageCalculator and Bot. In Bot, <lightning:input type=”file”> is used to support file selection, including through drag-and-drop in a drop zone.
- Layout: <lightning:card> is used as the container for many components. <lightning:layout> and <lightning:layoutitem> are used to lay out components using a responsive grid (see PropertyTileList, Bot, and PropertyDaysOnMarketChart for examples).
- Formatting: <lightning:formattedNumber> is used to display formatted numbers in many components like PropertySummary and PropertyTile.
Unbound expressions
Two-way data binding can be expensive because of the entanglement it creates between the model (attributes) and the view. With two-way data binding, the model updates the view and the view updates the model. In nontrivial applications, this can lead to a spiral of event handlers being called and views being rerendered. Spring ’17 introduces support for unbound expressions. The general guideline is to avoid two-way data binding {! } where possible, and use unbound expressions {# } instead. We have started using unbound expressions in DreamHouse. Take a look at PropertyTile and PropertyListDaysOnMarketChart for an example.
Installation instructions
DreamHouse takes less than 5 minutes to install! Complete installation instructions are available here.
Many more features
The DreamHouse sample application has many more features not discussed in this article, which focuses on what’s new in the latest version of DreamHouse. For example, DreamHouse also demonstrates how to:
- Use the Salesforce1 Mobile App
- Create a customer engagement mobile app with the Mobile SDK
- Automate processes with Process Builder, including sending push notification messages to the customer engagement app
- Integrate with Alexa, Slack, and Facebook Messenger
- Integrate with IoT devices like smart lights, smart thermostats, and smart locks
- Use Einstein vision to perform image recognition
Head over to dreamhouseapp.io to explore all the features available in the DreamHouse sample app.