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:
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.
- Change your working directory to the parent folder of your sfdx-chan project folder.
- 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 https://github.com/YOUR_GITHUB_USERNAME/sfdx-project.git sfdx-maria
- Change your working directory to your sfdx-maria project folder.
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.
- In your sfdx-maria working directory, switch to a new Git branch named feature-maria-gallery.
git checkout -b feature-maria-galleryYou 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.
- Create if doesn't exist an aura folder where you copy the provided Aura components to.
- Locate the exercise folder that you downloaded and unzipped when you installed the DreamHouse sample app.
- 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.
Push Metadata to Scratch Org
Next, let’s create a new scratch org for Maria to continue her development and testing.
- Create a new scratch org with our definition file.
sfdx force:org:create --setdefaultusername --setalias sfdx-maria --definitionfile config/project-scratch-def.json
- Push local source metadata to scratch org.
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.
- 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.
- 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 gallery component to the Property record page.
- Open Maria’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. Note that Chan’s map component is not on the page.
- Drag the Picture Gallery component onto the page canvas and drop it in the left column, just above the Related and Detail tabs.
- Click Save, then click Back. Refresh the page and you should now see the gallery component showing some property pictures.
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.
- 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.
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.
- 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 gallery component to property page"
- 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.