Customize Record Pages | Trailhead Screen Reader Instructions

Introduction

Noah Larkin, AW Computing’s VP of Services, is concerned that his Consulting team uses accounts to record details of consulting partners, but some of the fields they see are not applicable to their partner accounts—he would like all sales-related information removed.

Allison Wheeler also contacted you with a request. She's concerned that the new account fields appear together in the top section of account record detail pages. She’d like them organized into different sections to make it easier for her team to find the right information.

You can solve both of these issues using a combination of the Lightning App Builder and page layouts to control the fields, sections, related lists, and buttons that appear when users view or edit a record.

Adjust the Fields on the Page

Begin by modifying the default account page to display sales region and support plan information in separate sections.

1. Click the App Launcher button and type Sales into the search field. Find and select the result for Sales, then click the Accounts tab.
2. Open the All Accounts list view and select Edge Communications.
3. From the Setup menu, select Edit Page. The page opens in the Lightning App Builder.
4. Under the Properties heading, change the Label to Customer Account Page and change the API Name to Customer_Account_Page.
5. On the page canvas, locate the Tabs heading. Press ENTER on the Details tab below it.
6. Press ENTER on the Details heading that now appears under the Details tab.
7. Below the Properties heading, click the Upgrade Now button to upgrade the page to use Dynamic Forms. This will allow you to add, remove, and customize the location of individual fields on the page instead of having to display them in a single block.
8. Click the Next button.
9. Select the checkbox for Account Layout, then click Finish.

Note: if certain links or fields are not displaying during these next steps, use the Refresh Canvas button to refresh the display, then navigate back to the Details tab.

1. Under the Toolbar heading, press ENTER on the Fields tab.
2. Drag a Field Section component onto the canvas and drop it just above the Additional Information section in the Details tab.

• Locate the heading called Additional Information. The screen reader may also announce it as a switch in addition to the heading. Press ENTER on the heading.
• Interactive text appears below this point. Navigate down and press ENTER on Insert a component before this one.
• Navigate back up the page to a heading called Fields Components. Click the Field Section link below this heading.
• Now, there should be a heading called Section above the Additional Information heading.

1. Under the Properties heading, change the Label of the section to Sales Region.
2. Add another Field Section component below the Sales Region section.

• Below the Sales Region heading, click the link called Insert a component after this one.
• Navigate up the page and click the Field Section link below the Fields Components heading.

1. Under the Properties heading, change the Label of the section to Support Plan Information.

Now arrange the fields.

1. From the Account Information section, drag the Region field into the left column of the new Sales Region section.

• Below the Account Information heading, locate the text that says Region. This text will be repeated twice. Press ENTER on either instance of the word Region.
• Click the Cut button near the top of the page to cut the field to the clipboard.
• Under the Sales Region heading, press ENTER on the first link called Add field(s) here, then press CONTROL+V to paste the region field into that location.

1. From the Account Information section, drag the Zone field into the right column of the new Sales Region section.

• Below the Account Information heading, locate the text that says Zone. This text will be repeated twice. Press ENTER on either instance of the word Zone.
• Click the Cut button near the top of the page to cut the field to the clipboard.
• Under the Sales Region heading, press ENTER on the link called Add field(s) here, then press CONTROL+V to paste the Zone field into that location.

1. From the Account Information section, drag the Has Support Plan field into the left column of the new Support Plan Information section.

• Below the Account Information heading, locate the text that says Has Support Plan. This text will be repeated twice. Press ENTER on either instance of the words Has Support Plan.
• Click the Cut button near the top of the page to cut the field to the clipboard.
• Under the Support Plan Information heading, press ENTER on the first link called Add field(s) here, then press CONTROL+V to paste the field into that location.

1. From the Account Information section, drag the Support Plan Expiration Date field into the right column of the new Support Plan Information section.

• Below the Account Information heading, locate the text that says Support Plan Expiration Date. This text will be repeated twice. Press ENTER on either instance of the words Support Plan Expiration Date.
• Click the Cut button near the top of the page to cut the field to the clipboard.
• Under the Support Plan Information heading, press ENTER on the link called Add field(s) here, then press CONTROL+V to paste the field into that location.

Next, make the new sections more visible. They’re kind of buried in the record details. 

1. Drag the Sales Region section above the Activity and Chatter tabs in the right hand region of the page.

• Press ENTER on the Sales Region heading and immediately press CONTROL+X to cut it from the canvas. Alternatively, use the Cut button on the page if the keyboard shortcut doesn’t cut the section to the clipboard.
• Navigate down the page and press ENTER on the Tabs heading where Activities and Chatter are located.
• Navigate down the page and locate text that says Insert a component before this one. It will be located just above the Properties heading.
• Press ENTER on Insert a component before this one, then press CONTROL+V to paste the Sales Region section back onto the canvas.

1. Do the same for the Support Plan Information section.

• Press ENTER on the Support Plan Information heading then CONTROL+X to cut it from the page.
• Press ENTER on the Sales Region heading, then navigate down to Insert a component after this one.
• Press ENTER on Insert a component after this one, then CONTROL+V to paste the Support Plan Information section back onto the canvas below the Sales Region section.

Lastly, make the Prospect Rating field required.

1. In the Account Information section, press ENTER on the first instance of the words Prospect Rating field and select the Required radio button in the property pane.
2. Click the  Save button, then the Not Yet button.

