Build an App Home Lightning Page

Learning Objectives

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

• Add components to a Lightning page
  
• Configure the properties of a Lightning page and a Lightning component
  
• Add actions to a Lightning page
  
• Add a Lightning page to Lightning Experience and the mobile app
  

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.

The App Home Lightning Page

Add a custom home page for an app to the Salesforce mobile app and Lightning Experience app navigation bars to let your users easily access the objects and items that are most important in that app.

Create an App Page

Next up, you build an app home page for a sales team.

Your sales team needs to see top deals in the pipeline, with a visual interface that makes it easy to absorb key details at a glance. They want to see the most recent opportunities they’ve viewed and be able to drill into the record details with a single tap or click. And they want functionality to log calls and create accounts and opportunities on the go.

Time to get started!

1. From Setup, enter App Builder in the Quick Find box, then select Lightning App Builder.
   
2. Click New.
   
3. Select App Page, and then click Next.
   
4. Name your Lightning page Top Accounts and Opportunities.
   
5. Select the Two Regions template, and click Done.
   If the Lightning App Builder walkthrough pops up, dismiss it.
   
6. Drag the List View component into the first region.
   
7. In the properties pane, select Account for the object, select the Platinum and Gold SLA Customers filter, and set the number of records to display to 5.
   
8. Add a Recent Items component into the second region.
   
9. In the properties pane for the Recent Items component, change the custom label to Recent Opportunities.
   
10. Click Select and configure the Selected list so it only contains Opportunity.
    
11. In the properties pane, click Page, click Select, and then add these actions to the page.
    

• Log a Call
  
• New Account
  
• New Opportunity
  You can add only global actions to a Lightning app page.
  

12. From the toolbar, change the view to Tablet-Landscape.
    
13. Click Save, and then Not Yet.
    

Now that you’ve created your page, you’re almost ready to add it to Lightning Experience and the mobile app.

Add Your App Page to Lightning Experience and the Salesforce Mobile App

Just like the other pages, your users can’t access your app page until you activate it. During activation, you can customize the page’s custom tab label, adjust its visibility, and set its position in the Salesforce mobile app and Lightning Experience app navigation bars, all in one place.

1. Click Activation.
   
2. Don’t change the app name. By default, the label that you give the Lightning page is used as the label for its custom tab.
   
3. Change the icon to the blue lightning bolt icon. The icon that you choose here is used as the icon for the page in the mobile app and in Lightning Experience.
   
4. Keep the tab’s visibility open to all users.
   The Activate for the System Administrators only setting is useful while you’re working on your Lightning page. Restricting your page to administrators only means that you can see and test the page, but your users can’t see it until you’re ready to expose it to them.
   
5. Click the Lightning Experience tab.
   
6. Select the Sales app, and click Add page to app. 
   

The page you’re adding to the menu appears in the second position by default, so leave it there. If you put it into the top position, it becomes the landing page for all your Lightning Experience users.

7. Click the Mobile Navigation tab.
   
8. Select Mobile Navigation Menu, and click Add page to app.
   

This adds the app page to the mobile navigation in the “Mobile Only” Lightning app in the Salesforce mobile app. Adding the page to the Sales app in Lightning Experience like you did previously, ensures that the app page appears in the Sales app within the Salesforce mobile app as well.By default, new pages you add to the navigation in the “Mobile Only” app appear below the Smart Search Items menu item. If you leave the Top Accounts and Opportunities page there, it will appear in the Apps section of the menu. You don’t want that, so move it up.

9. Drag the page to below the Today menu item. 
   

10. Click Save.
    

Your app home page is now ready for your mobile and Lightning Experience users!

Test Your App Page in Lightning Experience

You’ve created your page and activated it. Now, see it in action!

1. If you’re still in the App Builder, click Back to return to Setup.
   
2. From the App Launcher ( ), find and select Sales.
   
3. Click Top Accounts and Opportunities from the app navigation bar.
   Here’s your Lightning page! The lightning bolt icon appears here too, and the three actions that you added are in the highlights panel. 
   

Test Your App Page in the Salesforce Mobile App

Now, look at it on your phone.

1. Open the Salesforce mobile app.
   
2. Log in using your Trailhead Playground credentials. (If you don’t know your Trailhead Playground credentials, see this article.)
   
3. From the menu, tap the App Launcher, and open the Sales app.
   You might have to pull and refresh the Sales app menu to see the changes.
   
4. Tap Top Accounts and Opportunities.
   Here’s your Lightning page! It has the lightning bolt icon you chose, and the three actions that you added are in the action bar. 
   

5. Play around with your page. Scroll up and down to see the components, and tap an action icon to see what happens.
   

Resources

• Salesforce Help: Create a Custom App Page: The Big Picture
  
• Salesforce Help: Activate Your Lightning App Page
  
• Salesforce Help: Standard Lightning Page Components