Build a Custom Record Page for Lightning Experience and the Salesforce Mobile App | Trailhead Screen Reader Instructions

Learning Objectives

After completing this unit, you’ll be able to:

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.

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 Setup search box near the top of the page, then select the result for Lightning App Builder.
  2. Activate the New button.
  3. Select the option for Record Page near the bottom of the page and start stepping through the wizard by pressing ENTER on the Next link.
  4. Name your page New Opportunity Page, and select Opportunity as the object. Start typing an object’s name in the Object combo box to filter the list and find what you’re looking for more quickly. Select Opportunity, then activate the Next link.
  5. Check the box for the template called  Header, Subheader, Right Sidebar, and activate the Done link.
    In the components pane on the blank record page, 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 below the search field, 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’ll see this behavior in action when we test our finished page.
  7. Drag the Highlights Panel component into the top region of the page.
    • Locate the Page heading and arrow down to find the first Add Component(s) here link. Press ENTER on that link to select your insertion point.
    • Locate the Standard Components heading and ensure it is expanded. Locate Highlights Panel in the list and press ENTER to add it to your page.
    • Navigate through the canvas below the Page heading to verify your component was added. You should see what looks to be a heading for an opportunity record there now.
      Under the Properties heading, press ENTER on the See How It Works button to find out where the highlights panel content comes from.
  8. Add the Path component to the region below the highlights panel.
    • Below the content beneath your new Opportunity heading, you should find buttons for inserting a component after this one, moving, or deleting. You may choose to press ENTER on the Insert a Component After this One button. Alternatively, locate the next Add Component(s) here link in that area and press ENTER there to choose the insertion point for your Path component.
    • In the list box below the Standard Components heading, select Path.
    • Check the headings on the page to ensure Path was successfully added.
  9. Add a Chatter component to the lower right region.
    • Repeat the steps above. Choose your insertion point, select Chatter from the Standard Components list box, and press ENTER to add it to the page.
  10. Add a Tabs component to the next available insertion point.
    The Tabs component comes with some default tabs already in place. Let’s add more.
  11. Under the Properties heading, activate the Add Tab button.
    By default, another Details tab is added. But because we already have one, let’s change this new one to something else.
    • If you are using JAWS, a list box appears above the Add Tab button where you can arrow through the list of tabs you have added. JAWS will read out a lot of information about sorting and removing. Place focus on one of the detail tabs in the list box.
    • If you are using NVDA, under the Properties heading, press ENTER to focus inside the Default Tab combo box and press TAB to enter this list box of tabs.
    • You should see three tabs in the listbox, one related and  two details. Focus the list box on one of the Detail tabs and press TAB. You should land on a Details link. Press ENTER to edit properties of this tab.
  12. From the Tab Label combo box, select Custom or start typing the word Custom, and give the tab a new label: Recent Items.
  13. Activate the Done button. Press the TAB key several times to exit the tabs area.
  14. Create an Activity tab using the steps above. Start with the Add Tabs button under Properties.
  15. Drag the Recent Items tab to the top of the Tabs list in the properties pane.
    • Using JAWS or NVDA, enter into the Default Tab combo box and press TAB to land in a list of tabs. You want your screen reader in Forms Mode or Focus mode.
    • Locate Recent Items in the list and press SPACEBAR.
    • Arrow up to the top of the list and press SPACEBAR again

The Recent Items tab is now in the first position in the tabs component. You can move around between the tabs, but nothing changes because the tabs don’t have any components in them. They’re empty. Let’s fix that.

  1. Select the Details tab. Under the Tabs heading on your page canvas, locate the Details tab and press ENTER on that text to select that as the insertion point.
  2. Drag a Record Detail component right below the Details tab.
    • Continue to navigate past your final tab in the list on the page canvas. You should find an Add Component(s) here link. Press ENTER.
    • Navigate up to the Standard Components list box and select Record Detail to add it to your page.
    • If done correctly, you should find a Details heading followed by content like Opportunity Owner information.
  3. 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.
    • Press ENTER on one of the tabs below the Tabs heading on your page canvas to select each tab in turn.
    • Press ENTER on the Add Component(s) Here link at the end of the tab list.
    • For each tab, locate the desired component from the standard components list box and press ENTER to add it to your page.
  4. Press ENTER on the Tabs heading on the page canvas, and under the Properties heading, change the order of the tabs to: Details, Activity, Recent Items, then Related. Remember, you'll need to TAB past the Default Tabs combo box and use SPACEBAR to grab and drop tabs from the Tabs list box.
    You can’t drag the tabs inside the page canvas area to move them around. You can only adjust them in the properties pane.
  5. Activate the Save button, then the Not Yet button in the dialog that appears.

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.

You have four options for activation.

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. Press ENTER on the App, Record Type, and Profile tab.
  2. Press ENTER on the Assign to Apps, Record Types, and Profiles button.
  3. On the first page, assign the page to the Sales app by selecting its checkbox. Activate the Next button.
  4. On the second page, select the radio button for the Desktop and phone form factor, then activate the Next button.
  5. On the next page, select the checkbox for the Master record type, then activate the Next button.
  6. From the table, select the checkbox for the System Administrator profile and activate the Next button.
  7. Review the page assignments.
    The New Page column is populated with the name of the page we’re activating: New Opportunity Page.
  8. Activate the Save button.

See? Easy peasy. Your customized record page is now live. But before we go check it out, let’s make it even better.

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. Press ENTER on the Activation button, select the App, Record Type, and Profile tab, and press ENTER on Remove Assignments.

Resources

Click to return to the unit on Trailhead.