Launchpad Lesson 10 - The Lightning App Builder

In the previous lesson, we looked at page layouts, which control what data appears on the page. In this lesson, we're going to look at Lightning pages in the Lightning App Builder, which controls the design of the page.

The Lightning App Builder is a point-and-click tool that makes it simple to build custom pages for both the desktop version of Salesforce Lightning and the Salesforce mobile app. A Lightning page is composed of regions that contain different components.

The base template you choose determines how the page is displayed. Salesforce offers multiple template options.

The goal is to maximize your team's efficiency by creating pages that are as navigation-friendly as possible. This is one of those lessons where it's easier to see the concepts in real time, so let's get right to our demo.

Every object has a default Lightning page, but it's important to know how to make changes. The easiest way to access the Lightning Page Builder for an object is to start on a record for that object.

In this lesson, we're going to edit the Account Lightning page, so let's go to an account record.

Click the Setup cog, but instead of going to Setup, select Edit Page. This will take you to the Lightning Page Builder.

The builder is a drag-and-drop tool that allows you to see what your changes will look like in real time.

When you first open the page, you'll see a preview in the middle. You can adjust the display options using these two tools. You can zoom in and out using this menu, and you can also view the page from either a mobile or desktop perspective.

On the right-hand side are the page details. You can change the page label and, more importantly, the template layout.

For example, our current layout is called Header and Right Sidebar, but there are several templates to choose from. Click Change to see the various layout options.

For this example, we'll leave the layout set to Header and Right Sidebar.

On the left-hand side of the page, we have a list of components that can be dragged onto the page and placed exactly where we want them. A component is a defined block identified by these blue borders.

If we want to edit the settings of a component that's already on the page, we can click on it, and its settings will appear on the right-hand side. Let me show you.

I'm going to demonstrate some of our recommended changes for the Account Lightning page.

Start by selecting the large middle pane with the Details, Related, and News tabs.

Once you've highlighted the desired component, click on it and notice how the options in the right-hand panel change. In the dropdown menu for Default Tab, choose Details.

Then drag the Details tab on top of the Related tab. Details will now be displayed first when viewing an account, which is our preferred page setup.

Next, we're going to move our related list to the right sidebar.

Here's our rationale: When working with accounts and contacts, users will primarily want to see details and related items. To minimize the number of clicks they need to make, we'll configure the page to display both at the same time.

With leads and opportunities, however, users will generally be more interested in seeing the details and sales activities. We'll configure those pages with that in mind. We'll set up the other objects—contacts, leads, and opportunities—in upcoming lessons.

Highlight the component containing Activity and Chatter. In the right sidebar, click Add Tab. The new tab will display Details, but click on the tab and select Related from the picklist.

Then click Done.

Next, drag the Related tab above Activity and change the default tab to Related.

Click on the Related tab, and you'll see an empty space for a component.

Go back to the large component and click on the Related tab. Then select the Related Lists component and drag it from the middle pane into the empty space.

These green lines will guide you and show you where the component will be placed.

Next, bring over the Related List Quick Links component and place it above the Related Lists component.

Finally, drag the Potential Duplicates component from the middle pane and place it above the tab headings so that it's always visible.

Now, click back on our large component and click the X on the Related tab to remove that tab from the large component.

Anytime you make changes like these, you'll want to click Save in the top-right corner.

The first time you make changes to a layout, you'll need to activate the page. Go ahead and click Activation.

This gives you the ability to activate the page for all users or assign it specifically by app or profile.

To keep things simple, we're going to click Assign as Org Default, making it the default page for everyone.

Leave the next step set to Desktop, click Next, and then click Save.

To exit the Lightning Page Builder, click the Back button in the top-left corner.

Pretty neat stuff, huh?

Once again, we'll be doing more of this when we customize Lightning pages for the other sales objects—leads, contacts, and opportunities—in the next few lessons.

Now we're going to head in a slightly new direction. The next four lessons will focus on setting up your company's sales objects. All the theory we've covered so far will be put into practice as we build out your Salesforce org.

We'll see you there.