Skip to main content

Grow your business with Salesforce Starter

Deepen customer relationships with sales, service, and marketing in one app.

Start your free 30-day trial
Time Estimate

Build a Custom Record Page for Lightning Experience and Salesforce Mobile App

Learning Objectives

After completing this unit, you’ll be able to:
  • Create a customized object record page for Lightning Experience and the Salesforce mobile app.
  • Activate the custom record page for your users.
Note

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.

Those Lightning Experience Record Pages? You Can Customize Them, Too!

Use the Lightning App Builder to add, remove, or reorder components on a record page to give users a customized view for each object’s records. Even cooler, you can customize a record page and assign it to specific Lightning apps to give your users access to a record page customized especially for the context of the app they’re working in.

Your Record Page

Just like the Home page, you can create a custom record page in different ways: Create it from scratch using a template, clone one of your other custom record pages, or edit an existing page. However, unlike the Home page, custom record pages are not only supported in Lightning Experience on desktop but also in the Salesforce mobile app.

Create a Custom Lightning Record Page

Let’s build a custom opportunity record page.

We’ll tweak the standard record page layout just a bit, so you can get a feel for how things go together. After you’re comfortable with that, you can go to town and customize your record pages any way you like. Let’s get started.

  1. From Setup, enter App Builder in the Quick Find box, then select Lightning App Builder.
  2. Click New.
  3. Select Record Page and start stepping through the wizard.
  4. Label your page New Opportunity Page, and select Opportunity as the object.
    Start typing an object’s name in the Object field to filter the list and find what you’re looking for more quickly.
  5. Choose the Header, Subheader, Right Sidebar template, and click Done.
    In the components pane, you see all the standard components available for opportunity record pages and any custom components that you’ve installed in your org.
  6. From the settings menu ( Lightning App Builder component pane settings menu icon), select Always show icons.
    The icons that appear in the palette show what form factors each component supports. For example, if you add the Chatter Feed component to your page, it displays when you view the page on both a desktop and in the Salesforce mobile app. The same isn't true for Chatter Publisher, which is supported on desktop only. We’ll see this behavior in action when we test our finished page later in this module.
  7. Drag the Highlights Panel component into the top region of the page. Click See How It Works in the component properties pane to find out where the highlights panel content comes from.
  8. Add the Path component to the region below the highlights panel.
  9. Add a Chatter component to the lower right region.
  10. Add a Tabs component to the lower left region. Add Tabs Component The Tabs component comes with some default tabs already in place. Let’s add more.
  11. In the Tabs component details pane, click Add Tab.
    By default, another Details tab is added. But because we already have one, let’s change this new one to something else.
  12. Click the second Details tab.
  13. From the Tab Label dropdown menu, select Custom, and give the tab a new label: Recent Items
    You might have to scroll up in the Tab Label list to find Custom at the top.
    Add a new tab
  14. Click Done.
  15. Create an Activity tab.
  16. Select the Details tab on the canvas.
  17. Drag a Record Detail component right below the Details tab, into the green highlighted area. Add detail component
  18. Add a Related Lists component to the Related tab, an Activities component to the Activity tab, and the Recent Items component to the Recent Items tab.
  19. Select the tabs component on the canvas, and in the properties pane, change the order of the tabs to: Details, Activity, Recent Items, then Related.
    You can’t drag the tabs inside the component to move them around. You can only adjust them in the properties pane.
  20. Click Save, then Activate.

Roll Out Your Custom Record Page to Your Users

It’s time to spread the awesomeness! Let’s activate the page. It’s super easy.

The Activation: Opportunity Record Page has three options: Org Default, App Default, and App, Record, Type and Profile.

You have four options for activation.
  • Make the page the org default for the object.
  • Make the page the default object record page for specific Lightning apps.
  • Assign the page to a combination of Lightning apps, record types, and profiles.
  • Assign the page to a form factor, such as a desktop or phone.

Note the last bullet in the list. Not only can you create a page that is customized for the needs of your users, but you can go a step further and customize a page based on how your users access it. You can create uniquely customized record pages that only your mobile users see, containing only what they need while on the road or in the field. At the same time, desktop-only record pages can serve the needs of your users while they’re working on their PCs or laptops.

Let’s assign this page to a specific app, record type, and profile. We’ll also make sure it’s assigned to both the desktop and phone form factors, so we can view it in both places.

  1. Click the App, Record Type, and Profile tab.
  2. Click Assign to Apps, Record Types, and Profiles.
  3. Step through the assignment wizard and assign the page to the Sales app, the Desktop and phone form factor, the Master record type, and the System Administrator profile.
  4. Review the page assignments.
    The New Page column is populated with the name of the page we’re activating: New Opportunity Page.
  5. Click Save.
See? Easy peasy. Your customized record page is now live. But before we go check it out, let’s make it even better.
Note

You may be thinking, “This is great, but what if I change my mind? How do I deactivate my custom page?” That’s easy, too. Click Activation, click the App, Record Type, and Profile tab, and click Remove Assignments.


Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities