Build an App Home Lightning 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!
- From Setup, enter App Builder in the Quick Find box, then select Lightning App Builder.
- Click New.
- Select App Page, and then click Next.
- Name your Lightning page Top Accounts and Opportunities.
Select the Two Regions template, and click
If the Lightning App Builder walkthrough pops up, dismiss it.
- Drag the List View component into the first region.
- In the properties pane, under Filter, select the Platinum and Gold SLA Customers view.
- Add a Recent Items component into the second region.
- In the properties pane for the Recent Items component, click Select and add the Opportunity object to it.
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.
- From the toolbar, change the view to Tablet-Landscape.
- 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.
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.
- Click Activation.
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.
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.
Keep the tab’s visibility open to all users.
- Click the Lightning Experience tab.
Select a Lightning app, and click Add page to app.
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.
- Click the Mobile tab.
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.
Drag the page to below the Today menu item.
- Click Save.
You’ve created your page and activated it. Now let’s see it in action!
- Open the Salesforce mobile app on your mobile device.
- Log in using your Trailhead Playground credentials. (If you don’t know your Trailhead Playground credentials, see this article.
- Tap to access the navigation menu.
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.
- Play around with your page. Scroll up and down to see the components, and tap an action icon to see what happens.
Now let’s look at it in Lightning Experience.
- Go back to your desktop browser and your Trailhead Playground.
- If you’re still in the App Builder, click Back to return to Setup.
- From the App Launcher (), open the Lightning app you assigned your page to.
Click Top Accounts and Opportunities from the app
Here’s your Lightning page! The lightning bolt icon appears here too, and the three actions that you added are in the highlights panel.