Customize Your Lightning Service Console Pages

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 8:44 minute mark, in case you want to rewind and watch the beginning of the step again.)

Accessibility

This unit requires some additional instructions for screen reader users. To access a detailed screen reader version of this unit, click the link below:

Open 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. Click the gear iconand select Service Setup.
   
2. Enter Lightning App in the Quick Find box, and select Lightning App Builder.
   
3. Click New, then select Record Page.
   
4. Click Next and fill in the details.
   

• Label: Case Console Record Page
• Object: Case
  

5. Click Next.
   
6. Under Choose Page Template, select Pinned Header and click Done.
   

Next, add some components.

1. Drag Highlights Panel from the palette on the left to the top of the canvas where it says Add Component(s) to Pinned Region Here.
   
2. Drag Accordion to the Add Component(s) Here box on the left side of the canvas.
   
3. In the information panel on the right, under sections, drag the Details section above the Related section.
   
4. Click Details, and choose Knowledge from the dropdown.
   
5. Click Done.
   
6. Click the arrow to expand the Knowledge section on the canvas, and drag Knowledge from the palette on the left to the Add Component(s) Here box under the Knowledge section.
   
7. Click the arrow to expand the Related section on the canvas, and drag Related Lists from the palette on the left to the box under the Related section.
   
8. Drag Record Detail to the middle region of the canvas.
   
9. Drag Chatter to the right-hand side of the canvas.
   

Your page should look like this:

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

1. Click Save and then Activate.
   
2. On the Activation: Case Console Record Page, click Assign as Org Default on the Org Default tab.
   
3. Click Next and Save.
   
4. Click the Activation button.
   
5. Click the App, Record Type, and Profiles tab and select Assign to Apps, Record Types, and Profiles.
   
6. Select Ursa Major Solar Service Console, then click Next and Next.
   
7. For Record Types, select Master, then click Next.
   
8. On the Selected Profiles page, select Custom: Support Profile and System Administrator, and click Next.
   
9. Click Save.
   
10. Click Save again, then click .
    

Test it!

1. Click Ursa Major Solar Service Console app.
   
2. 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. Click the gear icon and select Service Setup.
   
2. Click the Object Manager tab.
   
3. Click Case.
   
4. Click Compact Layouts from the menu on the left.
   
5. Click System Default, then click Clone.
   
6. Fill out the details for the compact layout.
   

• Label: Ursa Major Highlights Panel
• Name: (let default)
  

7. From the Available Fields list, use CTRL/Command to select Account Name, Case Owner, and Date/Time Opened, and click Add to move the fields to the Selected Fields list. Keep Subject, Priority, Status, and Case Number in the Selected Fields list.
   
8. Click Save.
   
9. Click Compact Layout Assignment, then click Edit Assignment. From Primary Compact Layout, select Ursa Major Highlights Panel.
   
10. Click Save.
    
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