Dig into the Sample App Components

In this final step, you take a look at some highlights from the sample app code.

Property Explorer Code Highlights

Let’s start with the Property Explorer page. In this page, there are four Lightning web components that are exposed to the Lightning App Builder: propertyFilter, propertyTileList, propertySummary, and propertyMap.

The components use the Lightning Message Service (LMS) to communicate with each other. Each component sends or receives messages that are triggered when the user interacts with the components.

• When property filters change, propertyFilter fires a FiltersChange message that updates the property list accordingly.
  
• When a property from the list is selected, propertyTileList fires a PropertySelected message that updates the propertySummary and the propertyMap components with the property information.
  

The Lightning Message Service facilitates communication among Lightning web components, Aura components and Visualforce pages in different hierarchies of the DOM (not demonstrated in Dreamhouse).

Property Filter Component

The propertyFilter component uses the lightning-input and lightning-slider base components to get user inputs. Whenever a filter value changes, propertyFilter publishes a FiltersChange message with the current filter values:

publish(this.messageContext, FILTERSCHANGEMC, filters);

This message is handled by the propertyTileList component.

As an exercise:

1. Return to Visual Studio Code.
   
2. Open the force-app/main/default/lwc/propertyFilter/propertyFilter.html file for editing.
   
3. Find the lightning-slider component that allows you to enter a price. Change its label attribute to "Max to Spend".
   
4. Save the file.
   
5. Deploy your changes to your org by pasting this command into the terminal, or by right-clicking the file and selecting SFDX: Deploy This Source to Org:
   

sf project deploy start --metadata LightningComponentBundle:propertyFilter

6. Refresh the Property Explorer page and notice the updated slider. You may need to flush the cache to see the change.
   

Property Tile List Component

The propertyTileList component subscribes to the FiltersChange message as soon as it is added to the DOM. It uses a handleFilterChange function to keep track of the property filters.

connectedCallback() {
  this.subscription = subscribe(
      this.messageContext,
      FILTERSCHANGEMC,
      (message) => {
          this.handleFilterChange(message);
      }
  );
}

propertyTileList retrieves a list of properties using the applied filters and a page number in a getPagedPropertyList wire adapter:

import getPagedPropertyList from '@salesforce/apex/PropertyController.getPagedPropertyList';
export default class PropertyTileList extends LightningElement {
    @wire(getPagedPropertyList, {
        searchKey: '$searchKey',
        maxPrice: '$maxPrice',
        minBedrooms: '$minBedrooms',
        minBathrooms: '$minBathrooms',
        pageSize: '$pageSize',
        pageNumber: '$pageNumber'
    })
    properties;
}

The wire adapter is imported from the getPagedPropertyList method of the PropertyControllerApex class:

public with sharing class PropertyController {
    @AuraEnabled(cacheable=true)
    public static PagedResult getPagedPropertyList(
        String searchKey,
        Decimal maxPrice,
        Integer minBedrooms,
        Integer minBathrooms,
        Integer pageSize,
        Integer pageNumber
    ) {
        // Builds and runs query then,
        // returns property records in a PagedResult object
    }
}

This method runs a SOQL query that returns a filtered list of property records wrapped into a PagedResult object. The results are paginated in batches of properties as specified in the pageSize attribute. Note that the results are cached on the client.

Property Summary Component

The propertySummary component listens to the PropertySelected message and retrieves the selected property details by using the Lightning Data Service (LDS) getRecordwire adapter. 

import {getRecord} from 'lightning/uiRecordApi';
export default class PropertySummary extends LightningElement {
    @wire(getRecord, {
        recordId: '$recordId',
        fields: [NAME_FIELD, PICTURE_FIELD]
    })
    property;
}

Property Map Component

The propertyMap component also listens to the PropertySelected message and uses the LDS getRecord wire adapter to retrieve the property address. Note that two components in the page use the same LDS adapter, which means the record will be cached and synchronized between the components.

The map is drawn by using the lightning-mapbase component.

<template>
    <lightning-map
        map-markers={markers}
        zoom-level={zoomLevel}
    ></lightning-map>
</template>

Custom Page Template

Finally, let’s look at the Lightning page layout. Instead of using the out-of-the-box templates, we created a custom page template that gives you more control of how to distribute components on the page. For desktop, we divided the page into 12 equal parts and defined three regions that occupy 2 parts, 7 parts, and 3 parts of the full width of the page. For mobile, one region occupies the full width.

Property Finder Code Highlights

Just like in Property Explorer, the components use Lightning Message Service to communicate with each other. 

Property List Map Component

This component demonstrates how to seamless use third-party JavaScript libraries in Lightning web components. To render the map, it uses a library called leaflet.js.

What’s Next?

That’s it for your guided tour of the Dreamhouse sample app. But there’s much more that you can explore on your own. Take a look at all the pages and components, and feel free to modify them. Getting hands-on is the best way to learn.

Check out the other sample apps on the Trailhead Sample Gallery. Explore the source code, and learn from the other dedicated Quick Start projects. Find them in the Discover Trailhead Sample Apps trail.