📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by December 6th. Learn more.
close
•
Start tracking your progress
Trailhead Home
Trailhead Home

Build a Custom Record Page for Lightning Experience and the 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.
  • Add visibility rules to a record page component.
  • Activate the custom record page for your users.

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. We’re going to create a record page using a template, then check out how it looks on a desktop and on a phone.

Create a Custom Lightning Record Page

Let’s build a custom opportunity record page from scratch.

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. Name your page New Opportunity Page, and select Opportunity.
    Tip

    Tip

    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 Finish.
    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 is not true for Chatter Publisher, which is supported on desktop only. We see this behavior in action when we test our finished page.
  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. From the Tab Label dropdown menu, select Custom, and give the tab a new label: Recent Items.
    Add a new tab
  13. Click Done.
  14. Create an Activity tab.
  15. Drag the Recent Items tab to the top of the Tabs list in the properties pane.
    The Recent Items tab is now in the first position in the tabs component. You can click around between the tabs, but nothing changes because the tabs don’t have any components in them. They’re empty. Let’s fix that.
  16. Select the Details tab.
  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 Not Yet.

Make Your Record Page Dynamic

Did you know that you can control when a component appears on a Lightning record page? You can, by adding component visibility filter conditions and logic to its properties.

Component visibility properties appear when you select a component on a record, app, or Home page in the Lightning App Builder. This behavior applies to standard components, custom components, and components from AppExchange. No need to do anything to your custom components. It’s all handled by the Lightning App Builder. If you don’t define a filter, the component displays on the Lightning page as usual. When you define one or more filters and set the filter logic for a component, the component is hidden until the filter logic criteria are met.

Let’s give it a shot. We’ll construct filters to make a rich text component display when an opportunity’s Amount is greater than or equal to $1 million, and its Stage is Closed Won.

  1. Add a Rich Text component above the Chatter component on the page.
  2. Enter this text in the component: A million dollar opportunity closed! Oh yeah!
  3. In the component properties, make the text bold and centered, 18-point size, and change the font to something that appeals to you.
  4. Keep Display as card selected.
    This setting makes the text inside the component more readable on Lightning pages by adding a white background to it instead of a transparent one. Toggle the setting off and back on to see what we mean.
  5. Click Add Filter.
  6. Set Field to Amount, if it’s not already.
  7. Set Operator to Greater Than or Equal. For Value, enter 1000000.
    Component visibility settings
  8. Click Done.
  9. Click Add Filter again, and create another filter for the Stage field equal to Closed Won.
    Controlling whether a component displays based on field values isn’t all you can do with visibility rules. As we mentioned, custom record pages are supported in Lightning Experience both on desktop and in the Salesforce mobile app. Visibility rules can also control whether components appear on a page based on the form factor (or device) you’re viewing the page on. Let’s set up rules for a component to appear only when the page is viewed on a phone.
  10. Add another Rich Text component right below the first one.
  11. Enter this text in the component: This component is for mobile users only.
  12. Customize the text however you like, then click Add Filter.
  13. Under Filter Type, click Device.
  14. Set the Value field to Phone, then click Done.
  15. Save the page, then click Activation.

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.

Record page activation

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. 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. Let’s go check it out.
Tip

Tip

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.

See What You Did There?

You’ve created a page and activated it. Now let’s see it in action. First, we’ll look at it on desktop.

  1. Click Back in the App Builder header.
  2. From the App Launcher (App Launcher icon), open the Sales app, and click the Opportunities tab.
  3. Select any open opportunity with an amount below $1,000,000.
    You might have to refresh the opportunity page for the record page changes you just made to appear.

    Here’s what the custom record page looks like, using the sample company, Dickenson Mobile Generators. Because you assigned the record page to the System Administrator profile, you can see it, but no other users in your org can. You can customize your different users’ experiences by creating custom record pages and assigning them by app, record type, and user profile. Give your sales managers a different view of opportunities than your sales reps. Configure nonprofit account pages differently than standard business account pages.

    Sample opportunity record

    Don’t see the rich text components that you added to the page? That’s for two reasons. For one component, it’s because we’re viewing the page on a desktop. We’ll get to that shortly. For the other component, it’s because the opportunity doesn’t meet the criteria that you set. Let’s change that.

  4. From the page level actions in the Highlights panel, select Edit.
  5. Change the opportunity’s amount to be over $1,000,000, change the stage to Closed Won, then click Save.
    Woohoo, look at that! You didn’t even have to refresh the page. When you save your changes and the filter criteria are met, the page automatically updates to show the rich text component and its message.

    There's the component!

    Now let’s look at the page in the Salesforce mobile app.

  6. Open the app on your phone.
  7. If necessary, log in using your Trailhead Playground credentials.
  8. Open the menu, tap the App Launcher, and open the Sales app.
    Note

    Note

    Don’t see what we’re describing? This content reflects the features and behavior in orgs that have opted in for the new Salesforce mobile app. If what you see here doesn’t match what you see in your org, either on the desktop in Lightning Experience or in the Salesforce mobile app, we encourage you to visit the New Salesforce Mobile App QuickStart in Setup and get started with the next generation of the Salesforce mobile experience.

  9. Tap Opportunities, then navigate to the opportunity that you updated to Closed Won.
    What you see at first is what you’d expect: actions, record highlights, Path. But scroll down a bit...Opportunity page in the Salesforce mobile app

    The tabs in our Tabs component are stacked when viewed on a phone. You can tap them to drill in. But wait! There’s one missing. Where’s the Activity tab? Well, the Activities component isn’t supported on a phone, so it was dropped from the page. And, since that caused the Activity tab to be empty, it was dropped from the page too.

    Toward the bottom is the component that appeared when you updated the opportunity to be over a million dollars. But right below it is something we didn’t see when we looked at the page on desktop: the mobile-only component.

You did it! You’ve taken your first steps into a larger world.

Let’s move on to app pages.