Time Estimate

Get Started with the Lightning App Builder

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

Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This module is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this unit, you’ll be able to:
  • Understand how the Lightning App Builder can help you build responsive apps and custom pages for Lightning Experience and the mobile app
  • Understand the layout of the Lightning App Builder user interface
  • Describe the difference between a Lightning page and a Lightning component

Meet the Lightning App Builder

Your users are busy. They’re closing deals, providing top-notch service, and marketing to your prospects and customers. By creating customized pages, you can put key information at your users’ fingertips and provide them with an easy interface to update and add records.

The Lightning App Builder is a point-and-click tool that makes it easy to create custom pages for the Salesforce mobile app and Lightning Experience, giving your users what they need all in one place.

But that’s not all. When you edit a Lightning app from the App Manager in Setup, you’re brought into the Lightning App Builder to manage the app’s settings. You can update the app’s branding, navigation, options, and manage the Lightning pages assigned to that app all in the Lightning App Builder.

In this module, we’ll be exploring Lightning page creation. Check out the Lightning Apps module for more information about editing apps with the Lightning App Builder.

How the Lightning App Builder Works

With the Lightning App Builder, you can build:
  • Single-page apps that drill down into standard pages
  • Dashboard-style apps, such as apps to track top sales prospects or key leads for the quarter
  • “Point” apps to solve a particular task, such as an expense app for users to enter expenses and monitor expenses they’ve submitted
  • Custom record pages for your objects, tailored to the needs of your users
  • Custom Home pages containing the components and features that your users use most

A Lightning page is a custom layout that lets you design pages for use in the Salesforce mobile app or Lightning Experience. A Lightning page is composed of regions that contain components.

Here’s a sneak peek at one of the pages you’re going to build.

Lightning App Page Structure

The structure of a Lightning page adapts for the device it’s viewed on. The template you choose when creating the page controls how it displays on a given device. The Lightning page’s template divides the page into regions.

Lightning page regions

Lightning Components

A Lightning component is a compact, configurable, and reusable element that you can drag and drop onto a Lightning page in the Lightning App Builder.

Lightning pages support these components:
Standard Components
Standard components are Lightning components built by Salesforce.
Custom Components
Custom components are Lightning components that you or someone else have created. With some modifications, custom Lightning components can work in the Lightning App Builder. For more information on making Lightning components App Builder–friendly, see the Lightning Components Developer Guide.
Third-Party Components on AppExchange
The AppExchange provides a marketplace for Lightning components. You can find packages containing components already configured and ready to use in the Lightning App Builder.

The Lightning App Builder User Interface

The Lightning App Builder’s user interface makes creating Lightning pages easy. Here’s a breakdown of the parts of the tool.

Lightning App Builder UI

Header (1)
When you’re working on a Lightning page, the header shows you its label, and contains a Pages list where you can see the last 10 pages that you modified. You can also return to Setup without saving or to view more help for the Lightning App Builder.
If you’re editing an app, the header also shows the app name and contains an App Settings tab where you can configure the app’s options such as branding, navigation, and the utility bar. In an app context, the Pages list shows all active Lightning pages associated with the current app, including record and app pages assigned to the app, and all Home pages that are assigned to a profile.
Toolbar (2)
Use the buttons in the toolbar to cut (Cut), copy (Copy), and paste (Paste) page content; and to undo (Undo), redo (Redo), save, or activate your Lightning page. You can also view your page in different formats, refresh the canvas, or adjust the canvas size to fit your view.
Lightning Components Pane (3)

The components pane contains all standard and custom Lightning components that are supported for your Lightning page. Click and drag a component to add it to the page.

Tip

Tip

If you have a lot of custom components, enter text in the search field to easily find the one you need. You can access third-party custom components on the AppExchange using the button at the bottom of the pane.

Lightning Page Canvas (4)
The canvas area is where you build your page. Drag components to reorder them on the page.
Properties Pane (5)
Depending on what you select on the page, the properties pane shows either the overall page properties or the properties of the component that you’ve selected. Click Page in the breadcrumb to access the page properties when viewing a component.

Lightning Page Types

You can create different types of Lightning pages with the Lightning App Builder. In this module, we'll look at these three types.
App Page
Use an app page to create a home page for a third-party app that you can add directly into the Salesforce mobile app and Lightning Experience navigation menus. Your users then have an app home page where they can quickly access the most important objects and items.
Home Page
Create Home pages with features relevant to specific types of users, and assign the customized pages to different user profiles. Custom Home pages are supported in Lightning Experience only.
Record Page
With a record page, you can create a customized version of an object’s record page, tailoring it to your users’ needs. Custom record pages are supported in Lightning Experience only.

Let’s start with the Home page.

retargeting