Develop the Gallery Component

They say a picture is worth a thousand words. In this step you play the role of Maria Garza, a Salesforce developer at DreamHouse Realty, who is developing a new Aura component to display photos of the properties so the realtors and customers can see what the properties look like. Maria builds and tests her work in her own Git branch and scratch org before pushing her commits to GitHub.

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

Gallery component on property record page

Clone the GitHub Project

When using Git, to “clone” means to download a copy of an existing repository. Although you’re playing the role of a second developer you’re likely still using the same computer. To help keep things organized, we create a new folder for Maria’s work then clone the sfdx-project repository hosted on GitHub.

  1. Change your working directory to the parent folder of your sfdx-chan project folder.
    cd ..
  2. Clone the sfdx-project GitHub repository as a new local folder named sfdx-maria. Make sure to replace YOUR_GITHUB_USERNAMEwith your actual GitHub username.
    git clone sfdx-maria
  3. Change your working directory to your sfdx-maria project folder.
    cd sfdx-maria

At this point, your sfdx-chan and sfdx-maria project folders contain different versions of the sfdx-project repository on GitHub. The sfdx-chan folder has the changes committed to the feature-chan-map branch, which includes the RecordMap component and modifications to the Property record page. The sfdx-maria folder has the changes committed to the master branch, which does not yet include Chan’s changes.

Create a Feature Branch

Just as Chan Ming Lewis created his own feature branch for development, Maria Garza creates her own feature branch for development. This keeps the features separate from the main codeline so the team can choose which features they merge into the main codeline and release later.

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

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. Note that Maria’s project folder won’t contain Chan’s RecordMap component. This is because Chan and Maria are developing in separate, isolated branches. Branching is a powerful and helpful feature of Git. Refer to Git Feature Branch Workflow in the Resources section of this step to learn more benefits of branching.

  1. Create if doesn't exist an aura folder where you 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 PictureCarousel and PictureGalleryCard components in the feature-maria-gallery exercise folder to your Salesforce DX project folder at sfdx-maria/force-app/main/default/aura.
    Copying exercise folders to Maria’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.

Next, let’s create a new scratch org for Maria to continue her development and testing.

  1. Create a new scratch org with our definition file. This may take a minute or two.
    sfdx force:org:create --setdefaultusername --setalias sfdx-maria --definitionfile config/project-scratch-def.json
  2. Push local source metadata to scratch org.
    sfdx force:source:push

Export Sample Data

Just as we did with sfdx-chan we need records to work with, so let’s export some sample data from your Dev Hub org to save with the project.

  1. In your sfdx-maria working directory, export property and broker records from your Dev Hub and save them as a JSON file in the sub-folder assets/data.
sfdx force:data:tree:export --targetusername DevHub --outputdir assets/data --query "SELECT Id, Name, Email__c, Phone__c, Mobile_Phone__c, Title__c, Picture__c, ( SELECT Id, Address__c, Assessed_Value__c, Baths__c, Beds__c, Broker__c, City__c, Date_Agreement__c, Date_Closed__c, Date_Contracted__c, Date_Listed__c, Date_Pre_Market__c, Description__c, Location__Longitude__s, Location__Latitude__s, Picture__c, Price__c, Name, State__c, Status__c, Tags__c, Thumbnail__c, Title__c, Zip__c FROM Properties__r ) FROM Broker__c"

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 gallery component to the Property record page.

  1. Open Maria’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. Note that Chan’s map component is not on the page.
  5. Drag the Picture Gallery component onto the page canvas and drop it in the left column, just above the Related and Detail tabs.
  6. Click Save, then click Back. Refresh the page and you should now see the gallery component showing some property pictures.

Make sure you place the Picture Gallery 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 with our changes and it’s time to test. We’re only focusing 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 will 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 gallery component to property page"
  3. Push the local feature branch to GitHub.
    git push -u origin feature-maria-gallery

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


  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる