Time Estimate

Customize the User Interface

Lightning bolt icon used to indicate that the content is for Lightning Experience

Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This module is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this unit, you’ll be able to:
  • Understand how page layout elements drive content on record pages in Lightning Experience
  • Identify which part of the Lightning Experience user interface is driven by a compact layout

Your Layouts Can Customize Lightning Experience Records

You can customize the content of your record pages in Lightning Experience using tools you’re already familiar with: page layouts and compact layouts.

Page Layouts in Lightning Experience

When you customize your page layouts in Salesforce Classic, those changes can affect the content of object record pages in Lightning Experience. However, in Lightning Experience, the page elements display differently, and some aren’t supported.

If you’re in an org that supports multiple page layouts, you can create a page layout directly from the Page Layouts related list on any object in the Object Manager. You can also edit or delete an object’s page layouts by clicking Action Related List icon on a page layout in the Page Layouts related list.

Here’s a sample contact record in Lightning Experience. The highlights panel contains key fields for the record, and is the only part of a record page that you can’t customize using the page layout editor. The fields in the highlights panel are customized using a compact layout. We’ll get into compact layouts shortly.

Sample Contact Record Page in Lightning Experience

These page layout elements are supported in Lightning Experience.

Actions
Actions display in different places, such as the highlights panel, Activity tab, and the Chatter tab. The actions are derived from the list of actions in the Salesforce Mobile and Lightning Experience Actions section of the page layout. Some actions aren’t supported in Lightning Experience.

We’ll learn more about actions in Lightning Experience in the next unit.

Blank Spaces
Blank spaces are supported in Lightning Experience.
Canvas Apps
Canvas apps are supported in Lightning Experience.
Custom Links
Custom links display under the Details tab.
Fields
Fields display under the Details tab. You can remove or reorder fields on a page layout only via the page layout editor.
The top-down tab-key order, which allows users viewing a record detail page to move through a column of fields from top to bottom before moving focus to the top of the next column of fields, isn’t supported in Lightning Experience or mobile. Even if a page layout is configured for a top-down tab-key order, tabbing moves from left-to-right through field columns in Lightning Experience and mobile.
Related Lists
Related lists are included as Lightning components in Lightning Experience. Not all related lists are supported in Lightning Experience.
In Lightning Experience, only the first four fields on a related list are displayed. Users can click View All to see the rest of the fields.
Report Charts
Report charts that you add to a page layout appear under the Details tab in Lightning Experience. When you add a report chart to a page layout, it can take a few moments before the chart appears on Lightning record pages.
Sections
Sections appear along with fields under the Details tab. A section with no header is incorporated into the section above it.
Standard and Custom Buttons
Standard and custom buttons are treated as actions in Lightning Experience, just like in the Salesforce mobile app.
Important

Important

Custom buttons that call JavaScript aren’t supported in Lightning Experience.

Visualforce Pages
Visualforce pages that you’ve added to the page layout appear under the Details tab. Only Visualforce pages with Available for Salesforce mobile apps and Lightning pages enabled display in Lightning Experience.

Visualforce pages that have been put into the Mobile Cards section as components don’t appear in Lightning Experience.

These page layout elements aren’t supported in Lightning Experience.
  • Expanded lookups
  • Mobile cards
    Note

    Note

    The Twitter card that you see on account, contact, and lead record pages in Lightning Experience isn’t the same as the Twitter component available as a mobile card in the page layout editor. The Twitter card in Lightning Experience is a Lightning component. You must have Social Accounts and Contacts enabled for it to appear.

  • S-controls
  • Tags
Note

Note

You can’t use the enhanced page layout editor to customize the layout of Lightning Experience record home pages.

Compact Layouts in Lightning Experience

If you’ve completed the Salesforce Mobile Basics module, you’re familiar with compact layouts and how they work in the Salesforce mobile app. Compact layouts play the same role in Lightning Experience: displaying a record’s key fields in the highlights panel of a record page. Compact layouts are also used in other places, such as the activity timeline and expanded lookup cards.

A compact layout lets you put the most important fields where your users can easily see them. If your org supports record types, you can assign a compact layout to different record types, just like you can with a page layout.

In Lightning Experience, up to the first seven fields in a compact layout appear in the highlights panel of an object record. (On smaller screens, the highlights panel displays fewer fields.) When a user hovers over a lookup relationship field on the object record page, a highlights panel for that field displays the first five fields from the compact layout. Highlights panels display the first field from the compact layout at the top in an accented font.

Compact Layouts in Lightning

Tip

Tip

Put the object’s Name field first to provide context for your users when they view a record.

Event and task compact layouts determine the fields that show up in the details section when you expand an activity in the activity timeline in Lightning Experience. When you change the compact layout for tasks in the activity timeline, you also impact the fields that show up in the highlights area on tasks, in tasks lists, and everywhere else the compact layout is used.

You can create and edit a compact layout from the Compact Layouts related list on any object in the Object Manager in Lightning Experience.

Changes you make to a compact layout are reflected in both Lightning Experience and the Salesforce app.

retargeting