Customize the Home Page | Trailhead Screen Reader Instructions

The home page is what your users see first after logging in. This page can be customized to highlight information specific to the user. Easy access to pertinent information = increased efficiency. We customize the home page through the use of the Lightning App Builder. 

Create a New Home Page Using Lightning App Builder

1. From Setup, enter Lightning App in the Setup search field near the top of the page and select the result for Lightning App Builder | User Interface.
2. Locate the heading level 3 called Lightning Pages, and activate the New button below that heading.
3. Next, locate the Create a new Lightning page heading. This will be near the bottom. You'll find radio buttons accompanied by links for selecting different page types. Select Home Page, then navigate down and activate the Next link.
4. For the label field, enter Support Home Page then activate the Next link.
5. Select the radio button for Standard Home Page template.
6. Activate the  Done link at the bottom of the page.

Lightning App Builder for Keyboard Users

Before we move onto the next section of the project, let's pause here and talk about how keyboard users interact with the Lightning App Builder. This interface uses drag and drop functionality to grab components from a components list and add them onto the canvas of your page. The components list and the page canvas are marked by headings.

The Toolbar at heading level 2 holds three component lists and a search field for narrowing your results. We'll be working with the standard components list for now, but as you progress in your Salesforce journey, you may find yourself building custom Lightning components for your org.

Let's examine the standard component list at the heading level 3 for now. This heading will contain a number in parentheses corresponding to the number of standard components available to use. Ensure this control is expanded in order to access the components. There is a list box below this heading containing the components. 

Let's move to the heading level 2 which is titled Page. This is your workspace where components will be added and will appear on the page. The visual format of this section is dictated by the template chosen previously. Screen readers will announce a series of links called Add Component(s) here. While no indication of visual formatting is provided, these links correspond to positions on the page. Users will press ENTER on one of these links to select it as the insertion point for the component to be added.

The final important section at heading level 2 is Properties. This section contains properties for each component as you insert it. You can change the properties pane to display the properties for a component by pressing ENTER on the component in the page canvas. The properties section allows you to access rich text edit fields, set a label for your component, edit filters for lists, or change the number of results to display in a list.

Let's jump into some instructions and put all this theory into action!

Display the five most recent cases.

1. Drag the Recent Items component to any spot in the canvas.
   1. On the page canvas, press ENTER on any Add Component(s) here link
   2. Ensure the Standard Components heading is expanded. Navigate through the standard component list to find Recent items and press ENTER. Remember, NVDA should be in focus mode to arrow through the list. JAWS users may need to turn virtual cursor off to access the list.
   3. Check the page canvas. You should see a new heading level 2 entitled Recent Items.
      1. Navigate to the Properties heading and enter Recent Cases into the edit box for Label.
      2. Activate the Select button found below the Label field. We’ll set the object we wish to see Recent Items for.
      3. Move the currently selected object, API Anomaly Event Store, into the Available column.
         1. The page shows two list boxes with two buttons for moving items between the Available list and the list of currently selected items.
         2. Locate API Anomaly Event Store in the Selected list and press the Move Selection to Available button.
      4. Select Case from the Available list and move it into the Selected Column
         1. Locate Case in the Available list. Once Case is selected, activate the Move Selection to Selected button.
      5. Activate the  OK button.
      6. For Number of Records to Display, enter 5. You'll find the edit field for this just below the Select button.

Let's add another component to our new home page. Show Chatter posts where the support rep is @mentioned.

1. Drag the Chatter Feedcomponent to any spot in the canvas.
   1. On the page canvas, press ENTER on any Add Component(s) here link
   2. Ensure the Standard Components heading is expanded. Navigate through the list to find Chatter Feed and press ENTER.
   3. Check the page canvas. You should see a new heading level 2 entitled Feed.
2. For Feed Type, select To Me.
   1. Under the Properties heading level 2, locate an item entitled *Feed Type. Press ENTER, and a list of choices appears. Navigate through the list and choose the option entitled TO Me. 

Let's try out the previous instructions on a couple more components.

Show today’s tasks and upcoming events.

1. Drag the Today’s Tasks component to any spot in the canvas.
2. Drag the Today’s Events component to any spot in the canvas.

Finally, display a link to the Salesforce trust site.

1. Drag the Rich Text component into the Today’s Tasks box.
   1. Press ENTER on Today's Task heading level 2 on the page canvas, then navigate down to find a series of buttons which will include Insert a Component After This One.
   2. Press ENTER on Insert the component after this one.
   3. Return to the standard component list and press ENTER on Rich Text. The component will be added in that space.
2. Navigate down to the Properties heading. Tab until you land in the Compose Text field located after the font controls. Once in the Compose field, enter the words, Be sure to check the Salesforce Trust site.
3. Highlight the text "Salesforce Trust" then exit forms mode or focus mode.
4. Navigate up the page to the series of buttons just above the compose field. Activate the button called Link.
5. For URL, enter trust.salesforce.com and press ENTER. Check your Compose Text field. You should now have a link embedded in that text.
6. Activate the Save button.

Activate the new Home Page

1. Be sure you have pressed the Save button, then press the Activate button on the popup that appears.
2. We are presented with three tabs. Select the App and Profile tab.
3. Press the Assign to Apps and Profiles button.
4. Select the checkbox for Service Console and activate the Next button.
5. Select the Custom: Support Profile and the System Administrator profile checkboxes.
6. Activate the Next button, and then the Save button.
7. Activate the Back element at the top of the page to leave the Lightning App Builder. This element may announce differently to various screen readers.

Your users with the support profile assigned now have a personalized home page. Now you see that a request has been sent your direction by the VP of Sales. Sales reps need quick access to industry-specific accounts. Let’s address this request and create a custom account list view to meet their needs.

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