Modify the User Experience | Trailhead Screen Reader Instructions
Modify the User Experience
Page layouts allow you to customize the look and feel of detail and edit pages in Salesforce. You can also use page layouts to control which fields, related lists, and custom links users see, which standard and custom buttons appear on detail pages and related lists, and determine whether fields are visible, read only, or required on detail and edit pages. Yes... you can do a lot with page layouts.
Modify the Space Station Page Layout
You are going to move some fields around and add a few related lists to make the user interface more productive and appealing.
You can edit the page layout from the Custom Object definition page. But first you need to add a new Space Station record.
Activate the App Launcher button, then search for the Space Station Construction App.
From the navigation menu, press ENTER on the Space Stations link, then the New button. Enter any name that you'd like for your Space Station record. The Mother Ship has a nice ring to it!
then Save the record.
What you see now is the default layout for the Space Station that the Salesforce Platform generated for you.
A Note for Screen Readers
We're going to hop into the Page Layout Editor now to move some fields around and add columns to the related list.
The drag-and-drop interface of the Page Layout Editor requires some workarounds if you are using screen reading technology. You can find some guidance for using the Page Layout Editor with a screen reader by viewing
this documentation article for screen reader users
We'll guide you through the general steps in these instructions, but you should consult the user guides for your assistive technology for specific keystrokes.
The size of your display, your browser zoom, and your screen resolution can cause these solutions to not work properly for some users. Note that if you still have trouble moving fields around as directed in these instructions, you can skip the section on page layouts and continue down to the next section of these instructions to Add Some Battle Station Data. The step will still verify without editing the page layout.
Let's move some fields around to make this easier to work with. We'll move the Project and Shield Status fields to the right a little.
For screen reader users, we'll be using the Salesforce Classic interface for the Page Layout Editor. We recommend using NVDA for the page layout editor as locating specific table cells may be difficult when using the JAWS cursor. The instructions below will use NVDA terminology.
- Activate the Setup button, and in the search box at the top, search for User Interface.
- Uncheck the checkbox for Enable Enhanced Page Layout Editor.
- Activate the Save button.
- Next, let's jump into the Salesforce Classic interface. Activate the View Profile button near the top of the page.
- Under the Options heading, activate the Switch to Salesforce Classic link.
- On this page, press ENTER on the Setup link.
- Locate the Quick Find search box, not the global search field and type Space Station. Press ENTER.
- In the table of results, locate the Space Station row with the word Object listed in the Type column. Press ENTER to choose that result. Be sure not to choose the rows with Field listed in the Type column.
- In the bottom portion of the page, locate the Page Layouts heading. Down arrow from here to locate the table of available page layouts.
- You should only have one row of results, so press ENTER on the Edit link in the cell to the left of Space Station layout.
- Navigate down to a table with the word Information at the top. It will be below the Detail page buttons table. Space Station and Owner should be the fields in the top row of the table.
- Drag the Project Status field to the right column (below Owner field).
- Move your cursor to the P in Project Status located in the left column.
- Move your mouse to the current navigator object.
- Perform a left click, then a left mouse button lock.
- Move within the table and position your cursor over the O in Owner. Move the mouse to the current navigator object. Perform the keystroke to unlock the left mouse button.
- This should have dropped Project Status above Owner in the table. We need it to be below Owner, so let’s keep working.
- Focus your cursor on the O in Owner. Move mouse to navigator object, left click, and left mouse button lock.
- Move up the table to the P in project Status. Move mouse to current navigator object, and perform the keystroke to unlock the left mouse button.
Why the extra step switching these two fields around? The click target for empty table cells in this interface does not fill the entire table cell. The screen reader’s mouse pointer targets an area not actually on the click target. Screen readers aren’t able to target the empty cell where we need the field to go, so we must drop the field on top of an existing field, then swap their positions around. Table cells containing an existing field have a click target that fills the whole cell.
- Drag the Shield Status field to the right column (below Project Status field).
- Move your cursor to the S in Shield Status and move mouse to navigator object. Then, perform a left click and left mouse lock.
- Move your cursor to the P in the Project Status field in the right column.
- Move the mouse to the current navigator object and perform the keystroke for a left mouse unlock.
- This will drop Shield Status above the Project Status field.
- Move to the P in Project Status, move mouse to current navigator object, left click, and left lock.
- Move to the Shield Status Field, move mouse to current navigator object, and unlock the left mouse button to flip the position of these two fields.
There's a lot more info for the related list records than is currently showing. Edit the layout for the related lists to include more info on the page.
- Navigate down to the Overwrite Users’ customized related lists checkbox. Don’t check it. This serves as a handy landmark for locating the Related Lists table. Navigate down with the arrow keys. You'll find a Related List table here with Resources in the top row.
- Press ENTER on Resources, then navigate up the page and activate the Edit Properties button.
- This brings up the properties editor modal. There are two combo boxes on this page, Available Fields and Selected Fields.
- In the Available Fields combo box, locate Quantity and Utilization. Select each in turn, then activate the ADD link just after the combo box to move these two fields over to the Selected Fields combo box.
- Press ENTER on OK at the bottom to close the modal.
- Do the same thing for the Supplies related list and add the Quantity, Unit Cost, and Total Cost fields, in that order. (Note: there should now be 4 items in the Selected Fields: Supply Name, Quantity, Unit Cost, Total Cost.)
- Activate the Save button.
Go ahead and locate the Switch to Lightning Experience link near the top of your page and activate it. We're done with Salesforce Classic for now.
Add Some Space Station Data
Now that you have your page layout looking awesome, it's time to enter some data so you can really get a feel for how the application functions.
It takes a large number of people to build and operate a Space Station, so let's assign some resources to your project. Enter some resource records and set the quantities you may need plus a target utilization percentage. Feel free to be as creative as you'd like. Here are some types of resources you might need to build your Space Station:
Activate the App Launcher button near the top of the page.
Select the Space Station Construction app.
In the navigation menu, press ENTER on the Space Stations link, and then from the table of results on the page, select the record for The Mother Ship (or the record name that you chose earlier).
With the record open, locate the first heading called Tabs on the page. Press ENTER on the Related tab under this heading to ensure it is selected.
Navigate down the page by heading. You should find a heading called Resources.
Below this heading, activate the New button.
Enter the following Resource Name options one at a time.
Activate the Save & New button after entering each record).
Choose the Quantity and Utilization of your choice for each entry.
- Chief Navigator
- Construction worker
- Left-handed monkey wrench adjuster
- Robert the foreman
- Exhaust port inspector
- Sandwich maker
- Vibe Manager
Now you need to do the same thing for supplies and equipment. Here is some "stuff" that you might need to build a Space Station:
For The Mother Ship record, you need to add the supplies. With the Related tab selected, locate the Supplies heading and activate the New button.
Enter the following Supply Name options one at a time.
Activate the Save & New button after entering each record.
Choose the Quantity and Unit Cost of your choice for each entry.
- Light bulbs
- Docking bay door (typically a quantity of 1)
- Donuts
- Hot glue gun
- Plates
- Sunglasses
- Steel beams
- Toilet paper rolls
Add a Roll-Up Summary Field
As projects grow it becomes difficult to keep a handle on what's going on. As you add more and more resources, it's hard to tell how many people are actually assigned to the project based on the limited number of records that display in the related list section. Let's fix this so you can see the total number of resources at a single glance.
When you created the Master-Detail relationship from resources to space stations, it provides us with some additional functionality for free. You can create a roll-up summary field that will automatically display the total number of resources on the Space Station record.
- Activate the Setup button near the top of the page. Select Setup.
- Select the Object Manager tab below the Home tab or search it from the search field at the top.
- In the table of objects on the page, press ENTER on Space Station.
- Under the Space Station heading, select the Fields & Relationships tab.
- Activate the New Custom Field button.
- For Data Type, select Roll-Up Summary, and activate the Next button.
- Fill in the custom field details.
- Field Label: Crew Members
- Field Name: Crew_Members
- Activate the Next button.
- For your summary calculation, choose Resources from the Summarized Object combo box, select the Sum radio button for the Roll-Up Type, and then choose Quantity from the Field to Aggregate combo box.
- Activate the Next button.
- Activate the Next button again to accept the default field visibility and security settings.
- Activate the Save button to add the Crew Members field to the page layout and save the Crew Members field.
Now go back to your Space Station record and you should see a total of all resources underneath the Space Station Name. Please refresh the browser page if the changes are not visible. Pretty out of this world galaxy, huh?
Resources
Click to return to the unit on Trailhead to verify this step.