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:
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.
- In your sfdx-chan working directory, switch to a new Git branch named feature-chan-map.
git checkout -b feature-chan-mapYou 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.
- Create if doesn't exist an aurafolder where you’ll copy the provided Aura components to.
- Locate the exercise folder that you downloaded and unzipped when you installed the DreamHouse sample app.
- 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.
Push Metadata to Scratch Org
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.
- 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
- Push local source metadata to scratch org.
sfdx force:source:pushNote that without specifying the
--targetusername | -uflag 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.
- Assign the default scratch org user access to the DreamHouse app.
sfdx force:user:permset:assign --permsetname DreamHouse
- 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.
- Open Chan’s scratch org.
- Click to open the App Launcher, then click DreamHouse.
- 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.
- Click then choose Edit Page.
- Drag the Record Map component onto the page canvas and drop it in the right column, just above the Activity and Chatter tabs.
- Click Save, then click Back. Refresh the page and you should now see the map component showing the property record’s location.
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.
- 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.
- 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.
- Add all modified files in the project to be tracked by Git (any files listed in
.gitignorefile will be ignored).
git add .
- Commit the added files as a snapshot to the project’s version history.
git commit --message "Added map component to property page"
- 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.