Saving a page for the first time in the Lightning App Builder doesn’t push the customizations out to your users. You have to activate the page for your users to see it. We’ll get to activation shortly, after finishing the customizations.

Customize Related Lists

The Lightning App Builder lets you customize a lot of the pieces of a record page. However, if you want to make a related list available to the page in the Lightning App Builder, or adjust related list columns, you have to do that in the page layout editor.

A note for Screen Reader Users

The enhanced version of the page layout editor presents some accessibility challenges for keyboard-only use, including the use of screen reader simulated mouse commands. The Page Layout Editor workarounds described in this document rely on a specific set of system and browser settings found in the help article for

using the page layout editor with a screen reader

Behavior across systems varies, and you may have limited success using the keyboard commands described here.

The steps below will direct you to disable the enhanced page layout editor and switch to the earlier version using the Salesforce Classic interface in order to follow along with the exercise. In Salesforce Classic with the enhanced page layout editor disabled, simulated mouse keyboard commands work with screen readers, allowing users to have access to this functionality. 

You may also find further resources in the help article

Screen Reader Techniques for Adding Related Lists to Page Layouts

Navigate to the page layout editor.

Click the Back link at the top of the Lightning App Builder Page.

Click the Setup button, and search for User Interface in the Setup search box near the top of the page.

Make sure that Enable Enhanced Page Layout Editor is not checked.

Click the Save button.

Click the View Profile button, then the Switch to Salesforce Classic link located under the Options heading.

Click the Setup link, then under the Build heading, click the Customize link to expand the list.

Click the Accounts link, then the Page Layouts link.

Under the Account Page Layouts heading, locate the table of layouts and press ENTER on Account Layout, then click the Edit button to begin editing the page.

First, add the Do Not Call column to the Contacts related list.

1. Navigate down to the related list table. It is located directly after a checkbox called Overwrite users customized related lists.
2. From the table called Related List section, press ENTER on Contacts. Be sure your cursor is on the word and not focused on the blank space before it.
3. Navigate up the page and press ENTER on the Edit Properties button.
4. From the Available Fields list, select Do Not Call.
5. Activate the Add link to move it to the list of selected fields, then press ENTER on OK.

Now move the Opportunities related list to the top. We recommend using NVDA for this exercise for best results, and these instructions are based on commands for that screen reader. Users have reported success using JAWS, but the table cell positioning is lost with the JAWS cursor, and laptop mouse simulation keystrokes produce inconsistent results.

1. Navigate down to the related list table and locate Opportunities.
2. With your cursor positioned at the start of the word Opportunities, perform the keyboard command to move the mouse to the current navigator object.
3. Perform a left click with the appropriate keyboard command, then a left mouse button lock.
4. Position your cursor at the start of the first item in the Related List table.
5. Perform the keyboard command to move the mouse to the current navigator object, then unlock the left mouse button.
6. Click the Save button.
7. We’re done with Salesforce Classic, so click the Switch to Lightning Experience link near the top of the page.

Activate the Customer Account Page

Assign the Customer Account Layout to the appropriate record type.

1. Click the Setup button and enter App Builder in the Setup search box, then select Lightning App Builder.
2. In the table, press ENTER on Customer Account Page, then click the Edit button.
3. Click the Activation button.
4. Press ENTER on the App, Record Type, and Profile tab.
5. Click the button called Assign to Apps, Record Types, and Profiles.
6. Assign the page to the Sales app, then click Next.
7. Leave the Form Factor assignment set to Desktop and phone, then click Next.
8. Select the Customer Account record type, and click Next.
9. Select both the Sales User and Support User profiles, and click Next.
10. Review the assignments, then click Save.

Create a Partner Account Page

Create a new account page called Partner Account Page by cloning the Customer Account Page.

1. Click the Back link at the top of the Lightning App Builder page.
2. Click the Clone button for the Customer Account page.
3. In the page properties, change the label to Partner Account Page.
4. Change the API Name to Partner_Account_Page.
5. On the canvas, press ENTER on the Details tab to display it. It is located under the first Tabs heading on the page canvas.

Now, remove the Prospect Rating, Region, Zone, Has Support Plan, and Support Plan Expiration Date fields.

1. Press ENTER on the Sales Region heading and click the Delete button to delete it.
2. Do the same for the Support Plan Information section.
3. In the Account Information section, press ENTER on the second instance of the words Prospect Rating, and click the Delete button to delete it.
4. Click the Save button, then the Activate button.
5. Press ENTER on the App, Record Type, and Profile tab.
6. Click the button for Assign to Apps, Record Types, and Profiles.
7. Assign the page to the Sales app, then click Next.
8. Leave the Form Factor assignment set to Desktop and phone, then click Next.
9. Select the Partner Account record type, and click Next.
10. Select both the Sales User and Support User profiles, and click Next.
11. Review the assignments, then click Save.

Now that Noah's and Allison’s teams can see what they need to see in their account pages, move on to the next step, where you enable field history tracking.

Resources

• Salesforce Help: Create and Configure Lightning Experience Record Pages
• Salesforce Help: Break Up Your Record Details with Dynamic Forms
• Salesforce Help: Dynamic Forms Tips and Considerations
• Salesforce Help: Required and Read-Only Fields in Dynamic Forms
• Salesforce Help: Use the Page Layout Editor with a Screen Reader
• Salesforce Help: Screen Reader Techniques for adding Related Lists to Page Layouts

Click to return to the unit on Trailhead to verify this step.