DreamHouse Sample Application

Dreamhouse is a sample application for the real estate business built on the Salesforce platform. It allows brokers to manage their properties and customers to find their dream house.

Table of contents

• Installation instructions
  • Installing DreamHouse using Salesforce DX
  • Installing DreamHouse using an unlocked package
• Code highlights
• Additional resources

Installation Instructions

There are two ways to install DreamHouse:

• Using Salesforce DX
• Using an unlocked package

Installing DreamHouse using Salesforce DX

This is the recommended installation option for developers who want to experience the app and the code.

1. Install Salesforce DX. Enable the Dev Hub in your org or sign up for a Dev Hub trial org and install the Salesforce DX CLI. Follow the instructions in the Salesforce DX Setup Guide or in the App Development with Salesforce DX Trailhead module.

2. Clone the dreamhouse-sfdx repository:

   git clone https://github.com/dreamhouseapp/dreamhouse-sfdx
   cd dreamhouse-sfdx
   

3. Create a scratch org and provide it with an alias of your choice (dh in the command below):

   sfdx force:org:create -s -f config/project-scratch-def.json -a dh
   

4. Push the app to your scratch org:

   sfdx force:source:push
   

5. Assign the dreamhouse permission set to the default user:

   sfdx force:user:permset:assign -n dreamhouse
   

6. Open the scratch org:

   sfdx force:org:open
   

7. Select DreamHouse in the App Launcher

8. Click the Data Import tab and click Initialize Sample Data

Installing DreamHouse using an unlocked package

This is the recommended option for non developers. Use this option if you want to experience the sample app but do not plan to modify the code.

1. Sign up for a developer edition.

2. Enable My Domain. Follow the instructions to enable My Domain here.

3. Click this link to install the DreamHouse unlocked package into your developer edition org.

4. Select Install for All Users. When prompted, make sure you grant access to the external sites (api.lifx.com, dreamhouzz-push-server.herokuapp.com, and hooks.slack.com).

5. Select DreamHouse in the App Launcher.

6. Click the Data Import tab and click Initialize Sample Data.

Code highlights

Lightning components

DreamHouse features a large number of Lightning Components to enhance the user experience. Lightning Components are used on the Property record page, on an app pages (Property Finder and Property Explorer), in the utility bar, and as quick actions.

Installing a Lightning component as a quick action can be a great alternative to adding the component directly to the 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 DreamHouse, the SmartHome component is installed as a quick action on the Property record page.

The utility bar is a great place to host components you always want at your fingertips. MortgageCalculator is a great example.

Base Lightning components

Base Lightning Components are a set of powerful UI components available in the Lightning Component Framework. The DreamHouse custom components use many Base Lightning Components as building blocks. For example, lightning:card, lightning:button, and lightning:layout are used throughout the application. PropertyCarousel, which allows you to navigate through the pictures of a property and upload new pictures, is built using lightning:carousel and lightning:fileUpload. PropertySummary leverages lightning:formattedAddress and lightning:formattedNumber.

Lightning Data Service

Lightning Data Service allows you to manipulate (retrieve, create, update, delete) Salesforce records without writing server-side code (Apex). In DreamHouse, all the Lightning components that work with a single Property record use Lightning Data Service. Check out PropertySummary for an example.

Third-Party JavaScript libraries

You can use third-party JavaScript libraries in Lightning Components using ltng:require. For example:

• Map and PropertyListMap use the Leaflet library.
• PriceRange uses the nouislider library for its double slider.

Standard application events

Standard application events are available by default in the framework and are used to trigger high level actions. For example, in PropertySummary, force:navigateToSObject is used to navigate to the broker record page, and force:editRecord is used to edit a record in place.

Custom application events

Custom application events are used for communication between components in App Builder. For example, the PropertyFilterChange event is fired in the PropertyFilter component to notify other components that new filtering criteria have been selected.

Component events

Component events are used for finer-grained communication between components. For example, the PropertyPaginator component fires the pageNext and pagePrevious events to notify its parent (PropetyTileList) that the user requested the next or previous page.

Custom page templates

Custom page templates allow you to create ad hoc page layouts that admins can use in App Builder to create new pages. Custom page templates are implemented as Lightning Components. There are two custom page templates in Dreamhouse: PageTemplate_2_6_4 (used by the Property Finder page) and PageTemplate_2_7_3 (used by the Property Explorer page). They provide custom three column layouts using different relative widths for each column.

Reports and dashboards

Reports and dashboards are easy to create and look great in Lightning. Just to get things started, the DreamHouse app includes a few reports in the DreamHouse Reports folder (Days on Market, Properties by Broker, and Portfolio Health), and a dashboard in the DreamHouse Dashboard folder (My Dashboard).

Einstein Vision

The VisualSearchBox component leverages Einstein Vision to provide a visual search feature that allows you to find houses based on the picture of a house you like. Just select or drag a picture in the Visual search area of the property filters: Einstein Vision will recognize the type of house (colonial, victorian, or contemporary) and you will be presented with a list of houses matching that category. Follow the instructions below to enable visual search in the Property Finder and Property Explorer pages:

1. Get an Einstein Platform Services account. Follow the instructions here.

2. In Salesforce, click the Files tab and upload einstein_platform.pem.

3. In Setup, type Custom in the Quick Find box and click the Custom Settings link.

4. Click the first New Button (at the top of the screen).

5. For Einstein Vision Email, specify the email address you used when you created your Einstein Platform Services account (step 1), and click Save.

6. In the DreamHouse app, click the Einstein Vision tab.

7. Click the Create Dataset button.

8. In the houses tile, click the Train button, the click the Models tab.

9. Click the Refresh Models button until the Progress column indicates 100%.

10. Copy the Model Id in your clipboard.

11. Click the Property Finder Tab, click the gear icon (upper right corner), and click Edit Page. Click the Filters component and paste the Model Id in the Einstein Model Id field in the right sidebar. Save the page.

12. Repeat the last step for the Property Explorer page.

You can now search houses by uploading (or dropping) a picture in the visual search box that is part of the Filters component on the Property Finder and Property Explorer pages.

Additional resources

DreamHouse has many more features not discussed here. For example, DreamHouse also demonstrates how to:

• Use the Salesforce 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

Head over to dreamhouseapp.io to learn more.