Upgrade Case Layouts

Learning Objectives

After completing this unit, you’ll be able to:
  • Change fields on a case page layout.
  • Add a Related Record component to the Service Console.
  • Understand how to update preconfigured Related Record components.

Lay It All Out

When you move to Service Cloud in Lightning Experience, you need to think about page layouts a little differently. Of course, you can still use page layouts to add, remove, reposition, and update field properties. But with the out-of-the box three-column layout on cases, you might not need to change a thing. After all, the preconfigured case layout in the Service Console was designed with support agents in mind. The most important fields are front and center and easy to spot, whether in a Related Record component (1), on the Details tab (2), or in a new record or edit overlay (3).

A Service Console with callouts to a related component, Details tab, and new record overlay.

You may, however, want to bake some things into the existing case page layout. For example, when moving to Lightning Experience, you might want to add more case fields, change the fields that appear in a Related Record component, or move items around in the three-column layout. To do that, you have a few tools to work with:

  1. Page Layout Editor
  2. Actions Layout Editor
  3. Lightning App Builder

Since Lightning Experience offers you more tools to change layouts, our earlier theme of “You did this in Salesforce Classic, this is how you do it in Lightning Experience,” gets tricky. That’s because you have more options and new questions to ask:

  • In which column do I want a field to appear?
  • Do I want to change preconfigured Related Record components?
  • Do I want to change fields in Related Record components, page layouts, or both?

We’re going to show you the answer to those questions. And we’re going to do so with a scenario that we use in the rest of this unit.

The scenario: Like any good admin, you showed your support team the preconfigured three-column layout for cases in the Lightning Service Console, and asked them which fields, columns, and Related Record components you should update to improve their daily workflow. They said, “Make it more like our old console. We want the Case Reason field moved closer to the Priority field, and we’d like to see account information in the first column too.”

Into the bakery we go!

Field Case Layouts

Your support team’s request to move Case Reason closer to Priority gets you right into page layouts. When you move fields around on page layouts in Lightning Experience, the results appear in both the Details tab and the new record or edit overlay.

A Lightning Service Console with callouts to Case Reason being moved closer to Priority on both the Details tab and edit overlay.

To make this change:

  1. From Setup, click the Object Manager tab. Select Case, and open the Case Page Layouts setup page.
  2. Select the page layout in which you want to move fields, and click Edit.
  3. Similar to Salesforce Classic, drag Case Reason under Priority.
    A case page layout in setup with Case Reason dragged beneath Priority.
  4. Click Save.

Now when your agents look at case details, or create or edit a case record, Case Reason is under Priority to make their lives easier.

 A case in a Lightning Service Console with Case Reason moved under Priority on both the Details tab and an edit overlay.

Create a Quick Action to Use in a Related Record Component

To give your support team the visibility they requested of accounts alongside cases requires that we create a quick action for accounts.

  1. From Setup, click the Object Manager tab. Select Account, and open the Account Buttons, Links, and Actions setup page.
  2. Click New Action.
    The Account Buttons, Links, and Actions page in setup with New Action highlighted.
  3. For Action Type and Standard Label Type, select Update Record. This lets agents update fields on existing accounts related to cases that appear in the Lightning Service Console.
  4. In Name, type a unique API name for the quick action, and click Save.
    The edit page of a new update record quick action for accounts.
  5. Arrange the account fields in the order that you want. Keep in mind that these fields are displayed in the Related Record component in the console. Let’s drag Account Number to the quick action layout, and click Save.
    The layout page of a new update record quick action for accounts.

Now that your quick action for accounts is finished, the next step is to add it as a Related Record component on the case page layout for the Lightning Service Console. To do that, we use Lightning App Builder.

Add Related Record Components with Lightning App Builder

The Lightning App Builder helps you quickly add, remove, and update items on the Lightning Service Console’s preconfigured three-column layout. Let’s use it to add a Related Record component that shows account details.

  1. From the Service Console, click The gear icon in the Setup menu at the top of the page. and Edit Page.
    The Lightning Service Console with Edit Page highlighted from the gear dropdown at the top.
  2. In the Lightning App Builder, click Related Record in the list of standard Lightning Components and drag it to the first column. By default, it uses the case object as the lookup field, but we change it to accounts in the next step.
    The Lightning App Builder with the Related Record Lightning Component highlighted in the sidebar, along with the Case Details component highlighted.
  3. Under Lookup Field, choose Account Name. This updates the Related Record component to accounts, which is what your support team asked for.
    The Lightning App Builder with Account Name highlighted in Lookup Field, and an account related record component highlighted the Lightning Service Console layout.
  4. Under Update Action, use the dropdown menu to select the account quick action that you created earlier.
    The Lightning App Builder with the account related record component dragged below the contact related record component.
  5. Click Save.
  6. Click Activation and select App Default. Since we want to assign the new case record layout to our Lightning Service Console app—not our entire org—click Assign as App Default.
    The Lightning App Builder Activation page with the App Default tab highlighted and the Assign as App Default button highlighted.
  7. Select Service Console and Next.
     The Lightning App Builder Activation page with Service Console selected.
  8. Review the assignment, and click Save.
  9. At the top of the Lightning App Builder page, click Back.
    The Lightning App Builder Activation page with Service Console selected.

Now when you refresh the Lightning Service Console or select another case, you see an Account Details Related Record component in the first column—just as your support team requested!

A Lightning Service Console with an Account Details related record component highlighted in the first column.

To recap, you updated the preconfigured case layout in the Lightning Service Console to improve your support team’s productivity. By request, you moved the Case Reason closer to Priority by editing case page layouts. Also, by request, you added an Account Details Related Record component to the first column of the console using a combination of quick actions and the Lightning App Builder.

Tip

Tip

Now that you know how to create quick actions and associate them with Related Record components, you can use the same process to customize the preconfigured Case Details and Contact Details Related Record components in the Lightning Service Console. For example, if your agents want to see the Case Reason field in the console’s first column, just create a new case update quick action. Then use the Lightning App Builder to modify the existing Case Details Related Record component so the Update Action field points to the new quick action.

Move to the Future

Now that you know how to upgrade your console, case feed, and case layouts in the Lightning Service Console, you’re well on your way to moving into the future. Celebrate the new life you’ve breathed into your org with a big piece of cake. Chocolate or vanilla, it doesn’t matter as long as you blow out the candles.

A graphic of a birthday cake with the Lightning Experience logo.
retargeting