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, and set the number of records to display to 5.
- 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 app 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 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 page in the mobile app and in Lightning Experience.
Keep the tab’s visibility open to all users.
- Click the Lightning Experience tab.
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. 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 Navigation tab.
Select Mobile Navigation Menu, and click Add
page to app.
This adds the app page to the mobile navigation in the Salesforce mobile web browser and in the “Mobile Only” Lightning app in the Salesforce mobile app. Adding the page to the Sales app in Lightning Experience like we 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 mobile navigation in the Salesforce mobile web browser and 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. 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!
- If you’re still in the App Builder, click Back to return to Setup.
- From the App Launcher (), find and select Sales.
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.
Now let’s look at it on your phone.
- Open the Salesforce mobile app.
- Log in using your Trailhead Playground credentials. (If you don’t know your Trailhead Playground credentials, see this article.
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.
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.
- Play around with your page. Scroll up and down to see the components, and tap an action icon to see what happens.