Develop the Map Component

“Location, location, location” as the saying goes, is the number one rule in real estate. In this step you play the role of Chan Ming Lewis, a Salesforce developer at DreamHouse Realty, who is developing a new Aura component to visualize properties on a map so the realtors and customers can see where the properties are located. Chan builds and tests his work in his own Git branch and scratch org before pushing his commits to GitHub.

At the end of this step Chan’s Property record page should look like this:

Map component on property record page

Create a Feature Branch

Branches allow developers to work on their own features without affecting the main codeline and to be isolated from changes going on elsewhere.

  1. In your sfdx-chan working directory, switch to a new Git branch named feature-chan-map.
    git checkout -b feature-chan-map
    You should see output like Switched to new branch 'feature-chan-map'.

Add New Files to the Project

Next, develop your new feature. To speed up the process, let’s copy the finished Aura component code from the exercise folder.

  1. Create if doesn't exist an aurafolder where you’ll copy the provided Aura components to.
    mkdir force-app/main/default/aura
  2. Locate the exercise folder that you downloaded and unzipped when you installed the DreamHouse sample app.
  3. Copy the RecordMap component in the feature-chan-map exercise folder to your Salesforce DX project folder at sfdx-chan/force-app/main/default/aura.
    Copying exercise folders to Chan’s project folder

Push Metadata to Scratch Org



Your Dev Hub org edition determines how many scratch orgs you can create daily, and how many can be active at a given point. In this step, you'll create a new scratch org. You can delete an existing scratch org to free up an allocation with the sfdx force:org:delete command.

A scratch org is a dedicated, configurable, and short-term Salesforce environment. Since they are quick to create and use, they are great for developing and experimenting with new features.

  1. Create a new scratch org with our definition file and set it as the default org for CLI commands in this project.
    sfdx force:org:create --setdefaultusername --setalias sfdx-chan --definitionfile config/project-scratch-def.json
  2. Push local source metadata to scratch org.
    sfdx force:source:push
    Note that without specifying the --targetusername | -u flag then the CLI uses the default scratch org for the project.

Assign Permission Set and Import Sample Data

Since we are using a new scratch org, we need to grant our user access to the DreamHouse app and import some sample data to test with.

  1. Assign the default scratch org user access to the DreamHouse app.
    sfdx force:user:permset:assign --permsetname DreamHouse
  2. Import the sample data from the assets folder.
    sfdx force:data:tree:import -f assets/data/Broker__c-Property__c.json

Configure the Property Record Page

Next, use the Lightning App Builder to add the new map component to the Property record page.

  1. Open Chan’s scratch org.
    sfdx force:org:open
  2. Click App Launcher to open the App Launcher, then click DreamHouse.
  3. Click Properties then click the property name of any record in the list. If you do not see any property records, try changing the selected list view and ensuring you have imported the sample data mentioned above.
  4. Click Setup Menu then choose Edit Page.
  5. Drag the Record Map component onto the page canvas and drop it in the right column, just above the Activity and Chatter tabs.
  6. Click Save, then click Back. Refresh the page and you should now see the map component showing the property record’s location.


Make sure you place the Record Map component exactly where instructed. This reduces the chances of a conflict when you merge the feature branches in a later step. Merge conflicts can occur when people make different changes to the same line of the same file. For example, a merge conflict will occur in the Property_Record_Page.flexipage-meta.xml file if Chan’s Map component and Maria’s Gallery component are placed in the same location on the Property record page.

Run Tests to Validate Changes

We’re done making changes and it’s time to test. We’re focusing only on Apex tests in this project, but refer to Getting Started with the Lightning Testing Service in the Resources section of this step to learn more about testing Lightning components.

  1. Run Apex tests and display code coverage results.
    sfdx force:apex:test:run --codecoverage --resultformat human --wait 2

Pull Metadata from Scratch Org

Next, sync your Salesforce DX project with the changes you made directly in the scratch org.

  1. Pull metadata from scratch org to local project.
    sfdx force:source:pull -f

Commit Changes to Source Control

Finally, add the modified project files to source control and upload the feature branch to GitHub. Later in this project the DreamHouse Realty developers use a GitHub pull request to review the proposed changes and decide whether to include the feature in the next release.

  1. Add all modified files in the project to be tracked by Git (any files listed in .gitignorefile will be ignored).
    git add .
  2. Commit the added files as a snapshot to the project’s version history.
    git commit --message "Added map component to property page"
  3. Push the local feature branch to GitHub.
    git push -u origin feature-chan-map

We won't check any of your setup. Click Verify Step to go to the next step in the project.


Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities