trailhead

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

The App Home Lightning Page

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

Your App Home Page

Create an App Page

Let’s 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.

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 App Page, and then click Next.
  4. Name your Lightning page Top Accounts and Opportunities.
  5. Select the Two Columns template and click Finish.
    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, under Filter, select the Platinum and Gold SLA Customers view.
  8. Add a Recent Items component into the second region.
  9. In the properties pane for the Recent Items component, click Select and add the Opportunity object to it.
  10. 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 page.

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

App Home Lightning Page

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 navigation list 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 mobile app and for the page in Lightning Experience.
  4. Keep the tab’s visibility open to all users.
    Tip

    Tip

    The Activate for the System Administrator profile 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 a Lightning app, and click Add page to app.
    Activate app page for Lightning Experience
    The page you’re adding to the menu appears in the second position by default. Let’s 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 tab.
  8. Select Mobile Navigation Menu, and click Add page to app.
    By default, new pages you add to the Salesforce mobile app menu 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. We don’t want that, so let’s move it up.
  9. Drag the page to below the Today menu item.
    Activate Your Lightning Page
  10. Click Save.
Your app home page is now ready for your mobile and Lightning Experience users!

Test Your App Page in the Salesforce Mobile App

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

  1. Open the Salesforce mobile app on your mobile device.
  2. Log in using your Trailhead Playground credentials. (If you don’t know your Trailhead Playground credentials, see this article.
  3. Tap Salesforce App Nav to access the navigation menu.
  4. Select 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.
    App Home on a Phone
  5. Play around with your page. Scroll up and down to see the components, and tap an action icon to see what happens.

Test Your App Page in Lightning Experience

Now let’s look at it in Lightning Experience.

  1. Go back to your desktop browser and your Trailhead Playground.
  2. If you’re still in the App Builder, click Back to return to Setup.
  3. From the App Launcher (App Launcher icon), open the Lightning app you assigned your page to.
  4. 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.
    Your app page in Lightning Experience

Resources

Lightning bolt icon used to indicate that the content is for Lightning Experience

Remember, this module is meant for Lightning Experience. When you launch your hands-on org, switch to Lightning Experience to complete this challenge.

retargeting