Build a Custom Record Page for Lightning Experience
Just like the Home page, you can create a custom record page in two ways: Create it from scratch using a template, or edit an existing page. We’re going to create a record page using a template.
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.
- From Setup, enter App Builder in the Quick Find box, then select Lightning App Builder.
- Click New.
- Select Record Page.
- Name your page New Opportunity Page, and select Opportunity.
Choose the Header, Subheader, Right Sidebar template on
the next screen, 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.
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.
- Add the Path component to the region below the highlights panel.
- Add a Chatter component to the lower right region.
Add a Tabs component to the lower left region.
The Tabs component comes with some default tabs already in place. Let’s add more.
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.
Click the second Details tab. From the Tab Label
dropdown menu, select Custom, and give the tab a new
label: Recent Items.
- Click Done.
- Create an Activity tab.
Drag the Recent Items tab to the top of the Tabs list in the properties
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 assigned to them. They’re empty. Let’s fix that.
To add a component to a tab, select the tab on the canvas and then drop a component directly below it.
- Select the Details tab.
Drag a Record Detail component right below the Details tab, into the green
- 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.
Select the tabs component on the canvas, and in the properties pane, change the
order of the tabs to: Details, Activity, Recent Items, and Related.
You can’t drag the tabs inside the component to move them around. You can only adjust them in the properties pane.
- Click Save, then Not Yet.
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.
- Add a Rich Text component above the Chatter component on the page.
- Enter this text in the component: A million dollar opportunity closed! Oh yeah!
- In the component properties, make the text bold and centered, 18-point size, and change the font to something that appeals to you.
Keep Display as card selected.
This setting makes the text 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.
- Click Add filter.
- Set Field to Amount, if it’s not already.
Set Operator to Greater Than or Equal. For Value, enter
- Click Done.
- Click Add filter again, and create another filter for the Stage field equal to Closed Won.
- Save the page again, then click Activation.
It’s time to spread the awesomeness! Let’s activate the page. It’s super easy.
- 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.
Let’s assign this page to a specific app, record type, and profile.
- Click the App, Record Type, and Profile tab.
- Click Assign to Apps, Record Types, and Profiles.
- Assign the page to the Sales app, the Master record type, and the System Administrator profile.
Review the page assignment.
The New Page column is populated with the name of the page we’re activating: New Opportunity Page.
- Click Save.
You’ve created a page and activated it. Now let’s see it in action.
- Click Back in the App Builder header.
- From the App Launcher (), open the Sales app, and click the Opportunities tab.
Select any opportunity with an amount below $1,000,000.
You might have to refresh the opportunity page for the record page changes to show up.
Here’s what the custom record page looks like, using the sample company, United Oil Refinery 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.
Don’t see the rich text component that you added to the page? That’s because the opportunity doesn’t meet the criteria that you set. Let’s change that.
- From the page level actions in the Highlights panel, select Edit.
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. As soon as you save your changes and the filter criteria are met, the page automatically updates to show the rich text component and its message.
Let’s move on to app pages.