Customize Your Lightning Service Console Pages | Trailhead Screen Reader Instructions

Create Case Record Page

In order for Ada and her team to be as productive as possible, Ada would like a custom layout for viewing case information. She wants the case record page to be simple and to include all the information she and her team need to access when working on a case, all available in one screen. 

Here’s Ada’s wish list for her custom screen. 

• A highlights panel for quick access to the most important case information
• A Knowledge section where agents can access knowledge articles to help them close cases more quickly
• Related lists for access to any other information related to the case, such as accounts and contacts
• A Chatter feed to see any posts related to the case

To create the case record page that meets all the needs of Ada’s team, use the Lightning App Builder. And when you’re done customizing your Lightning page, assign the page to your console app.

1. Activate the Setup button and select Service Setup from the menu.
2. Enter Lightning App in the Setup search box near the top of the page and select the result for Lightning App Builder.
3. Activate the New button, then select the link for Record Page.
4. Activate the Next link and fill in the details.
   • Label: Case Console Record Page
   • Object: Case
5. Activate the Next link.
6. Under Choose Page Template, select the radio button for Pinned Header and activate the Finish link.

Next, add some components.

1. Under the Page heading, press ENTER on the link called Add Component(s) to Pinned Region Here.
2. Navigate up to the Standard Components heading. JAWS users should toggle virtual cursor off to access the list rather than entering it directly. NVDA users can manually enter focus mode on the list below the heading. Choose Highlights Panel from the list.
3. Next, return to the Page heading and press ENTER on the first link called Add Component(s) here.
4. Navigate back up to the Standard Components heading and choose Accordion from the list.
5. Drag the Details section above the Related section.
   1. Navigate down to the Properties heading.
   2. Down arrow to the Default Expanded Section combo box and press ENTER to put your screen reader into Forms Mode or Focus Mode.
   3. Press TAB. You will land in a sections group where you can up and down arrow between Related and Details. Stay in Forms/Focus mode.
   4. Move down to Details and press SPACEBAR to grab this tab.
   5. Press Up arrow and then SPACEBAR again to drop it.
   6. Review the list. Related should now be below Details, and you can exit Forms/Focus mode.
6. Back in a normal browsing mode, you have a Details link followed by a Remove button, then a Related link followed by a Remove button. Press ENTER twice on the link for Details. We're still right below the Default Expanded Section combo box at this point.
7. You land in a combo box called Section Label. Arrow down to Knowledge. Do not press ENTER. Instead, TAB to the Done button and activate it. We just changed our Details tab to a Knowledge tab!
8. Back under the Page heading, you will have a heading level 3 called Knowledge. Ensure this element is expanded. Right below this Knowledge heading is an Add Component(s) here link. Press ENTER.
9. Return to the Standard Components heading and select Knowledge from the list and press ENTER to add it.
10. Next, navigate to the page canvas and expand the heading called Related by pressing ENTER on it. Press ENTER on the Add Component(s) Here link right below the Related heading.
11. Navigate up to the Standard Components heading. Select the Related Lists component from the list. There are several components with similar names, so be sure to choose Related Lists.
12. Next, under the Page heading, locate the first Add Component(s) Here link that appears and press ENTER.
13. In the Standard Components list, select Record Detail and add that to the page.
14. Repeat these steps to add the Chatter component.

Now that your page components are added, activate the page and add it to your service console app.

1. Press ENTER on the Save button, and then the Activate button.
2. On the Activation: Case Console Record Page, the Org Default tab should be selected. Activate the button called Assign as Org Default.
3. Activate the Next button and then the Save button.
4. Next, press ENTER on the Activation button.
5. Press ENTER on the App, Record Type, and Profiles tab.
6. Activate the button called Assign to Apps, Record Types, and Profiles.
7. From the table of apps, select the checkbox for Ursa Major Solar Service Console, then activate the Next button, and the Next button again on the following page.
8. For Record Types, locate the table of record types and select the checkbox for Master, then activate the Next button.
9. On the Selected Profiles page, select Custom: Support Profile and System Administrator by checking their checkboxes in the table. Activate the Next button.
10. Activate the Save button.
11. Activate the Save button again. At the very top of the page, activate the Back element. This element may announce differently to various screen readers. Press ENTER here to go back to Setup.

Test it!

1. From the App Launcher, search for the word Service and select Ursa Major Solar Service Console.
2. From the Show Navigation Menu button, choose cases. From the list view, open up any case record. Take a look at the layout on your case record page, and make sure everything you added is there.

Create a Custom Compact Layout

Ada requests specific information be shown in the highlights panel of the service console app. She’d like you to add Account Name, Case Owner, and Date/Time Opened fields related to the case so she and her team can access this information quickly when viewing and managing a case. Do this by creating a custom compact layout for the highlights panel.

1. Activate the Setup button menu and select Service Setup.
2. Select the Object Manager tab.
3. From the table of objects, press ENTER on Case.
4. Below the heading level 1 on this page, press ENTER on the Compact Layouts tab.
5. From the table of layouts that appears, press ENTER on System Default, then press ENTER on the Clone button.
6. Fill out the details for the compact layout.
   • Label: Ursa Major Highlights Panel
   • Name: This field will auto-populate.
7. From the Available Fields list, select Account Name, Case Owner, and Date/Time Opened. Tab to the Add link to move the fields to the Selected Fields list. Keep Subject, Priority, Status, and Case Number in the Selected Fields list.
8. Activate the Save button.
9. Press ENTER on the button called Compact Layout Assignment, then the button called Edit Assignment. In the Primary Compact Layout combo box, select Ursa Major Highlights Panel.
10. Activate the Save button.
11. To test it, go back to the Ursa Major Solar Service Console app and check out your Highlights Panel.

Good job! You just customized Ursa Major Solar’s console to meet Ada and her team’s needs for case management. Next, take a deeper dive into communication tools within the console, so that the support team can use them to close cases even faster while also providing top-notch support.

Resources

• Salesforce Help: Customize Lightning Pages for Lightning Console Apps
• Salesforce Help: Lightning App Builder

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